Product pages

The product template has four sections: Product information (the gallery and the details you buy from), Similar to, Specs and reviews and Reviews. This guide covers each one, and the product data they read.

How the page is laid out

On a computer, the gallery sits on the left with a column of thumbnails, and the details sit on the right. On a phone, the gallery fills the screen and scrolls from photo to photo, with dots to show where you are; the details rise over it as a sheet, and the add-to-cart button stays at the bottom of the screen.

Product information blocks

The details column is built from blocks that you can reorder, hide or remove in the theme editor: Title, Description, Price, Variant picker, Quantity selector, Buy buttons and Text. The section also accepts app blocks, such as reviews or wishlists from apps you've installed.

Badge

A short line above the description, such as “Limited edition”. A product's custom.badge metafield replaces it for that product.

Price block

Shows the sale price next to the compare-at price, the unit price when a variant has one, Shop Pay Installments when your store offers them, and a note on taxes and shipping.

Text block

Rich text for anything else, such as a care line or a delivery note. Add as many as you need.

The gallery: images, video and 3D

The gallery shows every media item on the product, in the order you set in the product's Media section.

• Images open in a full-screen viewer when clicked, or when a keyboard user presses Enter on them. The viewer shows images only.
• Videos you upload, and YouTube or Vimeo links you add as media, show their cover image and a play button. The player loads only when a shopper presses play, so a video that no one plays costs nothing to load. Turn on Loop product videos to repeat them.
• 3D models show a preview and a button to explore the model in the page. On devices that support augmented reality, a View in your space button appears below the gallery.
• Thumbnails show a small play or 3D icon on media that isn't a photo.

Variant images

When a shopper selects a variant that has its own image, the gallery moves to that image. A link to a specific variant (a product URL ending in ?variant= and a variant ID, which filtered collection pages create) opens the page on that variant's image. To give a variant its own image, open the product, click the variant, and choose an image from the product's media.

Focal points

Inkblot supports image focal points everywhere it crops a picture: the gallery, product cards, collection pages and home page sections. When a frame crops an image, the focal point stays in view. To set one, click an image in the theme editor, or in the Media section of a product, and choose the focal point.

Variants, swatches and size cards

• Color options. An option whose name contains “color” or “colour” shows swatches. For exact colors or fabric pictures, set up swatches for the option's values in the product's variant options, which Shopify ties to the product's category. Without them, the theme uses the value's name as a color, so plain names such as Black or Olive show correctly and made-up names show an outlined circle.
• Size options. An option whose name contains “size” shows size cards. Letter sizes are shortened to XS, S, M, L, XL, XXL and XXXL (so “Extra large” reads XL).
• Model heights. Size cards for letter sizes can show the height of the model who wears that size. List heights in Model heights on the size cards, separated by commas, one per size in size order; if there are fewer heights than sizes, the last height repeats. A product's custom.model_heights metafield (a list of single line text) replaces the list for that product. Leave both empty to show the sizes alone.
• Find My Size. On products whose size option has letter sizes, a Find My Size button opens a dialog where the shopper sets their height and weight and gets a suggestion from Small to X-Large, which they can apply with one click. It uses one general chart, not your size guide, so treat it as a starting point.
• Other options show as buttons with the value's name.

Buying: checkout buttons, pickup, gift cards

The Buy buttons block has three settings:

Show dynamic checkout buttons

Shows express checkout buttons, such as Shop Pay, Apple Pay or PayPal, for the payment methods you've turned on in Settings > Payments.

Show pickup availability

Shows whether the selected variant can be picked up in store, and where. It appears only when you offer local pickup, which you set up in Settings > Shipping and delivery.

Show gift card recipient form

On gift card products, lets the shopper send the card to someone else by email, with an optional message and delivery date.

Similar to, Specs and reviews, Reviews

Similar to

A row of alternatives to the product, from Shopify's related product recommendations, which Shopify generates for you and which you can adjust in the Shopify Search & Discovery app. Products shown sets how many, from 2 to 6. Each product shows its review count when it has one.

Specs and reviews

This section has three parts:

• Specifications, from the product description, and a composition and care panel from the product's custom.composition metafield (multi-line text).
• Pinned reviews: add a Pinned review block for each review you want to show beside the specifications. These are the same on every product, so choose general reviews. Verified buyer is off by default; turn it on only for a review from a confirmed purchase. Show the review score pill adds a score above them: the product's own rating from the standard reviews.rating metafield (which review apps write), or the Fallback score out of 5 on products without one.
• Complete the look: pieces that go with the product, with a total and a button that adds them all to the cart. Try another swaps in a new set. By default the pieces come from Shopify's complementary products, which you pair up in the Shopify Search & Discovery app; products with none fall back to related products. To build real outfits instead, set a collection for each of the Outfit slots (layer, bottom, shoes, top and finish), and the section picks one product from each.

Reviews

Shows written reviews in one of two ways:

• From a reviews app. Add the app's block to this section. When an app block is present, the section shows the app instead of its own list.
• From your own product data. Create a metaobject definition for reviews with the fields author (single line text), rating (integer, 1 to 5), body (multi-line text) and date (date). Then add a product metafield custom.reviews that is a list of those reviews, and optionally a custom.rating metafield (rating) for the overall score shown in the heading.

With neither, the section doesn't appear.

Featured product

The Featured product section puts one product, with its gallery and buy buttons, on any page, such as the home page or a landing page. Choose the product in its Product setting. It uses the same blocks as the product page and also accepts app blocks. The Badge and Model heights on the size cards settings, Find My Size and pickup availability belong to the product page only; a product's custom.badge, custom.condition and custom.model_heights metafields still show here.

Product metafields

All of these are optional; the theme works without them. To add one, open a product, and in the Metafields section click Add definition. Enter the namespace and key exactly as shown (for example custom.badge) in Namespace and key, and choose the type.