Section reference
Product information
Set up Vellmar's product page section, with its gallery layouts, sticky add to cart bar and more than twenty product blocks.
Product information is the main section of the product template. On the left is the media gallery; on the right, the product details, built from blocks that you can add, remove and reorder.
The gallery
- Desktop gallery layout: a Two column grid, a single One column stack, or one large image with Thumbnails on the side or Thumbnails below. On phones and tablets, the gallery is always a swipeable row.
- Media width sets how much space the gallery takes, and Stretch media to the screen edge lets it run to the edge of the screen.
- Enable image zoom opens images full screen. Videos, YouTube and Vimeo videos and 3D models are supported, with a button to view 3D models in your space on supported phones.
- Gallery text adds a colored tile with a heading and text after the media. It shows in the two column grid on desktops.
The product details
The details column can hold these blocks, plus app blocks from apps you install:
- Basics: Vendor, Title, Product rating, Price, SKU, Description.
- Buying: Variant picker (buttons or dropdowns; options with swatches always show as swatches), Quantity selector with volume pricing, Buy buttons with dynamic checkout and the gift card recipient form, Pickup availability, Inventory status with a low stock threshold, and a Back in stock form for sold out variants.
- Persuasion: Labels, Chips, Fit scale, Product details (three key numbers), Trust badges, Complementary products.
- Extra content: Text, Collapsible row, Popup (for example a size guide page), Share and Custom Liquid.
Keep product information visible while scrolling pins the details column while shoppers scroll through a long gallery.
Show sticky add to cart bar shows a slim bar with the product, price and an add to cart button once the main buy buttons scroll out of view. It needs the Buy buttons block.
Best practices
- Put the essentials first: title, price, variant picker and buy buttons should be visible without scrolling on a laptop screen.
- Use collapsible rows for detail, such as materials, care and shipping. Pull the content from a page so you can reuse it across products.
- Connect metafields for per-product content. Chips, Fit scale and Product details accept a metafield in place of typed text, so each product shows its own values. See Metafields.
- Only show real stock and ratings. Inventory status shows real inventory for variants Shopify tracks, and Product rating reads the rating metafield that a reviews app fills in.
- Back in stock requests arrive as contact form emails, tagged "back-in-stock", so you can reply when the product returns.
See Product pages for setting up products themselves.
Preset tips
- The product template in every preset starts with a two column grid gallery, sticky product information and the sticky add to cart bar.
- Sorrel suits Chips ("Best for: dry, sensitive") and Product details ("3–4 drops per use").
- Graphite suits the Fit scale and a Popup block linking a size guide page.
- Handle
main-product- Group
- Template sections
- Where
- Part of its page template. Accepts app blocks.
Settings
| Setting | Type | Default | Options |
|---|---|---|---|
| Media width | Drop-down | Medium | Small, Medium, Large |
| Show breadcrumbsShown above the media and product information. | Checkbox | On | — |
| Stretch media to the screen edge | Checkbox | Off | — |
| Keep product information visible while scrolling | Checkbox | On | — |
Section
| Setting | Type | Default | Options |
|---|---|---|---|
| Color scheme | Color scheme | Scheme 1 | — |
Padding
| Setting | Type | Default | Options |
|---|---|---|---|
| Top padding | Slider | 16px | 0px to 200px, in steps of 4px |
| Bottom padding | Slider | 0px | 0px to 200px, in steps of 4px |
| Top padding on mobile | Slider | 12px | 0px to 200px, in steps of 4px |
| Bottom padding on mobile | Slider | 0px | 0px to 200px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order.
This has no settings.
App blocks
Apps you install can add their own blocks here. Their settings come from the app.