The product page

The Product section's settings:

The gallery is a scalloped frame. The selected image stands square in the piped frame, with a row of small cookie-round thumbnails under it, the current one ringed. On computers the gallery stays in view while the buy box scrolls. It handles images, video, YouTube and Vimeo, and 3D models, and controls sit inside the frame so nothing is clipped. When a variant has its own image, choosing it brings that image first. Square photos suit it best.

The Allergens and dietary panel sits under the gallery on every product, on phones after the buy box. You'll find it in the editor's block list under the Product section. It can't be removed, because silence about allergens reads as "contains none" (chapter 11).

Buy box blocks

The buy box is built from blocks you can reorder, remove or add again. The presets' order is Title, Price, Lead time note, Dietary chips, Variant picker, Cake builder, Buy buttons, Back-in-stock request, Pickup availability, Description and Spec table.

A Spec row block (added inside the Spec table) shows one more row. Label (its sample text is "Shelf life": type your own, such as Serves or Weight), Product metafield (its namespace and key, such as custom.box_contents, from Settings › Custom data › 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 g 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 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 variant picker

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

• Option cards: an option whose variants have a custom.servings metafield, as a row of cards with the value, the servings and, where prices differ, the price. Made for sizes. The selected card is ringed in the accent colour.
• 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 and are struck through, so shoppers can still see the price; screen readers hear that the value is sold out. Choosing a value updates the price, stock, images, servings 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 is a glossy pill with the price in it, which follows the chosen options. With Theme settings › Commerce › Free delivery over above 0, "Free delivery over $80." shows under it. Gift card products show recipient fields (name, email, message and send date), so a gift card can be sent to someone else.

Pickup availability and order ahead are two different things

Sprinkle has two things with "pickup" in the name, and they don't talk to each other:

The block shows nothing until a location offers pickup. If you bake to order, its "Usually ready in 24 hours" can contradict a lead time of three days. So many bakers remove the Pickup availability block and let the Lead time note speak, and a shop with several collection points keeps it. Chapter 8 explains how to set up Shopify's pickup and delivery to match.

Pre-orders

For a seasonal bake you're taking orders for ahead of time, such as hot cross buns or Christmas cakes. There are two switches, and they do different things.

The pre-order tag affects cards and seals only. Add the product tag pre-order (preorder works too, and capitals don't matter). The product's card then shows a Pre-order seal, its button reads Pre-order, and the product page shows the Pre-order pill after the price. If the product has a custom.back_note ("Baking from 14 Nov"), that line takes the place of the lead line on the card (chapter 7). The tag is how cards know: a card can't see the Product section's settings.

That's all it does. The product page's add button still reads Add to bag, and nothing is added to the bag line or the order. To change the button and mark the order, use the section's settings as well.

The Product section's settings. These label a variant as a pre-order from real data, and both are off by default. 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 · $48.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.

Quick view doesn't read these settings, so a pre-order opened there behaves like any other product.

Order ahead keeps working for a pre-order. If a seasonal bake can only be collected from a certain date, set custom.lead_days high enough to reach it, or close the dates before it in Closed days and dates (chapter 8).

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. Sprinkle adds nothing to them. A plan's delivery schedule is set by your app. The bag's date is saved on the order the shopper places, so check with your app what its later orders carry.

B2B and wholesale

For customers buying for a company location (a café restocking cookies by the tray), 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.