Product information

The product page as a spread: the gallery on one page, the product information on the other. The information is made of separate blocks (title, price, variant picker, buy buttons and more) that you add, remove and reorder. Changing a variant updates the page without a reload.

This section also has the base settings every section shares: color scheme, layout, running head, page number, padding, divider and reveal on scroll.

Settings

Setting	What it does
Gallery layout	On mobile the gallery is always a swipe row. Options: Stacked, Large first, then two columns, Two columns, Mosaic: one large, two small, Carousel, Carousel with thumbnails. Default: stacked.
Thumbnail position	Options: Below the image, Beside the image. Default: below.
Media shape	Options: Adapt to image, Square, Portrait, Landscape. Default: adapt.
Show only the selected variant’s media	Each variant’s image starts a group that runs to the next variant’s image. Media before the first variant image shows for every variant. Default: off.
Image zoom	Options: Open in a lightbox, Magnify on hover, None. Default: lightbox.
Keep product information in view while scrolling	Default: on.
Show add to cart bar on mobile	Appears when the main add to cart button scrolls out of view, in place of the bottom bar. Default: on.
Show the bar on desktop too	Default: on.
Loop videos	Default: on.
Update the page address when a variant is chosen	Lets customers share a link to the exact variant. Default: on.
Order on mobile	Options: As on desktop, Second page first. Default: same.
Content width	Options: Narrow, Normal, Wide. Default: normal.
Minimum height	Options: Automatic, Small, Medium, Large, Full screen. Default: none.
Background image
Overlay opacity	A layer in the color scheme’s background color keeps text readable over the image. From 0 to 90 %. Default: 60.
Padding on mobile	Options: Same as desktop, Smaller, None. Default: same.
Visibility	Options: Show on all devices, Hide on mobile, Hide on desktop. Default: all.

Blocks

Vendor

Product vendor as a small label, linked to the vendor's products.

No settings of its own.

Title

Product title, never shortened. H1 on the product page, H2 elsewhere.

Setting	What it does
Size	Options: Extra large, Large, Medium. Default: h2.
Show rating	Leave empty to use the product of the page or card. Ratings come from your reviews app. Default: on.

Price

Price of the selected variant, with sale, unit price and tax note. Updates with the variant.

Setting	What it does
Show tax note	Shown when prices include taxes. Default: on.

Variant picker

Variant picker block. See snippets/variant-picker.liquid.

Setting	What it does
Style	Product images: the first option, such as color, shows each value as its variant’s image. Options: Swatches when available, otherwise buttons, Buttons, Product images, Dropdown. Default: auto.

Quantity

Quantity field with minus and plus buttons. Follows the variant's quantity rule (minimum, maximum, increment). Optional +5 and +10 buttons for bulk buyers.

Setting	What it does
Show +5 and +10 buttons	Default: off.

Volume pricing

Volume pricing for the selected variant: price per unit at each quantity break. Shown only to B2B buyers whose catalog sets price breaks; renders nothing for everyone else.

No settings of its own.

Add-ons

Add-ons ("popular upgrades"): accessory products the customer can tick, added to the cart in the same request as the product. Each add-on adds its first available variant once. Products that are sold out, or the product itself, are left out. Without JavaScript the product is added on its own.

Setting	What it does
Heading	Default: Popular upgrades.
Add-on products	Up to 6. Each adds its first available variant, once, with the product.
Style	Options: Panel, Plain. Default: panel.
Show icon	Default: on.
Note under the list	For example: "Ticked add-ons are added to the cart with the product."

Buy buttons

Add to cart and accelerated checkout buttons. Owns the product form; the quantity block joins it with the form attribute. Works without JavaScript (posts to /cart/add).

Setting	What it does
Show price in the button	Default: off.
Show gift card recipient form	Lets customers send a gift card product to someone by email on a date they choose. Default: on.
Show accelerated checkout buttons	Shows the payment methods available in your store, such as Shop Pay or Apple Pay. Default: on.
Pre-order message	Shown, with a Pre-order button, when a variant tracks inventory, keeps selling when out of stock and has none left. Default: Ships as soon as it is back in stock..

Description

The product description.

No settings of its own.

Collapsible row

A collapsible row of product information. Content comes from text, a page or any metafield connected as a dynamic source.

