main-product, is the PDP — fifteen block types compose its buy column. The others surface products elsewhere: as a featured showcase, a curated grid, the home-page “new arrivals” rail, or as recommendations below the PDP.
Product — sections/main-product.liquid
The PDP. A two-column layout: sticky gallery on the left, block-driven buy column on the right. Below the hero, an optional long description and accordion stack. Renders Shopify rich product media (image, video, 3D model, external video), accelerated checkout, Shop Pay Installments, selling plans, unit pricing, pickup availability, Follow on Shop, app blocks, and custom Liquid.
Available on: Product template (pinned).
Section settings
Layout
checkbox
default:"true"
Show the “Back to ” link and the Home › Collection › Product crumb trail above the gallery.
range
default:"4"
How many gallery thumbnails to render (3–6).
checkbox
default:"true"
Show a slim sticky add-to-cart bar at the bottom of the viewport once the visitor scrolls past the buy column.
text
default:"Add to bag"
Label on the sticky bar’s Add-to-cart button when the variant is available.
text
default:"Sold out"
Label when the selected variant is unavailable.
Details section
checkbox
default:"true"
Show the full product description below the gallery. Useful when the
description block in the buy column shows only a short summary.textarea
Used only when a product has no description in Shopify admin.
Blocks (15 types)
All blocks below render inside the buy column form. The default preset assembles a sensible order — you can reorder, hide, and duplicate as needed.Eyebrow text (limit 1)
text
default:"Summer 2026"
Small uppercase line shown above the product title. Falls back to
product.type if blank.Title (limit 1)
checkbox
default:"true"
Append the currently selected color value in the script flourish font, live-updated by the variant picker.
Price (limit 1)
checkbox
default:"true"
Show a tax / VAT note next to the price.
text
default:"Inclusive of VAT"
Tax note text. Falls back to the
products.product.tax_included translation if blank.checkbox
default:"true"
Show the Shop Pay Installments banner via
form | payment_terms. Renders when the merchant has Shop Pay Installments enabled and the product qualifies.variant.unit_price_measurement) and compare-at price automatically — these are not configurable via settings.
Variant picker (limit 1)
checkbox
default:"true"
Show the in-line “size finder” helper that recommends a size based on the customer’s size in other houses. The brand list is fully merchant-editable from Theme settings → Size finder → Brand matrix — leave the matrix blank to hide the helper entirely.
text
Body copy above the brand selector inside the size finder panel.
url
Optional link to a full size guide page.
Subscription plans (limit 1) — selling_plans
text
default:"Purchase options"
Section label for the selling-plans group. Falls back to the
products.product.purchase_options translation.Quantity selector (limit 1)
text
default:"Quantity"
Label shown above the stepper.
quantity_selector block is present, an inline stepper is rendered inside the buy buttons row so the form always submits a quantity.
Buy buttons (limit 1)
text
default:"Add to bag"
Add-to-cart button label.
text
default:"Sold out"
Label when the selected variant is unavailable.
checkbox
default:"true"
Show the heart-icon wishlist button next to the ATC button.
checkbox
default:"true"
Render accelerated checkout buttons (Shop Pay, Apple Pay, Google Pay, PayPal) via
form | payment_button.Pickup availability (limit 1)
No settings. Renderscurrent_variant.store_availabilities when at least one location is configured. Shows a green dot for “Available” and a muted state for “Not available.”
Buy column description (limit 1) — description
No settings. Renders product.description as-is inside the buy column. Pair with show_long_description: false if you want the description to appear here and not below.
Perks list (limit 1) — perks
A bulleted list of 3 perks (shipping, returns, repair).
text
default:"Complimentary worldwide shipping"
First perk.
text
default:"30-day returns, free worldwide"
Second perk.
text
default:"Lifetime repair on every garment"
Third perk.
Provenance list (limit 1) — provenance
A definition list of three term/description pairs (cloth, cut, finish).
text
default:"Cloth"
First term.
text
default:"linen, 220 gsm"
First description.
text
default:"Cut and sewn"
Second term.
text
default:"The Studio"
Second description.
text
default:"Finished"
Third term.
text
default:"by hand at The Studio"
Third description.
Made-to-measure CTA (limit 1) — bespoke_cta
A small call-out card with eyebrow + body + ghost-style link button.
text
default:"Su Misura · Bespoke"
Eyebrow above the body line.
textarea
Body copy.
text
default:"Begin a fitting"
CTA label.
url
CTA destination — typically a bespoke / made-to-measure page.
Share (limit 1)
Label on the share button.
checkbox
default:"true"
Render Shopify’s
shop-follow-button web component, which appears only when the shopper has the Shop app installed and is signed in.Accordion section (no limit) — accordion
Multiple accordion blocks can be added. Each renders as a <details> element in the section below the gallery.
text
default:"Section"
Summary text shown when the accordion is collapsed.
richtext
Body content.
text
Metafield key under
custom.*. If filled, the value of product.metafields.custom.{key} takes precedence over the content field. Lets you write per-product details once in admin and reuse across the storefront.checkbox
default:"false"
Render the accordion open on first paint.
Ingredients (no limit) — ingredients
Metafield-driven accordion item dedicated to ingredient lists (skincare INCI lists, food ingredients, etc.). Reads product.metafields.custom.ingredients per product; falls back to the manual content below if the metafield is empty.
text
default:"Ingredients"
Accordion heading text.
richtext
Rich-text shown when the product has no
custom.ingredients metafield set.text
default:"ingredients"
Which metafield to read (under
custom.*). Change if you use a different namespace key.checkbox
default:"false"
Render the panel open on first paint.
How to use (no limit) — usage
Sibling block to Ingredients for application / usage / preparation instructions. Reads product.metafields.custom.usage per product; falls back to the manual content below.
text
default:"How to use"
Accordion heading text.
richtext
Rich-text shown when the product has no
custom.usage metafield set.text
default:"usage"
Which metafield to read (under
custom.*).checkbox
default:"false"
Render the panel open on first paint.
Custom liquid (no limit)
liquid
Arbitrary Liquid / HTML / CSS / JS rendered as-is. Useful for app snippets that don’t have a dedicated app block.
App blocks — @app
The @app block type lets merchants add any Shopify app block that targets the product page. Each block renders in the order it’s placed in the buy column. See Custom & advanced for the full pattern.
Default preset (block order)
- Eyebrow text
- Title
- Price
- Variant picker
- Buy buttons
- Pickup availability
- Perks list
- Provenance list
- Made-to-measure CTA
- Accordion · Details (
metafield_source: details) - Accordion · Composition & Care (
metafield_source: composition_care) - Accordion · Shipping & Returns
- Accordion · Payment Methods
Structured data
The section emits two JSON-LD blocks:Product (with name, image, description, brand, SKU, offer / price / availability) and BreadcrumbList (three levels if the visitor arrived through a collection, two levels otherwise).
When to use
There’s one product section per theme — this is it. Configure block order to match your priorities: subscription brands should pinselling_plans above buy_buttons; brands with rich storytelling should add description to the buy column and disable show_long_description. For apps that target the PDP, use the @app block. For one-off code, use the custom_liquid block.
Featured product — sections/featured-product.liquid
Single-product showcase: image on one side, buy column on the other. Block-based — uses the same content vocabulary as the PDP (eyebrow, title, price, variant picker, description, buy buttons, share, custom Liquid, app blocks) but in a flatter form.
Available on: All templates.
Section settings
product
The product to feature. If blank, falls back to the first product in
collections.all.select
default:"left"
Image position on desktop. Options:
left, right. Mobile always stacks image-then-text.Blocks
Eyebrow text (limit 1) — text
text
default:"Featured piece"
Small uppercase line above the title.
Title (limit 1)
No settings. Rendersproduct.title.
Price (limit 1)
No settings. Renders price + optional compare-at price, live-updated by the variant picker.Variant picker (limit 1)
No settings. Renders one row per option with chip-style values.Description (limit 1)
range
default:"50"
Truncate the description at this many words. Range 10–200, step 10.
checkbox
default:"true"
Append a “Read more” link to the full product page.
Buy buttons (limit 1)
text
default:"Add to bag"
ATC label.
text
default:"Sold out"
Sold-out label.
checkbox
default:"true"
Render Shop Pay / Apple Pay / Google Pay / PayPal buttons.
View product link (limit 1) — share
text
default:"See full details"
Link to the product detail page.
Custom liquid (no limit)
liquid
Arbitrary Liquid.
App blocks — @app
Same @app pattern as main-product.
Default preset (block order)
Eyebrow → title → price → variant picker → description → buy buttons → share.When to use
Featured product is for moments where one product needs to lead — a hero product on the home page, a “look of the week” callout on a content page, or a product spotlight inside a press article. For grids of multiple products, use Featured collection.Featured collection — sections/featured-collection.liquid
Heading + product grid drawn from one merchant-chosen collection. Reuses the global product-card snippet for visual consistency with the PLP.
Available on: All templates.
Section settings
Heading
text
default:"Now in store"
Small uppercase line above the heading.
text
Optional script word that precedes the heading.
text
default:"Featured collection"
Serif heading.
Content
collection
The source collection.
range
default:"8"
How many products to display. Range 4–24.
select
default:"4"
Grid columns. Options:
2, 3, 4, 5.View all
checkbox
default:"true"
Render a “View all” link in the header that goes to the collection page.
text
default:"View all"
View-all link label.
Blocks
None — the section has no block types. Products come from the chosen collection.When to use
Featured collection is the workhorse for any “shop the look” / “best of the season” / “shop this story” treatment that needs to render real products. Pick a collection, set a count, done. For a heading-led home rail with a script-font treatment, use Home · New arrivals.Home · New arrivals — sections/home-new-arrivals.liquid
Script-headed product grid drawn from a chosen collection. Renders 4–16 products with reveal animations and a “View all” magnetic CTA. Visually distinct from featured-collection — a single, very large script heading on the cream surface background.
Available on: All templates. Designed for the home page.
Section settings
text
default:"New Arrivals"
The script-font heading. Rendered as a single phrase in the calligraphic accent font.
range
default:"100"
Scales the heading from 60% to 140%.
collection
Source collection. Falls back to
collections.all if not set or empty.range
default:"4"
Products to show. Range 4–16, step 4. (Default in the home preset is 4; the slider exposes higher values.)
Blocks
None.When to use
Use new arrivals as a home-page rail when you want the heading itself to do the work — a single calligraphic phrase (“New Arrivals”, “The Edit”, “Just In”) above a grid of 4–8 products. For a more traditional eyebrow + heading + grid pattern, use Featured collection.Related products — sections/related-products.liquid
ML-driven product recommendations on the PDP, sourced from Shopify’s /recommendations/products.json?intent=related API. Lazy-loaded — the section ships with empty markup and theme.js fetches recommendations after first paint. Falls back to product.collections.first if no recommendations are returned.
Available on: Product template (enabled_on pinned).
Section settings
checkbox
default:"true"
Master toggle.
range
default:"100"
Scales the heading 60–140%.
text
default:"Worn together"
Eyebrow line.
text
default:"The Coordinates"
Optional script heading shown above the main heading.
text
default:"Pieces designed to live alongside this one."
Main heading.
range
default:"4"
Number of products. Range 2–10.
select
default:"4"
Grid columns. Options:
2, 3, 4.checkbox
default:"true"
Render a “View all” link in the header.
text
default:"View all"
Link label.
url
Link destination. Falls back to
/collections/all.Blocks
None.When to use
Related products is the default cross-sell band below the PDP. It’s powered by Shopify’s recommendation engine, so you don’t pick the products — Shopify does, based on customer behavior. For curated cross-sells, use Featured collection on the product template. For Search & Discovery-driven “pair with” suggestions, use Complementary products.Complementary products — sections/complementary-products.liquid
“Pair with” recommendations on the PDP, sourced from Shopify’s /recommendations/products.json?intent=complementary API. Requires the Search & Discovery app installed and complementary product rules defined in admin. The section renders empty (no heading, no markup) when no rules return matches.
Available on: Product template (enabled_on pinned).
Section settings
checkbox
default:"true"
Master toggle. Requires Search & Discovery + rules.
range
default:"100"
Scales the heading 60–140%.
text
default:"Pair with"
Eyebrow line.
text
default:"Wears with this"
Main heading.
range
default:"3"
Number of products. Range 2–6.
select
default:"3"
Grid columns. Options:
2, 3, 4.Blocks
None.When to use
Complementary is the merchant-curated counterpart to related. Use it for explicit pairing rules — “buy this shirt, pair with these trousers.” It requires more setup (rules in Search & Discovery), but the results are deterministic. Pair it with Related products on the PDP: complementary above for “pair with,” related below for “you may also like.”Cross-reference
Templates · Product page
See how
main-product, related-products, and complementary-products are wired in the product template.Commerce sections
Cart, collection (PLP), and bundle — the rest of the commerce surface.
Custom & advanced
Custom Liquid block + the
@app block type used inside main-product and featured-product.