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 a trust row, an accordion or the How it fits notes, show on every product that uses it, so keep them true of all of them.

The Product section

Under How it fits, the band under the product: the size chart, with the shopper's own size marked, and three notes.

The notes show on every product with a size option that uses the template: bras and tees as well as leggings. Rewrite them to fit all of them, or clear a note's title and text to leave it out.

The gallery shows every image at once, in a two-column grid of 4:5 tiles on the studio grey, the way activewear shoppers expect: no thumbnails to click through. Each image is placed by what it is, not where it sits: 4:5 packshots are contained and never cropped; an image of another shape (square, 2:3) after the first fills its tile edge to edge; a close-up with #macro in its alt text fills its tile too; and a landscape image after the first, or one with #scene in its alt text, is the scene tile on the colour block. The first image is contained whatever its shape unless you mark it. A product with one image shows it across the whole gallery. On phones the gallery is a swipe carousel with dots and a "1 of 6" counter. It takes images, video, external video and 3D models, and the product's badge sits on the first image. 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.

Product page blocks

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 · $98", and its price follows the variant, the purchase option and the quantity.

Variants and swatches

• The colour option (the option named in Colour option names, Theme settings › Sets, or any option whose values have swatches) shows as image swatches: a small 4:5 picture of the first variant in that colour, with the colour's name under it. Give each colour's variants their own image so the swatches show the garment; without one, the swatch falls back to the swatch image or colour set on the option, then to a dot.
• The size option (the option named in Size option names, Theme settings › Fit finder) shows as size pills, five to a row (three when a size name is over five characters). Its label row reads "Size: M", then the Your size: M pill once the shopper has saved a size, the Fit finder link when the template has the Fit finder block (chapter 11), and Size guide, which jumps to the How it fits chart. The shopper's size wears a small You tab.
• The inseam option (named in Inseam option names, Theme settings › Fabric and fit) shows as a full-width segmented control under the sizes, each length with its label under it ("25 in" over "7/8 length"). Chapter 9 has the three ways Rep shows an inseam.
• Any other option is a row of pills, and an option with more than eight values is a dropdown.

A combination you don't sell stays selectable, struck through, and the button says it's sold out or 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.

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. Good for a studio store.

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). Useful for a colourway you're restocking.
• 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 and the product page's badge reads Pre-order. 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. Product cards don't show a pre-order badge.

Subscriptions

With a subscription app, such as Shopify's free Shopify Subscriptions, the buy box shows the product's purchase options, each with the price Shopify calculates for that plan, and the add to bag button follows the chosen one. Good for socks, bottles and anything people reorder.

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 quick add on a product that needs a choice, cards open the product in a panel with its gallery, price, a stock line, the options (image swatches, size pills with the You tab, the inseam control), the buy buttons and View full details. The Fabric and fit card and the fit finder dialog stay on the product page, and a product with matching pieces shows "Complete the set on the product page" in place of the set picker.

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 its default threshold, 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 studio or gym reordering its retail stock, the buy box shows their catalog's quantity rules ("Minimum 10 · Multiples of 5") 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 subscription plan.