Product

Only available on the product page template. This is the main section on every product page — it holds the media gallery and, as blocks, every piece of the product info column (title, price, description, add to cart form, and so on). Add, remove, and reorder blocks to build the layout you want.

Content settings

Make content sticky on desktop — keeps the product info column in view as the customer scrolls the media. Default on.
Width — width of the info column: Small, Medium, or Large. Default Medium.

Media settings

Layout — how product media is arranged: One column, Two columns, Alternating one and two columns, or Carousel. Default One column.
Aspect ratio — 1:1, 4:5, 3:4, 2:3, or 4:3. Default 1:1.
Loop videos — videos in the gallery replay automatically. Default on.
Enable image zoom — lets customers zoom into product images. Default on.
Gallery navigation — Arrows and dots, or Thumbnails. Video and 3D model thumbnails show an icon. Default Arrows and dots.
Thumbnail position — Bottom, or Left to stack the thumbnails beside the main image on desktop. Shown when the layout is Carousel and navigation is Thumbnails. Default Bottom.
Show sticky add to cart bar — shows a bar with the price, variant options, and an add to cart button once the main button scrolls out of view. Default on.
- Sticky add to cart color scheme (only when the above is on) — default Scheme 1.

Section settings

Color scheme — default Scheme 1.
Spacing — where padding is applied: Bottom, Top, Top and bottom, or None. Default Top and bottom.
Spacing size — how much padding: Base, Small, or X-small. Default Base.

Blocks

Also supports Subheading, Heading, Rich text, Button (see Shared content blocks) and app blocks, alongside the product-specific blocks below.

Title

Displays the product’s title.

Size — heading size, H0–H6. Default H1.
Use a different size on mobile — set a separate size for mobile. Default off.
- Size (mobile) (only when the above is on) — default H1.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Description

Displays the product’s description.

Size — X-large, Large, Medium, Base, Small, or X-small. Default Base.
Balance line lengths — keeps line lengths more even/consistent. Default off.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Price

Displays the product’s price.

Size — X-large, Large, Medium, Base, Small, or X-small. Default Base.
Show taxes included — adds a “Taxes included” note under the price. Default off.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Form

The variant picker and add to cart button.

Variant style — how variant options are shown: Dropdowns or Pills. Default Pills.
Show quantity selector — adds a quantity selector next to the add to cart button. Default off.
Show variant images (only when Variant style is Pills) — uses each option value’s variant image instead of a swatch and label. Default off.
- Option names (only when Pills and Show variant images are on) — comma-separated option names (e.g. “Color, Pattern”) this applies to; leave blank to apply to all options. Default “Color, Colour”.
- Variant image size (only when Pills and Show variant images are on) — range 1.5–8rem, default 3rem.
Show purchase options — when a product is sold on subscription, pre-order or try-before-you-buy plans from a selling plan app, lists them under the variant options so shoppers can choose between a one-time purchase and each plan. Prices update to match the chosen plan. Turn this off if your app adds its own selector, so shoppers don’t see two. Default on.
Button style — Primary, Secondary, or Custom. Default Primary.
- Button background color (only when Custom) — default black.
- Button text color (only when Custom) — default white.
- Button border color (only when Custom) — default black.
Show additional checkout buttons — shows extra express checkout buttons (e.g. Shop Pay) below add to cart. Default on.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Linked variants

Shows links to related products (for example, the same style sold as separate products) using metafields configured in Shopify admin. Requires two product metafields: a single-line text field named custom.linked_variant_label, and a list of metaobjects named custom.linked_variant_options (each metaobject needs a “label” text field and a “product” product reference field).

Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Badges

Displays the product’s badges.

Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Divider

Adds a horizontal divider line between other blocks.

Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Collapsible content

A set of expandable content items (for example, Size & Fit, Care Instructions, Delivery & Returns).

Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Item heading size is set globally in Theme settings → Typography → Font size → Collapsible content heading, so every collapsible item in the theme matches. See Typography.

Add Item sub-blocks for the actual expandable rows:

Item

Heading — the item’s clickable title text.
Rich text — the content shown when the item is expanded.
Open by default — expands this item when the page loads. Default off.

Range

A labelled scale, for example to show where a product sits on a size or intensity scale, driven by a single number.

Heading — optional heading shown above the scale.
Labels — comma-separated list of labels shown along the scale. Default “Low,Medium,High”.
Value — a whole number from 0–100 marking the position on the scale (or connect it to a product Number metafield). Default “50”.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Inventory level

Shows a low-stock style message once inventory drops below a set threshold.

Low inventory threshold — range 0–100, default 50. Below this stock count, the low-inventory message is shown.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Availability

Shows pickup/delivery availability information, with a drawer for full details.

Show in a box — wraps the summary in a colored, padded box. Default off.
- Color scheme (box) (only when the above is on) — default Scheme 1.
Color scheme (drawer) — the color scheme for the availability drawer. Default Scheme 1.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

A “share this product” control.

Label — the text shown next to the share control.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Info card

A small content card (image, heading, text, and button) — useful for care instructions, guarantees, or shipping notes alongside the product info.

Image — the card’s image.
Aspect ratio — 16:9, 4:3, 1:1, 4:5, 3:4, 2:3, or Auto (the image’s own proportions). Default 1:1.
Heading — the card’s heading text.
Rich text — the card’s body text.
Button label — the button’s label.
Button link — where the button links.
Button style — Primary or Secondary. Default Primary.
Color scheme — default a preset scheme.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Media carousel

A small carousel of extra media/product tiles shown within the info column.

Aspect ratio — 16:9, 4:3, 1:1, 4:5, 3:4, 2:3, 9:16, or Auto (each tile’s own video or image proportions). Default 1:1.
Columns on desktop — 2 columns or 3 columns. Default 3 columns.
Columns on mobile — 1 column or 2 columns. Default 2 columns.
Scroll style — how the carousel advances: Continuous or One at a time. Default Continuous.
- Scrolling speed (only when Continuous) — how fast it scrolls continuously. Range 10–30s, default 20s.
- Delay (only when Scroll style is One at a time) — seconds each item is shown before advancing. Range 2–10s, default 4s.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Add Media sub-blocks for the actual slides:

Media

Image — the slide’s image.
Video — an optional video, overrides the image when set.
Link — where the slide links to (overrides the product link below, when set).
Product — a product to link the slide to.

Back in stock

A “notify me when back in stock” sign-up form, shown only while the selected variant is sold out. Submissions arrive as a contact email, so no app is needed.

Heading — the form’s heading text.
Success message — shown under the field after a customer signs up, without reloading the page. Leave blank for the default: “Thanks — we’ll email you when this is back in stock.”
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.

Custom Liquid

Adds app snippets or other Liquid code for advanced customisations.

Custom Liquid — the code/snippet. Only use this if you know what the snippet does; invalid Liquid can break the section.
Spacing — set Top and Bottom spacing, used on every screen size. Tick Use different spacing on mobile to set separate Top (mobile) and Bottom (mobile) values for phones. Range 0–5rem, default 0.