Section reference
Product information
Set up Vellora'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 |
|---|---|---|---|
| Desktop gallery layout | Drop-down | Two column grid | Two column grid, One column, Thumbnails on the side, Thumbnails below |
| Media width | Drop-down | Large | Small, Medium, Large |
| Stretch media to the screen edge | Checkbox | Off | — |
| Enable image zoom | Checkbox | On | — |
| Loop videos | Checkbox | Off | — |
| Keep product information visible while scrolling | Checkbox | On | — |
| Show sticky add to cart bar | Checkbox | On | — |
Gallery text
Adds a text tile after the media in the two column grid on desktop.
| Setting | Type | Default | Options |
|---|---|---|---|
| Heading | Inline rich text | None | — |
| Text | Text | None | — |
| Color scheme | Color scheme | Scheme 3 | — |
Section
| Setting | Type | Default | Options |
|---|---|---|---|
| Color scheme | Color scheme | Scheme 1 | — |
| Top padding | Slider | 24px | 0px to 160px, in steps of 4px |
| Bottom padding | Slider | 64px | 0px to 160px, in steps of 4px |
Blocks
Add blocks to this section from the theme editor, then drag them to change their order.
App blocks
Apps you install can add their own blocks here. Their settings come from the app.
Text
| Setting | Type | Default | Options |
|---|---|---|---|
| Text | Inline rich text | Text block | — |
| Style | Drop-down | Body | Body, Eyebrow, Caption |
Vendor
You can add this block once.
This has no settings.
Title
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| Size | Drop-down | Medium | Small, Medium, Large |
Product rating
You can add this block once.
Shows the rating stored in the product rating metafield. Add a reviews app to collect ratings.
Price
You can add this block once.
This has no settings.
Labels
| Setting | Type | Default | Options |
|---|---|---|---|
| First label | Text | Free shipping | — |
| Second label | Text | None | — |
| Third label | Text | None | — |
Chips
| Setting | Type | Default | Options |
|---|---|---|---|
| Label | Text | Best for | — |
| ChipsSeparate chips with commas. Connect a product metafield to set them per product. | Text | Dry, Sensitive, Combination | — |
Back in stock form
You can add this block once.
Shows when the selected variant is sold out. Requests arrive as contact form emails.
| Setting | Type | Default | Options |
|---|---|---|---|
| Text[variant] shows the variant name. | Text | [variant] is sold out. Get an email when it is back. | — |
| Button label | Text | Notify me | — |
| Success message | Text | Thanks. We will email you when it is back. | — |
SKU
You can add this block once.
This has no settings.
Inventory status
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| Low stock threshold | Slider | 10 | 1 to 50, in steps of 1 |
Shows real inventory for variants tracked by Shopify.
Variant picker
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| StyleOptions with swatches always show as swatches. | Drop-down | Buttons | Buttons, Dropdown |
Quantity selector
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| Show volume pricingVolume pricing appears for B2B customers when a catalog sets quantity price breaks. | Checkbox | On | — |
Buy buttons
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| Show dynamic checkout buttonsCustomers see their preferred payment method. Learn more | Checkbox | On | — |
| Show recipient form for gift cards | Checkbox | On | — |
Pickup availability
You can add this block once.
This has no settings.
Description
You can add this block once.
This has no settings.
Collapsible row
| Setting | Type | Default | Options |
|---|---|---|---|
| Heading | Text | Collapsible row | — |
| Content | Rich text | None | — |
| Content from a page | Page | None | — |
| Open by default | Checkbox | Off | — |
Popup
| Setting | Type | Default | Options |
|---|---|---|---|
| Link label | Text | Size guide | — |
| PageThe link is hidden until a page with content is selected. | Page | None | — |
Fit scale
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| Heading | Text | Fit | — |
| PositionA number from 0 to 100. Connect a product metafield to set it per product. | Text | 50 | — |
| Left label | Text | Runs small | — |
| Middle label | Text | True to size | — |
| Right label | Text | Runs large | — |
| Note | Text | None | — |
Trust badges
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| First icon | Drop-down | Truck | Truck, Return, Lock, Leaf, Check mark, Gift |
| First text | Text | Free shipping over $75 | — |
| Second icon | Drop-down | Return | Truck, Return, Lock, Leaf, Check mark, Gift |
| Second text | Text | Thirty day returns | — |
| Third icon | Drop-down | Lock | Truck, Return, Lock, Leaf, Check mark, Gift |
| Third text | Text | Secure checkout | — |
Product details
You can add this block once.
| Setting | Type | Default | Options |
|---|---|---|---|
| First value | Text | AM | — |
| First label | Text | and PM use | — |
| Second value | Text | 3–4 | — |
| Second label | Text | drops per use | — |
| Third value | Text | 2 | — |
| Third label | Text | months per bottle | — |
Complementary products
You can add this block once.
Choose complementary products with the Search and Discovery app. Learn more
| Setting | Type | Default | Options |
|---|---|---|---|
| Heading | Text | Pairs well with | — |
| Maximum products | Slider | 3 | 1 to 6, in steps of 1 |
Share
You can add this block once.
This has no settings.
Custom Liquid
| Setting | Type | Default | Options |
|---|---|---|---|
| LiquidAdd app snippets or other Liquid code to create advanced customizations. | Liquid | None | — |