The product page
Chapter 6 of the Roast user guide.
The Product section is the gallery on one side and the buy box on the other. Its settings: Show breadcrumbs, Enable image zoom (a zoom button on each image and a full-screen viewer), and three Pre-order settings (below).
The gallery
On desktop every image shows at once: the first full width in a crimped kraft well, the rest in a two-column grid. On phones it's a swipe carousel. The selected variant's image comes first. Video, YouTube and Vimeo, and 3D models (with "View in your space" on supported phones) all work. The freshness stamp sits on the main image (chapter 8).
Buy box blocks
Reorder them freely; the Roast preset uses the order below.
| Block | What it shows | Settings |
|---|---|---|
| Origin line | "Guji, Ethiopia · Washed · Single origin" from the region, origin and process metafields and the product type | Show vendor in origin line |
| Product vendor | The vendor, linked to its products | |
| Title | The product name | |
| Tasting notes | The notes line and the roast line ("●●○○○ Light roast, for pour over and AeroPress") | Show tasting notes, Show roast level, Show brew methods |
| Price | Price, sale price, unit price and the size ("$24.00 / 250 g") | Show tax note |
| Freshness | When it was or will be roasted | Chapter 8 |
| Variant picker | One control per option | See below |
| Inventory | "Only 6 bags left from this lot", using the Low stock word | Low stock threshold (10, 1 to 40), Show "In stock" line |
| Buy buttons | Purchase options, quantity, add button, accelerated checkout | See below |
| Assurance rows | Up to three icon lines under the buttons | Icon and Text for each row. Defaults mention free delivery over $60 and compostable bags: rewrite them. |
| Back-in-stock request | Under a sold-out variant, an email field and "Notify me" | Heading, Text. Each request arrives as an email to your store's sender address; reply by hand when stock is back. Nothing is sent to the shopper automatically. |
| Pickup availability | "Pickup available at …" from your local pickup locations | |
| Description | The product description | Heading (with one it becomes a collapsible row, such as "About this coffee"), Open by default |
| How to brew it | Brew methods, grind and a brew guide link | Chapter 10 |
| Spec table | SKU, type, vendor, weight, barcode, options, and Spec rows of metafields | Heading, Spec row position, the Show toggles. Each Spec row: Label, Product metafield (such as custom.altitude), Value, Unit. |
| Collapsible row and other theme blocks | Anything else, such as "Freshness and delivery" | Chapter 5 |
Variant picker
Each option shows the best control for its values:
- Options with swatches (set on the option values in admin, such as Color) show round swatches.
- The option named like Grind option name (Grind) shows the grind picker: tiles with a particle glyph from fine to coarse, and a "Which grind?" link when a Grind help page is set (chapter 10).
- Options with more than eight values show a dropdown.
- Everything else shows buttons. When the values have different prices, such as 250 g, 500 g and 1 kg, each button shows its price.
Combinations that don't exist or are sold out are marked, but stay selectable so shoppers can see what's there. Products with more than 250 variants work too.
Buy buttons
Besides the subscription settings in chapter 9:
| Setting | Default | What it does |
|---|---|---|
| Show quantity selector | On | The quantity stepper. It respects B2B quantity rules (minimum, maximum, increments). |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay, Google Pay and others the customer's device supports |
| Show Shop Pay Installments | On | When Shop Pay Installments is on for your store |
| Show sticky add-to-cart bar | On | A bar that appears when the add button scrolls out of view (product pages only) |
| Show the free delivery line | Off | Under the buttons, from Free delivery over. Leave it off when an Assurance row already says it. |
| Returns note | Empty | A line under the add button |
Gift cards get Shopify's recipient fields (send to someone else, their name, a message and a send date). B2B customers see volume pricing tables and quantity rules from their catalog.
Pre-orders
Two opt-ins in the Product and Featured product sections, both off:
- Show oversold variants as pre-orders: a tracked variant set to keep selling when out of stock, with 0 or fewer in stock, gets a "Pre-order" button and badge.
- Show single-delivery purchase options as pre-orders: for products sold only through a pre-order app's plan. Leave it off for try-before-you-buy plans.
- Pre-order note: a line under the button, such as "Ships in March".
You can connect each one to a product metafield (true or false for the opt-ins, text for the note) to set them per product. A future custom.roast_date also reads as a pre-order lot in the Freshness block (chapter 8).
Quick view and quick add
From a product card, Quick add adds a product without options straight to the bag. A product with options, a required subscription plan or a gift card opens quick view instead: a side panel with the gallery, options, purchase options and buy buttons.