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.

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.

checkbox

default:"true"

text

default:"Inclusive of VAT"

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.

checkbox

default:"true"

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.

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.

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.

text

default:"Add to bag"

text

default:"Sold out"

checkbox

default:"true"

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.

text

default:"Complimentary worldwide shipping"

text

default:"30-day returns, free worldwide"

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.

text

default:"Cloth"

text

default:"linen, 220 gsm"

text

default:"Cut and sewn"

text

default:"The Studio"

text

default:"Finished"

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.

text

default:"Su Misura · Bespoke"

textarea

text

default:"Begin a fitting"

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.

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.

text

default:"Details"

richtext

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

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).

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.

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.

range

default:"4"

Number of gallery thumbnails. Min 3, max 6.

checkbox

default:"true"

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

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.

checkbox

default:"true"

text

default:"Pair with"

text

default:"Wears with this"

range

default:"3"

select

default:"3"

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

checkbox

default:"true"

text

default:"Worn together"

text

default:"The Coordinates"

text

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

range

default:"4"

select

default:"4"

checkbox

default:"true"

text

default:"View all"

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

​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