Product pages

What product pages and product cards show, and how each product gets its own content.

Everything a product page and a product card can show, and how to fill it. Many extras, such as color swatches, highlights, labels and ratings, read product metafields, so you set them up once and fill them for each product. How each product gets its own content explains the idea before you start.

Articles

How each product gets its own contentWhich product page sections fill themselves from each product's metafields and metaobjects, and which show the same content on every product page.
Show color swatches for variantsRound color circles in place of a dropdown or buttons for an option such as Color, and where each circle gets its color.
Fill product sections with each product's detailsProduct metafields connected to the figures in Facts, the rows in Specifications, and the scrolling items in Marquee.
Show product ratings as bars or dotsValues such as body, acidity or heat level, read from product metafields and drawn as bars or dots on the product page and on product cards.
Give each product its own questionsQuestions and answers saved on a product, shown in the FAQ section of that product's page before the questions every product shares.
Give each product its own highlightsHighlight cards saved on a product, with a photo, a title, a short text and a tab name, shown in the Highlights carousel on that product's page.
Show customer quotes on each product pageCustomer quotes saved on a product, with an author and a short title, shown in the Testimonials section on that product's page.
Show ratings from a reviews appWhere the rating from a reviews app can show in Checkmate: the Testimonials section, the app's own widget, and product cards.
Add a label such as Best seller to a productA word or two over the photo on a product card, such as Best seller, that comes from a tag on the product.
Show a short description on product cardsThe line of smaller text under the product name on a card, and the two places its words come from.
Show a score seal on product cardsThe round, scalloped badge on the top right corner of a product card's photo, with a value from the product in the center and a label around its edge.
Let customers add to cart from product cardsThe two round buttons on a product card, one that opens the product in a popup and one that adds it to the cart.
Recommend other products on the product pageThe blocks and sections that suggest other products on a product page, and where Shopify finds the products they show.
Sell subscriptionsThe Purchase options block, where customers choose between a one-time purchase and a subscription plan.
Show local pickup availabilityThe Pickup availability block, which tells customers where they can collect the product they are looking at.
Sell gift cardsWhat customers see on a gift card's product page, and the page that shows a gift card's balance and code.
Use a different layout for some productsA second product template with its own sections and blocks, for a group of products that needs a different page.