# The product page

Chapter 6 of the Peel user guide.

The **Product** section's settings:

| Setting | Default | What it does |
| --- | --- | --- |
| Show breadcrumbs | On | The trail above the product. Off, a small "Back to the collection" link shows instead. |
| Enable image zoom | On | Adds a zoom button to each image and opens images full screen |
| Show oversold variants as pre-orders | Off | Under **Pre-orders**, below |
| Show single-delivery purchase options as pre-orders | Off | Below |
| Pre-order note | Empty | Below |

**The gallery is a sticker.** The selected image stands as a big die-cut with a peeled corner and a slight tilt, with a row of small thumbnail stickers under it. It handles images, video, YouTube and Vimeo, and 3D models (those lose the peeled corner, so nothing covers their controls). When a variant has its own image, choosing it brings that image first. Square images suit it best. Image slides carry the finish sheen when the product has a finish option (chapter 8).

**Under the gallery and buy box**, two blocks run the page's full width: **See it on** (chapter 9) and the **Spec table** (below). You'll find them in the editor's block list under the Product section. They're fixed in place, so you can't delete or move them, but each takes no space when it has nothing to show.

## Buy box blocks

The buy box is built from blocks you can reorder, remove or add again. The presets' order is Title, Rating, Price, Variant picker, Buy buttons, three Trust rows, Back-in-stock request, Description and Pickup availability.

| Block | What it shows | Settings |
| --- | --- | --- |
| **Product metadata** | The line above the title: the product type and the selected variant's SKU | **Show vendor in metadata** (off) |
| **Title** | The product title in the heading font | None |
| **Rating** | Stars and "4.9 from 312 reviews". It needs a reviews app that fills the product's `reviews.rating` and `reviews.rating_count` metafields, and hides when a product has none. In the theme editor it shows a sample. | None |
| **Product vendor** | The vendor, linked to its products | None |
| **Price** | The selected variant's price and compare-at price, a badge as a pill, and the tax note with a link to your shipping policy | **Show tax note** (on; the presets turn it off) |
| **Inventory** | The selected variant's stock ("Low stock: 3 left", "In stock", "Pre-order" or "Sold out"). Counts show only for variants whose inventory Shopify tracks and that stop selling at zero. Not in the presets; add it if you want a stock line. | **Show "Only 3 left" at or under** (10, 1 to 40). This is the block's own number, separate from the card badge's in Theme settings › Product cards. |
| **Variant picker** | Each option, below. Hidden on a product with the Mix pack tag. | None |
| **Description** | The product description | None |
| **Buy buttons** | The add button with the price in it ("Add to bag · $5.00"), quantity, subscriptions, accelerated checkout, Shopify's instalments message, the gift nudge and the sticky bar. On a product with the Mix pack tag none of this shows (chapter 10). | Below |
| **Back-in-stock request** | Under a sold-out variant: an email field and a **Notify me** button | **Heading** ("Notify me when available") and **Text** ("Leave your email and we'll write to you when it's back in stock.") |
| **Pickup availability** | Whether the variant can be picked up from your Shopify locations ("Pickup available at Brunswick"). It shows nothing until a location offers pickup. | None |
| **Trust row** | An icon and a short sentence. Three at most reads best. With no text, it shows nothing. | **Icon** (None, Water drop, Sun, Truck, Return, Shield, Clock, Store, Gift, Star, Heart or Check mark) and **Text** ("Waterproof and dishwasher safe") |
| **Spec table** | A table of the product's details, plus any **Spec row** blocks you add | **Heading** ("Specifications"), **Spec row position** (**Above product details**, the default, or **Below product details**), **Show SKU** (on), **Show product type** (on), **Show vendor in spec table** (on), **Show weight** (on), **Show barcode** (off) and **Show variant options** (on). The presets turn all of these off and use Spec rows only. |
| **See it on** | The sticker on your scenes | Chapter 9 |

A **Spec row** block (added inside the Spec table) shows one more row. **Label** (its sample text is "Battery life": type your own, such as Thickness), **Product metafield** (its namespace and key, such as `custom.thickness`, from Settings › Metafields and metaobjects › Products; lists of text, yes/no values, measurements and dates are formatted for the shopper's language), **Value** (used when the metafield is empty; a typed value shows on every product that uses this template, and a dynamic source shows each product's own value, though lists and dates print unformatted) and **Unit** (shown after the value, such as mm or cm; leave it empty for weight, volume and dimension metafields, which include their unit). Rows with no value are hidden. In the theme editor, a row that can't show says why.

