Product page

The product page puts the facts shoppers compare next to the price: key specifications, what the product is made for and how it ranks in its type. Below it, a full specification table and recommendations.

Product information

The Product information section holds the gallery and everything next to it. Its blocks can be moved and removed in the theme editor.

Block	What it shows
Title	The product title.
Price	The price, the compare-at price and the unit price, when the product has one.
Key specs	Up to three specifications, with links to compare the product and to the specifications table.
Variant picker	The product options. Color options with swatches show as color circles.
Buy buttons	Quantity, add to cart and dynamic checkout buttons, plus the recipient form on gift cards.
Pickup availability	Whether the selected variant can be picked up, and where.
Description	The product description.
Text	A short line of your own.
Collapsible row	A heading that opens to text or to the content of a page, such as your returns policy.
Custom Liquid	Liquid code for advanced changes.

App blocks can be added here too, for example reviews.

Section setting	What it does
Show breadcrumb	The path to the product above the gallery.
Breadcrumb menu	Collections nested in this menu add their parent category to the breadcrumb.
Media fit	Fill the frame, or show the whole image.
Show buy bar on mobile	A bar with the product name, price and add to cart button appears after shoppers scroll past the buy buttons.

Key specs

When you've set up specifications, Key specs shows the first three the product has, the same as its product card.

Until then, the block shows the variant weight and up to three values of your own. Connect each value to a product metafield in the theme editor, so it changes with each product.

Setting	What it does
Show compare and specification table links	A Compare checkbox and a link to the products of the same type, side by side.
Show what the product is made for	The Made for values, each linking to the collection filtered by it.
Show variant weight	Used when specifications aren't set up.

Color swatches

Swatches come from Shopify's color category metafield, which you connect to the product's Color option in your admin.

Open the product and choose a Category that has a Color attribute, for example a jacket or a backpack category.
In Variants, add the Color option and select the color category metafield, or connect an existing Color option to it.
Edit the color entries if needed: each has a name and a color, and can have an image for patterns.

The theme shows swatches on the product page when Show color swatches is on in the Variant picker block, and on product cards when it's on in Theme settings > Product cards.

Media

The gallery shows images, videos you upload, YouTube and Vimeo videos, and 3D models. On phones that support it, 3D models have a View in your space button.

Each variant can have its own image, so choosing a color shows that color.

Pickup, installments and gift cards

Pickup availability shows for locations where you offer local pickup, which you turn on in Settings > Shipping and delivery.
When Shop Pay Installments is on in your payment settings, the installments message shows with the buy buttons.
On gift card products, Show recipient form for gift cards lets shoppers send the gift card by email, with a message and a delivery date.

Below the product information

Section	What it does
How it compares	Ranks each specification among products of the same type. See Turn on product comparison.
Specifications	The full table. The Specs from theme settings block lists every specification the product has; Spec group blocks add rows of your own.
Product recommendations	Related products are picked by Shopify. Complementary products are the ones you set in the Search & Discovery app.

Tip

The product page template has two Product recommendations sections, one for each type, so shoppers see both what goes with the product and what to consider instead.