Product pages

The product page is built from one main section, Product information, which holds the media gallery and a column of blocks: title, price, variant picker, buy buttons and more. Below it, the default template adds Complete the look, Related products and Recently viewed.

This page covers the gallery, the variant picker and color swatches, and the blocks that matter most to a fashion store: size chart, model and fit, pairs well with, delivery and returns, pickup, subscriptions and gift cards.

Where to find it

In the theme editor, use the page selector at the top to open Products > Default product, then select Product information. Changes apply to every product that uses this template. To give some products a different layout, create another product template from the same selector and assign it to those products in your Shopify admin.

Show each color's own images

With Show only selected color's media on, choosing a color shows only that color's images, instead of every image of the product. The theme works out which images belong to which color from the order of the product's media in your Shopify admin:

1. Assign an image to each color variant, as usual.
2. On the product, drag the media into this order: the first color's variant image, then that color's other images; the second color's variant image, then its other images; and so on.
3. Put anything that applies to every color, such as a size diagram or a video, before the first variant image. It is then shown for all colors.

If a product's media are not ordered this way, some images can appear under the wrong color. Either reorder the media or turn the setting off.

Variant picker

The Variant picker block shows one control for each product option. Its Style setting decides how:

• Automatic: buttons for the options you name in theme settings, under Product options > Option names shown as buttons (it starts with Size), and dropdowns for the rest.
• Buttons: every option as a row of buttons.
• Dropdown: every option as a dropdown.

Sold-out and unavailable combinations are marked on the buttons as customers choose. Products with a single variant show no picker.

Color swatches

Masthead shows color swatches using Shopify's own swatches, which are stored on your product options. The theme does not keep a list of color names, so there is nothing to configure in the theme beyond leaving Use swatches for options that have them on. The swatches themselves are set up in your Shopify admin, through the product's category:

1. Open a product and set its Category, for example Apparel & Accessories > Clothing > Dresses. The category unlocks category metafields such as Color.
2. In Variants, add an option and choose Color from the suggested options. This links the option to the Color category metafield.
3. Add your color values. For each one, choose an existing color entry or create a new one, and give it a color, or upload an image for a pattern or print.
4. Save the product. The swatches appear in the variant picker, on product cards and in collection filters.

Color entries are shared across products, so you set up "Navy" once and reuse it. Shopify's guide has the details: Product categories and category metafields.

Size chart

The Size chart block adds a link, labeled "Size guide" by default, next to the picker. It opens your size guide in a drawer, so customers can check measurements without leaving the product.

1. Create a size guide page with the size-guide template, and fill in its charts. Page templates shows how.
2. In the theme editor, select the Size chart block under Product information. Add it with Add block if it is not there.
3. Choose your page in Size chart page, and change the Link label if you like.

What the drawer shows depends on the page you choose:

• A page with one or more Size chart sections: the drawer shows those charts, and nothing else from the page.
• Any other page: the drawer shows the page's own content, so a table you typed into the page in your Shopify admin still works.

The chart is loaded the first time a customer opens the drawer, so it adds nothing to the product page's loading time. The block shows nothing until a page is chosen. To use different charts for different kinds of product, create a second product template, choose another page there, and assign that template to those products.

Pairs well with

The Complementary products block shows up to three products that go with this one, inside the product details, under the heading "Pairs well with". Each is shown small, with its image, name and price. You can choose the products yourself, per product, with a metafield:

1. In your Shopify admin, go to Settings > Metafields and metaobjects > Products, and click Add definition.
2. Name it Pairs well with. Check that the namespace and key read custom.pairs_well_with.
3. Click Select type, choose Product, and change One to List. Then save.
4. Open a product, scroll to its metafields, and choose up to three products in Pairs well with.

On products where the metafield is empty, the block falls back to Shopify's complementary products, which you set up in the Search & Discovery app under product recommendations. To show hand-picked pairings only, turn off Use recommendations when the metafield is empty. With no pairings and no recommendations, the block is hidden.

If you gave the metafield another namespace and key, type them in Product list metafield.

This is different from Complete the look, below: that is a full section under the product, where customers add a whole outfit to the cart in one step.

Delivery and returns

The Delivery and returns block adds two collapsible rows to the product details, each with a small icon: one for delivery and one for returns. Customers see the headings and open the row they want to read.

1. In the theme editor, open a product page, select Product information and click Add block, then Delivery and returns.
2. Under Delivery, write a line or two in Text, such as how long orders take.
3. Do the same under Returns.

To reuse a longer policy you have already written, choose a page in Page. The page's content is shown after your text, so you only keep the policy up to date in one place. A row with no heading, or with neither text nor a page, is left out.

Model and fit

The Model and fit block tells customers how a piece fits: the model's height, the size they are wearing, a five-step fit scale from runs small to runs large, and a fit note.

Typed in directly, the four fields would say the same thing on every product. To make them different per product, connect each field to a product metafield:

