Product Page — Default PDP

The standard product detail page, where the shopper picks a variant and adds it to the cart.

Overview

Sections (order)

1. main-product — gallery + form + tabs
2. product-recommendations — related products
3. recently-viewed — recently viewed products
4. collection-return — (may be disabled)
5. testimonials
6. slideshow
7. product-full-width — (may be disabled)
8. apps — (may be disabled)

Main product blocks (default order)

Typical order on the default product template (templates/product.json):

1. Price
2. Countdown timer
3. Separator
4. Variant picker (buttons + colour image cards)
5. Quantity selector
6. Size chart (after quantity)
7. Inventory status
8. Buy buttons
9. Description (collapsible / tabs)
10. Related Products (product metafield custom.related_products)

Other block types (sales points, trust badge, share, tabs, contact, custom HTML, complementary products, etc.) can be added in the Theme Editor.

Step-by-step user journey

Step 1 — Open the product

1. Arrive from a collection, search, the homepage or a direct URL
2. Breadcrumbs lead back to the collection or home

Step 2 — Browse the media gallery

1. View the main image or video
2. Switch media using the thumbnails (beside the gallery on desktop)
3. Enlarge with zoom / lightbox (Photoswipe)
4. On mobile, a full-width swipe gallery

Step 3 — Read the product info

1. Check the title and price
2. Read the short description
3. Scan the sales points (e.g. Organic cotton)

Step 4 — Select variants

1. Select a colour (image card or colour swatch). On mobile, colour image cards are centered.
2. Select size and any other option buttons
3. Dynamic variants: unavailable options are disabled or hidden
4. The price and image may update when the variant changes

Step 5 — Size chart (optional)

1. If the product is not in a Hide size chart collection, a Size chart link appears after quantity (or beside Size when connected to the size option).
2. Click Size chart
3. A white modal opens:
   • Product-specific: image from metafield custom.products_size_chart
   • Otherwise: content from the block’s Size chart page
4. Optional zoom (+/−, pinch, double-tap) then close with X

Size chart is hidden for products in any Theme Editor collection list under Hide size chart collections (e.g. Unstitched).

Step 6 — Quantity and Add to cart

1. Set the quantity (if the quantity selector is on)
2. Press Add to cart
3. The cart drawer opens (in drawer mode)
4. Continue to checkout or carry on shopping

Step 7 — Product details

1. Open Details & Description (collapsible default) or tabs for full description and extra content

Step 8 — Discover more

1. Scroll to Related Products (metafield-driven) and/or Product recommendations
2. Check the Recently viewed products
3. Testimonials and slideshow content (if enabled)

Key settings (Theme Editor)

Full Size chart rules and metafield setup: main-product — Size chart.

Theme Editor settings

Each section below links to its full settings reference — every setting with id, type, default and a screenshot of the panel.

Full index: settings reference

Related files

templates/product.json
sections/main-product.liquid
sections/product-recommendations.liquid
sections/recently-viewed.liquid
snippets/product-images.liquid
snippets/product-form.liquid
snippets/form.product.liquid
snippets/product-template.liquid
snippets/product-size-chart-content.liquid
snippets/variant-button.liquid
snippets/quantity-input.liquid
snippets/tab.liquid
assets/theme.js
assets/theme.css.liquid