Product page

On the product page, photography leads and the buy box follows without competing with it. Open the Products template in the theme editor's page selector to set it up: the settings apply to every product that uses this template.

Name in the editor

Product (FR: Produit)

Where to add it

Products template only (the template's main section)

Accepted blocks

All theme blocksApp blocks

Default layout

The template ships with two sections: the Product section, followed by Product recommendations. Complementary products are a block at the end of the buy box.

The Product section's buy box contains, in order:

1. Product title, followed by a Rating block that shows only for products rated through a reviews app (see Rating)
2. Price
3. Variant picker
4. Selling plan (visible only for products with a subscription)
5. Buy buttons
6. Pickup availability (visible only if in-store pickup is available)
7. Expandable text that shows the product description over 4 lines, with "Read more"
8. SKU
9. Three collapsible rows: "Composition and care", "Delivery and returns", "From the atelier"
10. Complementary products (visible only for products with complementary products set in Search & Discovery)

Section settings

Gallery

On desktop

All of the product's photos, videos, and media are stacked vertically, without thumbnails or arrows; the buy box stays visible alongside as the shopper scrolls through the gallery. A buy box taller than the screen scrolls with the page so it can be read to its end: it holds by its foot on the way down and by its head, under the header, on the way up.

• Media width sets how much of the page the gallery takes up. The buy box always keeps a minimum width.
• Image fit > Fit inside the frame (default): each photo keeps its own proportions, and nothing is cropped.
• Image fit > Fill the frame: all photos take the chosen Image shape and are cropped around their focal point. Image shape only shows in the editor when Fill the frame is selected.

On tablets

The gallery and the buy box sit side by side, each taking half of the page, so the name, price, and button share the first screen with the photo. The gallery is a carousel that shows one media item at a time and stays in view while the shopper scrolls the buy box. Media width doesn't apply at this size.

On phones

The gallery becomes a swipeable carousel across the full width of the screen. As the shopper scrolls, the buy box slides up over it.

Carousel

On phones and tablets:

• The carousel's frame takes the shape of the product's first photo, so photos of that shape fill it without bands. With Image fit > Fill the frame, it takes the chosen Image shape instead.
• Indicator shows a progress bar along the bottom of the frame, a counter ("2 / 5"), or nothing.
• Show previous and next controls adds a pair of arrow buttons in the bottom corner of the frame. The arrow that has nowhere to go is dimmed at each end.
• With a single media item, there's no carousel.

Zoom

With Show image zoom, clicking a photo opens it full screen, uncropped. Zoom applies to images only.

Videos and 3D models

Videos uploaded to Shopify show with their playback controls, without autoplay; YouTube and Vimeo videos added as product media are embedded directly. In the carousel, a video is paused when the shopper moves to another media item.

3D models added to the product's media show in the gallery with Shopify's 3D viewer: a preview image first, then the model, which shoppers turn by dragging it with the mouse or a finger. They also show in a featured product's gallery.

Variant images

All product photos always stay visible. When the shopper chooses a variant that has its own image, the gallery moves to it: the carousel slides to it on phones and tablets, and the page scrolls to it on desktop. To take advantage of this, assign an image to each variant on the product page in your Shopify admin.

Alt text

Each media item uses its alt text, or the product title if there isn't any. Add alt text in your Shopify admin (on the product page, click the image): it's used by screen readers and helps with SEO. Shopify translates an image's alt text, but not a video's: on a page in another language, the theme marks a video's alt text as written in your store's default language, so screen readers pronounce it correctly.

The buy box

Each block is described in detail in Product blocks. The tax and shipping note, the quantity selector, the dynamic checkout buttons, and the buy bar on phones aren't block settings: turn them on or off for the whole store in Theme settings > Product. The key points:

Choosing variants

Each product option is displayed based on its content:

1. an option whose values have swatches (color or image) in Shopify is shown as swatches. See Color swatches;
2. otherwise, if the option's variants have different images, it's shown as thumbnails of those images;
3. otherwise, it follows the Option style setting: text, boxes, or dropdown.

The name of the selected value appears next to the option name, and the name of the hovered value appears there as a preview. Sold out combinations stay visible, faded and crossed out, labeled "Sold out"; combinations that don't exist are labeled "Unavailable".

When the variant changes, the price, availability, buttons, SKU, and in-store pickup update without reloading the page, and the page address changes (?variant=…) so it can be shared.

A Custom Liquid block in the buy box can follow the variant too: give the outer element of its code a data-variant-region attribute with a name of your own (for example <div data-variant-region="size-note">), and it's redrawn for each variant chosen, so Liquid that reads product.selected_or_first_available_variant shows the new one. This works on the product page only, not in a featured product.

Sold-out products

When the selected variant is sold out, the add to cart button, the quantity, and the dynamic checkout buttons are replaced with the message "This selection is sold out." and a Browse the collection button that leads to the page with all products (/collections/all). To show only the message, for example to leave the place to a stock alert app, uncheck Link to the collection when sold out in Theme settings > Product.

Buy bar on phones

On phones, when the Add to cart button scrolls off screen, a bar pinned to the bottom of the screen shows the price and the button. It disappears before the next section, so it never hides anything other than the product. Turn it off with Pin add to cart on phones in Theme settings > Product.

Installment payments

If Shop Pay Installments is turned on in your payment settings, its message ("Pay in 4 installments…") appears automatically in the buy box. No theme setting is needed.

Adding content to the buy box

Click Add block in the Product section to add:

• product blocks (vendor, full description…);
• pieces to buy alongside: Related products you pick yourself, Complementary products from Search & Discovery, one Cross-sell piece, and Gift wrapping added with the product;
• content blocks: collapsible row, drawer (ideal for a "Size guide" or "Delivery and returns"), text, button, rich text, Custom Liquid;
• groups to place blocks side by side (Product column, Product row);
• app blocks (customer reviews, size charts…).

Alternate product templates

For a different page depending on the type of product (gift cards, accessories without sizes…), create an alternate template and assign it to the relevant products.

SEO

The product page automatically publishes the product's structured data (price, availability, images) for search engines. See SEO and sharing.