The product page

The two product templates

To assign one, open the product in Shopify admin and choose it in the Theme template field, then Save. A new product starts on product.

To change a template, open the theme editor, click the page selector at the top, choose Products and pick the template. Changes apply to every product using it. Fixed words on a template, such as the trust row or an accordion, show on every product that uses it, so keep them true of all of them. Words that differ per product, such as directions for use, belong in the product's description or a metafield connected to a Collapsible row (chapter 5).

The Product section

The gallery shows your main photo in a large rounded square on the product's goal colour, with square thumbnails under it (on phones, a swipe carousel with dots and "1 of 5"). It takes images, video, external video and 3D models. Choosing a variant shows that variant's image if it has one. From 990px the buy box beside it stays in view as the page scrolls. Photograph your bottles on a plain or transparent background so the goal colour shows round them.

Product page blocks

The trust row icons are None, Truck, Repeat, Flask (tested), Shield, Leaf (vegan), Check mark, Clock, Gift, Heart, Lock, Pin, Shop and Chat.

Add the general blocks in chapter 5 too, and app blocks, such as a reviews app's star rating.

Buy buttons settings:

The button reads "Add to bag · $34.00", and its price follows the variant, the purchase option (a delivery plan shows its own price, such as "$28.90" at 15% off) and the quantity.

Variants and swatches

• Each option is a row of rounded chips, with the chosen value shown beside the option's name. Name your sizes by count, such as "30 gummies", "60 gummies" and "90 gummies", so shoppers see what they get.
• A value with a swatch (a colour or image set on the option in Shopify admin, such as a flavour colour) leads with a small dot of that colour.
• An option with more than eight values and no swatches is a dropdown.

A combination you don't sell stays selectable, struck through, and the button says it's unavailable. The page updates in place as shoppers choose, and the address follows the variant so it can be shared. Products with more than 250 variants work, and so do Shopify combined listings.

For sizes with a different count, give each variant its own custom.servings (chapter 7): the supply calculator and the serving chip then follow the variant chosen.

Pickup

Pickup availability shows whether the selected variant can be collected, and where. It shows nothing unless you've turned on Pickup in store for a location in Settings › Shipping and delivery.

Pre-orders

Two opt-ins, both off, in the Product and Featured product sections:

• Show oversold variants as pre-orders: for tracked variants that keep selling at zero stock ("Continue selling when out of stock" in Shopify admin), such as a new flavour you're taking orders for.
• Show single-delivery purchase options as pre-orders: for products sold only through a pre-order app. Leave it off for try before you buy.

When a variant qualifies, the button and stock line say pre-order. Product cards show a Pre-order badge by the same rules once you turn on Show "Pre-order" on product cards (Theme settings › Badges, chapter 2). Pre-order note is shown under the button, for example "Ships in March": give a date or a range. To choose per product instead of for the whole template, connect a true or false product metafield to the opt-in, and a product metafield to the note, with the dynamic source button.

Subscriptions

With a subscription app, the buy box shows the product's purchase options as two cards: One-time purchase, and Subscribe and save with its saving ("Save 15%"), its price, the supply calculator and "Deliver every [30 days]". The calculator preselects the plan that matches the daily dose. Chapter 10 has the details.

Back-in-stock request

Under a sold-out variant, shoppers can leave their email. Each request is emailed to your store's sender address (Settings › Notifications), naming the product and variant. Nothing is sent to shoppers automatically: reply when the stock is back. For automatic emails, use a back-in-stock app instead and remove this block.

Gift cards

Gift card products show Shopify's recipient fields, so a shopper can send the card to someone else on a chosen date. Accelerated checkout buttons never show on a gift card.

Quick view

With Show quick view button on, or Show quick add button on a product with options, cards open the product in a panel with its gallery, price, stock line, options and buy buttons, then View full details. The purchase options are there, with the supply calculator folded into one line, "Lasts 30 days · delivery every 30 days", and a See supplement facts link to the facts panel on the product page, with the matching plan already chosen.

Quick view can't read your product templates' block settings. It uses each block's default settings, so Accelerated checkout buttons show there, the stock line uses the default words, and the Product section's pre-order opt-ins don't reach it.

B2B

Shopify B2B is available on the Basic, Grow, Advanced and Shopify Plus plans, not on Starter or Retail, and what you can use depends on your plan. For customers buying for a company location, such as a clinic, a pharmacy or a gym reordering stock, the buy box shows their catalog's quantity rules ("Minimum 12 · Multiples of 6") and volume pricing. Everyone else sees no change.

Quick order list (product pages only) lists every variant of a product in a table with quantity fields. Heading ("Quick order"), Variants per page (25, from 10 to 50 in steps of 5) and Show SKU (on). It adds one-time purchases, and it doesn't show on a product with only one variant or a product that requires a delivery plan.