Product Page
The product template displays individual product details including media gallery, variant selection, pricing, and add-to-cart functionality.
Default Layout
The product page includes:
- Product details — Full-bleed media gallery with product information overlay
- Fit Check carousel — Optional lookbook-style gallery at the bottom
Product Details Section
Media Gallery
The media gallery displays product images, videos, and 3D models. It supports:
- Multiple images with thumbnail navigation
- Shopify-hosted videos
- 3D model viewer
- Thumbnail navigation controls
- Variant-aware media updates
- Desktop full-screen or custom-height presentation
Variant Picker
Customers can select product options using:
- Color swatches — Visual color/pattern selectors
- Size buttons — Clickable size options
- Dropdown menus — For options with many values
Unavailable variants display a sold-out indicator based on the global Swatches > Sold out indicator setting (Dimmed & strikethrough or X slash).
Variant controls are rendered as one coordinated picker per product form, so selected option state, price, pickup availability, selling plans, and product media update together.
Overlay Layout
The Product details section supports a media-first overlay layout on desktop.
| Setting | Description |
|---|---|
| Section height | Full-screen or custom height. |
| Account for header | Subtracts header height when calculating the section height. |
| Overlay direction | Stack overlay containers vertically or place them side by side. |
| Overlay position | Place overlay content left, center, right, top, center, bottom, or spaced between. |
| Overlay blur | Adds backdrop blur behind overlay container blocks. |
| Uniform overlay size | Forces overlay containers to use the same width and optional fixed height. |
| Overlay offsets | Controls distance from top or bottom edges on desktop. |
Selling Plan Picker
If your products have subscription plans (via a subscriptions app), a radio-based plan picker appears with:
- One-time purchase option (always first, selected by default)
- Subscription plan options with per-delivery pricing
- Discount badges showing percentage savings
- Variant-aware pricing that updates when the customer switches variants
Buy Buttons
| Block | Description |
|---|---|
| Add to cart | Standard add-to-cart button. |
| Accelerated checkout | Shop Pay, Apple Pay, Google Pay buttons. |
| Buy it now | Goes directly to checkout, skipping the cart. |
When the global cart type is set to Drawer, add-to-cart can automatically open the cart drawer after a successful add.
Additional Blocks
| Block | Description |
|---|---|
| Price | Product price with sale, compare-at, and unit pricing. |
| Quantity selector | Adjust quantity before adding to cart. |
| Sizing fit indicator | Optional fit meter driven by the product’s custom.sizing_fit_score metafield. |
| Size guide table | Measurement table with inches and centimeters toggle. |
| Product description | Full product description text. |
| SKU | Display the product SKU. |
| Inventory status | Show stock levels or availability. |
| Pickup availability | Local pickup information. |
| Share buttons | Social sharing links. |
Size Guides
The default product template includes a Size guide drawer with a sizing-fit indicator and a size-guide table. Customize the table in the theme editor to match the measurements your products need.
For different garment categories or sizing systems, create separate product templates, such as Jeans, Shirts, or Shoes. Customize the Size guide table on each template, then assign the matching template to products from the product’s Theme template setting in Shopify admin.
Quick Add
Product cards and recommendation carousels can expose quick-add controls when their product-card media blocks enable quick add. Products with multiple options open the quick-add modal so customers can choose variants before adding to cart.
Structured Data
The product page automatically outputs Product JSON-LD structured data for search engines, including price, availability, and review information.