Setting	What it does
Heading	Default: Shipping and returns.
Content	Connect a metafield to show different content for each product.
Page	Replaces the content above.
Open by default	Default: off.

Inventory

Stock status from real inventory only: hidden, low stock only (below a threshold) or the exact count. Never shown for untracked inventory. Updates with the selected variant.

Setting	What it does
Show stock	Options: Low stock only, Exact count, Hidden. Default: low.
Low stock threshold	From 1 to 20. Default: 5.
Show stock bar	Default: off.
Full bar at	The bar shows the real stock count against this number of units. From 5 to 100. Default: 20.

Pickup availability

Pickup availability for the selected variant at the store's pickup locations. Re-rendered with the variant, so it is always current.

No settings of its own.

Installments banner

Shop Pay Installments banner. Shopify shows it only when installments are available for the store and the price.

No settings of its own.

Share button: the device's share sheet where supported, otherwise copy the link.

No settings of its own.

Complementary products

Products that go with this one, from the complementary products you set in the Search and Discovery app. Shows nothing when a product has none.

Setting	What it does
Heading	Default: Pairs well with.
Products shown	From 1 to 6. Default: 3.

Text

A block of rich text.

Setting	What it does
Text
Style	Options: Body, Large, Small. Default: body.

Heading

A heading. The level sets the HTML tag for the page outline; the size sets the look.

Setting	What it does
Heading	Default: Heading.
Size	Options: Extra large, Large, Medium, Small, Label. Default: h2.
Heading level	Use H1 once per page, for the main title. Options: H1, H2, H3, Not a heading. Default: h2.

Button

A link styled as a button or a text link. Without a link it renders as a disabled button so the layout stays visible in the editor.

Setting	What it does
Label	Default: Shop now.
Link
Open in a new tab	Default: off.
Style	Options: Primary, Secondary, Text link. Default: primary.
Size	Options: Small, Medium, Large. Default: medium.
Full width	Default: off.

Countdown

Countdown to a real end date (no fake urgency): the merchant enters a date and time in the store's time zone, or connects a date metafield. Counts down in absolute time, so it is right in every visitor's time zone. Without a valid date it renders nothing. When the time is up it hides itself or shows a message.

Setting	What it does
End date and time	Format: YYYY-MM-DD HH:MM, in your store time zone. You can connect a date metafield instead. Without a valid date the countdown is hidden.
Label	Default: Offer ends in.
When time is up	Options: Hide the countdown, Show a message. Default: hide.
Message	Default: This offer has ended..

Spec sheet

Spec sheet: up to 12 rows of label and value, ruled like a page of specifications. Each value can be connected to a product metafield, so every product shows its own specs. Empty rows are skipped.

Setting	What it does
Heading	Default: Specifications.
Label 1	Default: Material.
Value 1
Label 2	Default: Dimensions.
Value 2
Label 3	Default: Care.
Value 3
Label 4	Default: Warranty.
Value 4
Label 5
Value 5
Label 6
Value 6
Label 7
Value 7
Label 8
Value 8
Label 9
Value 9
Label 10
Value 10
Label 11
Value 11
Label 12
Value 12

Size chart

Size chart: a link that opens a page (for example a size table) in a dialog.

Setting	What it does
Label	Default: Size chart.
Page	Create a page with your size table and choose it here.

Help drawer

Help drawer: a "Need help?" button that opens a side drawer with the store's own ways to get in touch (phone, email, a chat or messaging link, opening hours) and, optionally, a page such as shipping questions. Nothing is loaded from outside the store.

Setting	What it does
Label	Default: Need help choosing?.
Small line	Default: Talk to our team.
Photo	A small round photo, for example of your team. Shown instead of the icon.
Heading	Default: We are here to help.
Text
Phone number
Email address
Messaging link	For example a WhatsApp or Messenger link. It opens in that app; nothing is loaded on your store.
Messaging label	Default: Send us a message.
Contact page
Opening hours	For example: Sunday to Thursday, 9 to 17.
Page	Shown at the end of the drawer, for example common questions.

Custom option

Custom option: a field the customer fills in before adding to cart, for example an engraving, a monogram or a gift message. Saved on the order line as a line item property (shown in the cart, at checkout and on the order). A required field stops the add to cart with a message.

