logo
Shopify Builds>Surfaces>Product detail page

Product detail page

The product detail page is the template Shopify renders for a single product. It mounts a main product section carrying the media gallery, the variant picker, price and add-to-cart, plus whatever content blocks a merchant places below the buy box. Variant state lives here, so anything that has to change when a shopper picks a different size or shade changes on this page.

How We've Used It

More of our theme work lands here than on any other surface, because the product page is where merchandising intent and platform limits meet. Three jobs recur. Composition: give merchandisers real blocks with settings instead of one hard-coded layout, so a launch is a configuration change. Resolution: read copy and media from metafields with a variant-then-product fallback, so a formula that has its own ingredients shows them and one that doesn't inherits. And re-rendering: fetch the section again on variant change so the server decides what exists, rather than letting client-side code guess. The fourth job is quieter — the buy box is shared DOM, and a section that mounts a review widget, a subscription picker and a video carousel has to know which parts of it are actually ours.

Builds Using It

66 further gated builds use it; their pages follow.

Related Entities

Builds

Alt-text driven variant media gallery with tiered matching and full-screen lightbox

The product gallery that consumes the alt-text match tiers: it builds the main slider, the thumbnail rail and a full-screen lightbox out of server-side verdicts, then re-filters the same nodes in the browser when the shopper changes variant.

LUS Brands

Arched-label icon grid PDP block

A six-slot row of circular badge icons with captions that curve over them — an SVG `textPath` per label, an arc id composed from `block.id` so the block can repeat, and layout driven entirely by custom properties the merchandiser sets.

LUS Brands

'Bundle and save' PDP block driven by a product-list metafield

One product-list metafield, one card per product, and on every card a working add-to-cart form of its own — a merchandiser-curated set sold on the product page where the shopper already is, with a carousel that only appears when there is more than one thing to scroll.

LUS Brands

A second product template whose add-to-bag switches between one cart line and several

`main-product-bundle.liquid` is a fork of the theme's product section in which one Liquid conditional wraps the buy form in either a standard `<product-form>` or a `<bundle-product-form>`, depending on which bundle metafield the product carries.

Nudestix

GA4 ecommerce dataLayer instrumentation across a Rebuy cart

A client-side event layer that hangs off the network rather than off the DOM: a `fetch` wrapper that recognizes a cart add, a diff against the previous cart so the event reports what changed, and item taxonomy read from a block the product page already renders.

Three Ships

Size-pill variant picker and quick add-to-cart inside product grids

One click handler, registered once on `document` in the capture phase, turns any grid card with a size-pill row into a variant selector and an add to cart — including cards that did not exist when the page loaded.

Three Ships

Four selectable How-To step layouts from a single metaobject step list

One list of `how_to_use` step metaobjects renders as a card grid, a slider, a numbered timeline or an image-and-text split, chosen per product, with a desktop and a mobile asset per step and video that plays only while in view.

LUS Brands

A-Z ingredient glossary with scroll-spy letter navigation and product cross-sell

An ingredient encyclopedia authored as theme-editor blocks across 14 section instances on one page template, joined to a sticky letter bar by a single shared attribute, with every entry an accordion that links out to the products it appears in — education page as cross-sell surface.

Three Ships

Deferred LyveCom shoppable-video mounting on the product page

An integration layer that loads LyveCom's widget script once per page and mounts each carousel only when its container is about to enter the viewport — so a paid shoppable-video app stays off the product page's first paint, and a theme-editor reload doesn't mount it twice.

LUS Brands

Dawn media gallery hardened for hidden slides and deferred video

A surgical patch to Dawn's `media-gallery` custom element so that selecting, reordering and announcing media all skip slides the server has hidden for the current variant — and so a variant with no matching thumbnail degrades to a sensible slide instead of an exception.

LUS Brands

Metafield-driven breadcrumbs across product, collection, page, blog and article

One breadcrumb snippet whose ancestor trail is authored per product and per collection through a `custom.breadcrumbs` collection-list metafield, with a three-level fallback for products and natural trails for pages, blogs and articles — rendered as a real navigation landmark from a single argument-free `{% render %}`.

LUS Brands

Mobile sticky add-to-cart bar mirrored from the real product form

A bottom bar portaled to `<body>` that mirrors quantity, button label, disabled and loading state from the product page's own form, forwards taps into it, and follows iOS Safari's visual viewport as the browser chrome collapses.

LUS Brands

Rebuilt 2026 PDP section with merchandiser-composable blocks and per-product ATC color

A custom product section for LUS Brands that declares 26 block types beyond Dawn's set, resolves title and subtitle copy per variant, and paints the add-to-cart button from a product metafield.

LUS Brands

Configurable PDP block system on the Palo Alto theme (Recharge widget placement, size charts, siblings, quick view)

Merchandiser-orderable buy-box blocks on Three Ships' licensed theme, with the subscription app block captured and re-emitted inside the buy box, plus metafield-driven size charts, a product-family switcher and a sticky add-to-cart bar.

Three Ships

"Save With Sets": shade-selectable kit contents on the component product's page

A metafield-linked list of kits renders as an accordion on the product pages of the products inside them, and each kit opens a modal where every component gets its own shade picker before a single add-to-bag.

