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, 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 one of your pages in a drawer, so customers can check measurements without leaving the product.

1. In your Shopify admin, go to Online Store > Pages and create a page with your measurements. A table works well.
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.

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.

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 17 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. 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. You choose them per product in Shopify's Search & Discovery app, under product recommendations, as complementary products. The block is hidden on products with none.

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.