The product page

The Product section's settings:

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.

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

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.