Nudestix

PDP content accordion that borrows the premium theme's collapsible contract

A product-page accordion block that reuses Palo Alto's own `data-collapsible-*` behavior wiring while supplying its own heading semantics, CSS-variable theming and a responsive table layout for the long-form panels merchandisers author per product.

Three Ships

Product-page FAQ accordion: page-backed answers, mobile 'View More' reveal, auto-emitted FAQPage

A local extension of Palo Alto's Tabs section that hides every FAQ row past the third on mobile behind one reveal button, and emits `FAQPage` JSON-LD from the vendor's own block loop, reading each answer from the same Shopify page or rich-text field the accordion displays.

Three Ships

Variant-aware PDP hero banner driven by a 'heroic' metaobject

An editorial hero below the buy box that resolves its art, headline and copy from a per-variant metaobject, and refetches its own content through the Section Rendering API when the shopper switches variant.

LUS Brands

Metafield-driven PDP content system: auto-built accordions, need-to-know strip and campaign widgets

A layered content resolver on the Nudestix product page: legacy description HTML parsed into accordions at render time, three of them overridden per shade from metafields, with icon strips, badges and campaign widgets assembled from 29 metafield keys around them.

Nudestix

On-model shade carousel bound two ways to the Dawn variant picker

A Flickity carousel of one on-model shot per shade, rendered below the product gallery from a variant metafield; each cell carries the id of its Dawn variant radio, a tap on a face resolves to a click on that radio, a click on a radio moves the carousel — and the carousel itself never touches the product form.

Nudestix

Grouped shade swatch picker with shade-finder dialog and GA4 shade-finder events

Finish became a variant metafield instead of a second product option, which is what lets forty shades group into Matte, Matte Lux and Bloom without touching the SKU matrix — and the shade quiz beside them is bought, wrapped in a native dialog and measured on our side of the boundary.

Nudestix

Market-forked product JSON-LD authored in the product section, with a templated tier for the catalog

Two tiers of structured data at the foot of one Three Ships product section: complete, per-market `@graph` documents for the hero SKUs, branched on `request.host`, and a Liquid-templated Product and Offer block that reads variants, currency and barcode for the rest of the catalog.

Three Ships

Price snippet with a bundle 'value' metafield line and opt-out labelled price links

Dawn's price snippet on Nudestix, extended in two small ways: a product metafield adds a "worth" line beside a kit's price, and the price text becomes a labelled link to the product unless the caller says otherwise.

Nudestix

Side-by-side product comparison drawer and modal table

A compare-products flow with no app behind it: card checkboxes write the selection to localStorage, a drawer pinned to the bottom of the viewport carries it from collection to product page and back, and the modal table fetches each product's long-form copy from that product's own page section at the moment the shopper asks to compare.

Nudestix

Metafield-driven product information tabs with mobile accordion and variant refresh

How To, Ingredients, FAQs and Tips render below the buy box from metafields — as tabs on desktop, as a native accordion on mobile, and re-resolved from the server every time a shopper picks a different variant.

LUS Brands

Color-accurate shade swatches driven by a merchandiser-editable hex registry

Roughly 250 `Shade Name:#hex` pairs live in one theme setting. The product section resolves every option value against them in Liquid, groups the results by finish, and paints each swatch server-side.

Nudestix

DOM and shadow-DOM remediation layer for Yotpo, Rebuy and Recharge widgets

Corrections applied to markup the theme didn't write: `MutationObserver` routines that re-level a review widget's headings, demote headings inside a cart drawer, re-anchor a subscription add-to-cart control, and append a stylesheet inside a subscription widget's shadow root — every one re-entrant, so the fix converges instead of looping.

Three Ships

Inline size picker on cart and PDP upsell cards

Size pills added inside the premium theme's own upsell card, so a multi-variant upsell in the cart drawer, on the cart page or in a product-page "pair with" module can be sized and added where it stands instead of sending the shopper somewhere else.

Three Ships

Variant-aware price snippet with percentage + value savings badge

Dawn's price snippet extended so a caller can hand it any variant object ahead of the snippet's own lookup, and so a savings badge — a percentage computed in Liquid plus a merchandiser-written value sentence — renders whenever the compare-at price is higher than the price.

LUS Brands

Shade swatch rendering and per-variant content payload

The swatches are the visible half. The other half is a hidden input per variant carrying that shade's copy, ingredients, SEO fields and badges — a data contract three separate features read without asking the server anything.

Nudestix

Alt-text convention that maps product media to variants without metafields

Two Liquid snippets turn the alt text merchandisers already type in the Shopify media library into a variant match key and a four-tier match verdict, so a product gallery can filter media per variant at render time.

LUS Brands

Pill variant picker with merchandiser-named size labels

Dawn prints an option value and nothing else. We extended its picker so a size pill carries two lines — a merchandiser's word for that size above the size itself — and falls back to positional defaults when nobody has written one.

LUS Brands

Eight WebMCP tools that make a product page answerable — and buyable — by a browser agent

A feature-detected block in the theme layout registers eight `navigator.modelContext` tools on one trial-kit product page — seven an agent can read from, one that adds a Liquid-fixed variant to the cart.

Three Ships