Product page

The product page is the most considered template in Voyager. Its main section is block-based — every element in the buy column is a draggable, independent block that the merchant can reorder, hide, or duplicate from the Theme Editor. Three sections compose the page: the main product, complementary products, related products.

Template structure

templates/product.json declares three sections:

{
  "sections": {
    "main":          { "type": "main-product" },
    "complementary": { "type": "complementary-products" },
    "related":       { "type": "related-products" }
  },
  "order": ["main", "complementary", "related"]
}

The fifteen blocks

The main-product section accepts fifteen block types. The default template ships with twelve enabled (eyebrow, title, price, variant, selling_plans, buy, pickup, perks, provenance, bespoke, share, and four accordions). The remaining types — quantity_selector, description, custom_liquid, and @app — are available from the Add block menu.

1. Eyebrow (`text`)

A small uppercase label above the title. Useful for collection labels (“Summer 2026 · Edition I”) or category eyebrows.

text

default:"Summer 2026"

The text to render. Falls back to product.type if empty.

2. Title (`title`)

The product title. Optionally appends the selected color in script — so a navy linen shirt reads “Mina Camp-Collar Shirt navy” with the color in the accent font.

show_color_script

checkbox

default:"true"

Render the currently selected color value in the accent font next to the title.

3. Price (`price`)

Price, compare-at price (strike-through), unit price (when applicable), tax note, and the Shop Pay Installments banner.

show_tax_note

checkbox

default:"true"

tax_note

text

default:"Inclusive of VAT"

show_installments

checkbox

default:"true"

Shows the Shop Pay Installments banner when the merchant has it enabled and the price qualifies.

4. Variant picker (`variant_picker`)

Iterates product.options_with_values. Color options render as circular swatches; Size options render as text buttons. Anything else renders as a generic size-style row. A subscription-style size-finder tool can be enabled — it cross-references the customer’s size at other houses (Loro Piana, Brunello Cucinelli, Zegna, Brioni, Kiton, Drake’s, Massimo Dutti, Uniqlo) to suggest a Voyager size.

show_size_finder

checkbox

default:"true"

size_guide_url

url

Optional link to a separate size guide page.

5. Selling plans (`selling_plans`)

Renders subscription / pre-order options when the product has any selling-plan groups. Includes a default “One-time purchase” radio.

label

text

default:"Purchase options"

6. Quantity selector (`quantity_selector`)

A standalone stepper. The buy_buttons block auto-includes its own inline qty stepper when this block isn’t present — so use this only if you want the qty selector visually separated from the add-to-cart button.

label

text

default:"Quantity"

7. Buy buttons (`buy_buttons`)

Add-to-bag button, accelerated checkout (Shop Pay, Apple Pay, Google Pay, PayPal), and an optional wishlist heart. The label dynamically reflects the cart total and respects sold-out state.

atc_label

text

default:"Add to bag"

sold_out_label

text

default:"Sold out"

show_wishlist

checkbox

default:"true"

show_dynamic_checkout

checkbox

default:"true"

Render Shopify’s accelerated-checkout buttons below the add-to-bag.

8. Pickup availability (`pickup_availability`)

Shows in-store pickup status for the customer’s nearest location. Renders only when the variant has store availabilities.

9. Description (`description`)

Short product description from the admin. The full description also renders below the main section if show_long_description is on at section-level.

10. Perks (`perks`)

Three checkmark bullet points — shipping, returns, repair. All three are merchant-editable strings.

perk_1

text

default:"Complimentary worldwide shipping"

perk_2

text

default:"30-day returns, free worldwide"

perk_3

text

default:"Lifetime repair on every garment"

11. Provenance (`provenance`)

A definition list — Cloth, Cut and sewn, Finished — that signals craft. Three term/description pairs.

term_1

text

default:"Cloth"

desc_1

text

default:"linen, 220 gsm"

term_2

text

default:"Cut and sewn"

desc_2

text

default:"The Studio"

term_3

text

default:"Finished"

desc_3

text

default:"by hand at The Studio"

12. Bespoke CTA (`bespoke_cta`)

A made-to-measure call-to-action card. Useful for fashion houses offering bespoke services alongside ready-to-wear.

eyebrow

text

default:"Su Misura · Bespoke"

text

textarea

link_label

text

default:"Begin a fitting"

link_url

url

A native share button plus an optional “Follow on Shop” web component. The Follow on Shop button auto-renders only for customers signed into Shop.

show_follow_on_shop

checkbox

default:"true"

14. Accordion (`accordion`)

Collapsible content panels. Multiple accordion blocks are allowed — the default template ships four: Details, Composition & Care, Shipping & Returns, Payment Methods.

heading

text

default:"Details"

content

richtext

The body content. Rich text editor in the Theme Editor.

metafield_source

text