The presets' four Spec rows and three Trust rows are typed values, so they show on every product: rewrite them (chapter 1).

The theme blocks from chapter 5 (such as a **Collapsible row**) and app blocks can go between them. Blocks with nothing to show for a product take no space.

**Back-in-stock requests** are sent to you, not to the shopper: each request reaches your store's sender address as a contact message naming the product and variant. Nothing is sent to the shopper automatically, and nothing subscribes them to marketing. Reply when the stock is back, or use a back-in-stock app instead. The block works in the Product section only.

## The variant picker

Each option shows as the selector that suits it, with the option's name and the chosen value in its label:

* **Finish swatches**: an option named in **Finish option names**, such as Finish (chapter 8).
* **Size chips**: an option named in **Size option names**, such as Size, drawn to scale (chapter 8).
* **Swatches**: an option whose values carry Shopify swatches (a colour or an image), as round swatches.
* **A select menu**: an option with more than eight values and no swatches.
* **Pills**: every other option, as a row of round-ended pills; the chosen one is filled.

Sold-out values stay selectable, so shoppers can still see the price; screen readers hear that the value is unavailable. Choosing a value updates the price, stock, images and buy buttons without a reload, and arrow keys move between values. Combined listings (Shopify Plus) work too: a value that belongs to another product loads that product in place.

## Buy buttons

| Setting | Default | What it does |
| --- | --- | --- |
| Show subscription options | On | Appears when the product has subscription plans, such as a monthly sticker club |
| Show quantity selector | On | A stepper beside the add button |
| Show accelerated checkout buttons | On | Shop Pay, Apple Pay and so on: customers see the payment methods available on their device. These skip the bag, so a shopper who uses them gets no free gift (chapter 11). |
| Show Shop Pay Installments | On | Shopify's own instalments message. It appears only when Shop Pay Installments is enabled on your store. |
| Show sticky add-to-cart bar | On | Product pages only: a bar with the photo, title, price and add button appears when the add-to-cart button scrolls out of view |
| Returns note | Empty | Shown under the add-to-cart button. Leave empty to hide. |

The add button carries the price, which follows the chosen options. Under it, with the free gift bar on, a nudge says how close this product takes the shopper to the next reward: "Add this and you're **$14.50 away** from a free sticker." (chapter 11). Gift card products show recipient fields (name, email, message and send date), so a gift card can be sent to someone else.

## Pre-orders

For a run you're taking orders for ahead of time. There are two settings on the Product section. Both are off by default, and both read real data. Connect a true or false product metafield to either to choose per product:

* **Show oversold variants as pre-orders**: for tracked variants that keep selling at zero stock (**Continue selling when out of stock**) with 0 or fewer in stock.
* **Show single-delivery purchase options as pre-orders**: for products sold only through a pre-order app's purchase options. Leave it off for try before you buy.

A variant that qualifies shows **Pre-order** in the stock line and on its add button ("Pre-order · $5.00"), a Pre-order pill after the price, and its bag line and order carry a "Pre-order" property. **Pre-order note** adds a line under the button, such as "Ships in March" (give a date or a range), and becomes the property's value; connect a product metafield to set it per product. Without a note the property reads "Pre-order: Yes". The Featured product section has the same three settings.

Cards and quick view don't read these settings, so a pre-order shows on them like any other product.

## Subscriptions

Plans come from a subscriptions app, such as Shopify's free Subscriptions app. When a product has plans, the buy box lists them as radio options with the price Shopify calculates for each, and the cart line shows the plan's name. Peel adds nothing to them. A plan's delivery schedule is set by your app.

## B2B and wholesale

For customers buying for a company location (a gift shop restocking stickers by the dozen), the buy box shows their catalog's quantity rules ("Minimum 12", "Multiples of 6", "Maximum 48") and volume pricing (the price per unit at each quantity), and the quantity field follows the rules. Customers without B2B see none of it. Add the **Quick order list** section to a product template for a table of every variant with quantity fields.

> **Note:** Text you type into a block on the product template (a Trust row, a collapsible row, a Spec row's **Value**) shows on **every product that uses this template**. Use it for what's true of every product, or on a template you make for a group of products (in the theme editor, **Create template** from the product template and assign it to those products in admin, for example one for stickers and one for pins). For anything that differs per product, use a metafield.