Setting	What it does
Label	Also the name of the detail on the order, for example Engraving or Gift message. Default: Engraving.
Field	Options: Short text, Long text, Dropdown, Checkbox. Default: text.
Choices	Separate with commas, for example Serif, Script, Block capitals.
Placeholder
Help text
Maximum characters	From 5 to 250. Default: 30.
Required	Default: off.

Sibling products

Sibling products: swatches that link products sold separately, for example one product per color. The family is a collection; connect the setting to a product metafield that points to a collection (Connect dynamic source), so each family uses its own. Works on every Shopify plan. The swatch shows the product's image, a color from a metafield, or a name.

Setting	What it does
Label	Default: Color.
Family collection	A collection with every product of the family. Connect it to a product metafield that points to a collection, so each family uses its own.
Swatch	Options: Product image, Color, Name. Default: image.
Name metafield	Namespace and key of each product’s swatch name, for example custom.color_name. Without it the product title is used.
Color metafield	A color metafield on each product, for example custom.color.
Maximum swatches	From 2 to 24. Default: 12.

Back in stock request

Back in stock request, shown only when the selected variant is sold out. Sends the store a contact message with the product and variant, so the merchant can write back when it returns. No app and no automatic emails: the request reaches the merchant's inbox.

Setting	What it does
Text	Default: Sold out. Leave your email and we will let you know when it is back..

Icon with text

A small icon next to a short line of text, for promises such as free returns.

Setting	What it does
Icon	Options: Shipping, Returns, Secure payment, Gift, Natural, Support, Quality, Fast, Worldwide, Packaging, Shine, Check, Heart, Shield, Phone, Email, Location, Calendar, Tag, Percent, Payment card, Store, Water, Sun, Handmade, Award, People, Recycle, Fast, Tailoring, Battery, Bluetooth, Weight, Processor, Screen, Wi-Fi, Charging, Speaker. Default: truck.
Text	Default: Free returns within 30 days.

Accordion

Rows that open and close, built on native disclosure elements so they work without JavaScript. Choose lines or boxes, and whether only one row stays open at a time. Each row takes text and any other blocks.

Setting	What it does
Heading
Style	Options: Lines, Boxes. Default: rules.
Keep one row open at a time	Default: off.

Tabs

Content in tabs. The panels are written one after another, so the content reads in order even before the script runs; the tab list follows the keyboard pattern for tabs, and arrow keys follow the reading direction in right to left languages.

Setting	What it does
Style	Options: Underline, Pills. Default: underline.
Text alignment	Options: Start, Center. Default: start.

Group

Holds other blocks in a row or a column, with its own gap, alignment, inner padding and an optional color scheme. Rows stack on mobile unless you turn that off.

Setting	What it does
Direction	Options: Column, Row. Default: column.
Stack on mobile	Default: on.
Text alignment	Options: Start, Center, End, Spread out. Default: start.
Vertical alignment	Options: Top, Middle, Bottom. Default: center.
Gap	From 0 to 64 px. Default: 16.
Full width	Default: on.
Use a color scheme	Default: off.
Color scheme	Default: scheme-2.
Inner padding	From 0 to 64 px. Default: 0.

Spacer

Empty space between blocks, with a separate height on mobile.

Setting	What it does
Height	From 0 to 200 px. Default: 48.
Height on mobile	From 0 to 200 px. Default: 32.

Badge

A short label such as New season, in outline, solid or accent style.

Setting	What it does
Text	Default: New season.
Style	Options: Outline, Solid, Accent. Default: outline.

Product rating

Star rating from the standard product reviews metafields that review apps fill. Shows nothing when a product has no rating, so the store never shows an invented one.

Setting	What it does
Product	Leave empty to use the product of the page or card. Ratings come from your reviews app.
Show review count	Default: on.

Custom Liquid

Liquid, HTML or an app snippet, exactly where you place it.

Setting	What it does
Liquid code	Add app snippets or other code for advanced customizations.

Key specs

Key specs: short facts as chips, each an icon, a value and a label ("35 h, battery life"). A value can be connected to a product metafield; chips without a value are left out.

Setting	What it does
Heading	Default: Product highlights.
Columns	From 2 to 6. Default: 4.
Columns on mobile	Options: 1, 2, 3. Default: 2.
Style	Options: Panel, Plain. Default: panel.

App blocks can be added to this section.