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 three sections: the Product section, followed by Product recommendations and Complementary products.

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

1. Title
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 sample collapsible rows: "Composition and care", "Delivery and returns", "From the atelier"

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.

• 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 proportions, and nothing is cropped.
• Image fit > Fill the frame: all photos take the chosen Image shape and are cropped around their focal point.

On phones

The gallery becomes a swipeable carousel across the full width of the screen. Indicator shows a progress bar, a counter ("2 / 5"), or nothing, and Show previous and next controls adds arrows. With a single media item, there's no carousel.

Zoom

With Enable 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. On phones, a video is paused when the shopper moves to the next media item.

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 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.

The buy box

Each block is described in detail in Product blocks. 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.

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).

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 the Buy buttons block.

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 (quantity, full description…);
• 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.