1. In Settings > Metafields and metaobjects > Products, add a definition for each field you want, for example Model height, Size worn, Fit and Fit note, of the type Single line text.
2. Fill them in on your products.
3. In the theme editor, select the Model and fit block. Beside each field, click the Connect dynamic source icon and choose the matching metafield.

For Fit, enter a number from 1 to 5, or one of: Runs small, Slightly small, True to size, Slightly large, Runs large. Empty fields are left out, and the whole block hides on products where every field is empty.

Complete the look

The default product template includes the Complete the look section, which shows a different outfit on every product, read from a product metafield. In short:

1. In Settings > Metafields and metaobjects > Products, click Add definition and name it Complete the look.
2. Click Select type, choose Product, and change One to List. Then save.
3. On each product, fill in Complete the look with the products that go with it.

The section stays hidden on products with no look. Complete the look has the full walkthrough and every setting.

Pickup availability

The Pickup availability block tells customers whether the selected variant can be collected from your store, and opens a drawer listing every pickup location with its stock. It only shows when local pickup is turned on for at least one location, in your Shopify admin under Settings > Shipping and delivery.

Subscriptions

Masthead supports Shopify selling plans, which is how subscription apps such as Shopify Subscriptions work. When a product has a selling plan, the Buy buttons block shows the purchase options, for example a one-time purchase or a delivery every month, and the price updates to match the choice. The chosen plan is shown on the product in the cart.

There is nothing to turn on in the theme. Install a subscription app, create a plan and add products to it; the options then appear on those products.

Gift cards

Gift card products use the same product page. With Show recipient form for gift cards on in the Buy buttons block, customers can send the gift card to someone else, with the recipient's email, their name, a message and a send date.

The page a recipient opens from their email is covered in Blog, pages and other templates.

On mobile

With Show sticky add to cart bar on, a slim bar with the add to cart button appears at the bottom of the screen on mobile, once the main button has scrolled out of view.

Layout options

Desktop layout sets how the gallery shows a product's media on desktop:

• Two columns: media in a two-column grid, so several images are in view at once. This is the default.
• Stacked: one column of large media, one under another, with the product details staying in view beside them.
• Thumbnails: one image at a time, with a strip of thumbnails to move between them.

On mobile, every layout becomes a gallery customers swipe through, one image at a time. The gallery shows images, videos uploaded to Shopify, YouTube and Vimeo videos and 3D models.

Media ratio crops every image to the same shape, or keeps each image's own shape with Natural. With Open images in full screen on click on, customers can open any image full screen.

Section settings

Select the section in the theme editor to see these settings, in this order.

Blocks

This section is built from 18 kinds of block. Click Add block under the section to add one, and drag blocks to reorder them.

These blocks can be added once each: Vendor, Title, SKU, Price, Variant picker, Quantity selector, Buy buttons, Low stock message, Pickup availability, Description, Size chart, Share, Model and fit, Complementary products, Delivery and returns. The others can be added more than once.

Vendor

The product's vendor.

Title

The product's title, as the page's main heading.

SKU

The selected variant's SKU. Hidden for variants with no SKU.

Price

The price, with the compare-at price and badges when they apply.

Variant picker

Lets customers choose options such as size and color. See Variant picker and Color swatches above.

Quantity selector

Lets customers choose how many to add. It follows the variant's quantity rules, such as a minimum or multiples, and shows volume pricing when the variant has it.

Buy buttons

The add to cart button, the purchase options for products with selling plans, and optionally a dynamic checkout button.

Low stock message

A message when few are left.

Pickup availability

Whether the selected variant can be collected in store. See Pickup availability above.

Description

The product's description from Shopify.

Collapsible row

A collapsible row, for details such as materials and care, or shipping and returns. Type the text in, or show the content of one of your pages so the same text can be reused on every product. Can be added more than once.

Size chart

A link that opens your size chart page in a drawer. See Size chart above.

Share

A button that lets customers share the product's link.

Text

A few lines of your own, such as a delivery promise. Can be added more than once, and connected to a metafield to differ per product.

Model and fit

The model's height, the size worn and a fit scale. See Model and fit above.

Custom Liquid

A place for code, such as a snippet an app asks you to add. Code you add is not covered by theme support; see Custom code.

Complementary products

A short list of products that pair with this one, inside the product details. See Pairs well with above.

Delivery and returns

Two collapsible rows, for delivery and for returns. See Delivery and returns above.

App blocks

Apps that offer app blocks can be added here too. They appear under Apps when you click Add block.

Image sizes

Upload JPG or PNG files. Shopify resizes and compresses each image for the customer's screen, so there is no need to make smaller copies yourself.

Tips

• Keep the first blocks short: title, price, picker and buy buttons should be in view without scrolling on a laptop.
• Put long details in collapsible rows, not in the description.
• Write alt text for every product image in Shopify. It is read aloud by screen readers and used by search engines.
• Apps that offer app blocks, such as reviews, can be added to the product details with Add block.