Product page layout
The product page is fully block-based — every element (title, price, variants, buy button, description) is a block you can add, remove, or reorder in the theme editor.
Open the product template
Open the theme editor
Change page to a product page
At the top of the editor, click the current page name (usually “Home page”) and switch to Products → Default product (or any specific product).
Click the Product information section
The right column of the product page. This is where all the blocks live.
Available blocks
Under Product information, click Add block. You can add:
| Block | What it renders |
|---|---|
| Title | Product title, with optional vendor line above |
| Price | Compare-at (sale) pricing, per-unit price where set, tax note |
| Variant picker | Colors as swatches, other options as dropdowns; gallery follows selected variant |
| Buy buttons | Add to cart + dynamic “Buy it now” accelerated checkout |
| Key facts | Short bulleted list, best driven by custom.key_facts metafield |
| Specifications | Name / value table driven by custom.specs per product |
| Description | The product description from admin |
| Collapsible row | Expandable sections (“How to use”, “Shipping”), each can pull from a per-product metafield |
| Metafield | Render any product metafield (e.g. Ingredients) |
| Rating | Star rating from your reviews app |
| Pickup availability | Local-pickup status when enabled on a Shopify location |
| Text | An extra paragraph you write in-editor (not from Shopify admin) |
| Icon list | Small icon + text rows (like a mini trust-badges) |
| Complementary products | Related-product picker driven by Shopify’s app block |
| Share | Social share icons |
Reorder blocks
Drag blocks in the left panel to reorder. Common orders:
- Fashion / lifestyle: Title → Price → Variant picker → Buy buttons → Description → Collapsible rows → Icon list
- Supplements / wellness: Title → Rating → Price → Variant picker → Buy buttons → Key facts → Description → Specifications → Collapsible rows
- High-consideration: Title → Price → Variant picker → Buy buttons → Key facts → Description → Specifications → Complementary products
Two-column vs single-column
Click the Product page section (parent of Product information)
Find Layout
- Two-column (default) — gallery left, info right
- Single-column — gallery full-width, info stacked below
Two-column is standard e-commerce; single-column feels editorial and works best for very-visual-heavy products (art, home decor, apparel with lifestyle photography).
Mobile is always single-column. Regardless of your desktop choice, the product page stacks on mobile — gallery on top, info below. This is standard.