A metafield key under the custom namespace. When set, product.metafields.custom.{key} takes precedence over content. Useful for per-product values (for example a composition_care metafield).

open_by_default

checkbox

default:"false"

15. Custom Liquid (`custom_liquid`)

A free-form Liquid editor for merchant snippets — useful for an app that ships markup but no app block, or for one-off custom HTML.

custom_liquid

liquid

Plus: `@app` blocks

Any Shopify app that ships product-block extensions appears in the Add block menu. Voyager renders them at the position chosen.

Section-level settings

These live on the main-product section itself, not on any block.

Render the “Back to [Collection]” link and breadcrumb trail above the gallery.

thumbnail_count

range

default:"4"

Number of gallery thumbnails. Min 3, max 6.

show_long_description

checkbox

default:"true"

Render the full product description below the gallery, beneath the buy column.

fallback_description

textarea

Used only when the product has no description.

Gallery and zoom

The left column is a sticky gallery — main image at full size, thumbnail strip on the side, and a cursor-follow zoom that activates on hover (desktop only). The gallery sources from product.media first (covering image, video, 3D model, and external video types) and falls back to product.images for legacy products without rich media. The lead image is requested at 1600px wide; the zoom image at 2400px wide. Both lazy-load by default except for the first image, which loads eagerly to win the LCP race.

Complementary products

The second section on the page. Renders three to twelve recommended products from Shopify’s recommendation engine.

show_section

checkbox

default:"true"

eyebrow

text

default:"Pair with"

heading

text

default:"Wears with this"

limit

range

default:"3"

columns

select

default:"3"

The third section. Same engine, different prompt — “what else lives in this aesthetic,” not “what should you wear with this.”

show_section

checkbox

default:"true"

eyebrow

text

default:"Worn together"

heading_script

text

default:"The Coordinates"

heading

text

default:"Pieces designed to live alongside this one."

limit

range

default:"4"

columns

select

default:"4"

show_view_all

checkbox

default:"true"

view_all_label

text

default:"View all"

view_all_url

url

default:"/collections/all"

Structured data

The PDP emits two JSON-LD blocks: Product (covering name, image, description, brand, SKU, price, availability) and BreadcrumbList (Home › Collection › Product when reached from a collection, otherwise Home › Product). Both are required for rich snippets in Google search results.

What’s next

Main product section

Every block’s exact schema, in reference form.

Customization recipes

Common PDP tweaks — reordering blocks, hiding the size finder, custom accordions.

Getting started

Theme setup

Templates

Sections reference

Interactive features

Customization

Reference

Troubleshooting & support

Template structure

The fifteen blocks

1. Eyebrow (`text`)

2. Title (`title`)

3. Price (`price`)

4. Variant picker (`variant_picker`)

5. Selling plans (`selling_plans`)

6. Quantity selector (`quantity_selector`)

7. Buy buttons (`buy_buttons`)

8. Pickup availability (`pickup_availability`)

9. Description (`description`)

10. Perks (`perks`)

11. Provenance (`provenance`)

12. Bespoke CTA (`bespoke_cta`)

14. Accordion (`accordion`)

15. Custom Liquid (`custom_liquid`)

Plus: `@app` blocks

Section-level settings

Gallery and zoom

Complementary products

Structured data

What’s next

Main product section

Customization recipes

Getting started

Theme setup

Templates

Sections reference

Interactive features

Customization

Reference

Troubleshooting & support

Documentation Index

​Template structure

​The fifteen blocks

​1. Eyebrow (text)

​2. Title (title)

​3. Price (price)

​4. Variant picker (variant_picker)

​5. Selling plans (selling_plans)

​6. Quantity selector (quantity_selector)

​7. Buy buttons (buy_buttons)

​8. Pickup availability (pickup_availability)

​9. Description (description)

​10. Perks (perks)

​11. Provenance (provenance)

​12. Bespoke CTA (bespoke_cta)

​13. Share (share)

​14. Accordion (accordion)

​15. Custom Liquid (custom_liquid)

​Plus: @app blocks

​Section-level settings

​Gallery and zoom

​Complementary products

​Related products

​Structured data

​What’s next

Main product section

Customization recipes

Template structure

The fifteen blocks

1. Eyebrow (`text`)

2. Title (`title`)

3. Price (`price`)

4. Variant picker (`variant_picker`)

5. Selling plans (`selling_plans`)

6. Quantity selector (`quantity_selector`)

7. Buy buttons (`buy_buttons`)

8. Pickup availability (`pickup_availability`)

9. Description (`description`)

10. Perks (`perks`)

11. Provenance (`provenance`)

12. Bespoke CTA (`bespoke_cta`)

13. Share (`share`)

14. Accordion (`accordion`)

15. Custom Liquid (`custom_liquid`)

Plus: `@app` blocks

Section-level settings

Gallery and zoom

Complementary products

Related products

Structured data

What’s next