> For the complete documentation index, see [llms.txt](https://docs.strm.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.strm.design/products/product-page.md).

# Product page

Set up the product page — the media gallery, the full-screen lightbox and every product block, from price to pickup.

The product page is built from one main section, **Product information**, plus any sections you add below it (recommendations, recently viewed, reviews and so on). The left column holds the media gallery; the right column is a stack of **blocks** you can add, remove and reorder.

![Product page on a computer](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-26ca074f508c752b3b853f6037897cc0ad3ba5b1%2Fproduct-desktop.png?alt=media)

![Product page on a phone](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-97be05faa47075886eaa06935f03f91e33cf0ec2%2Fproduct-mobile.png?alt=media)

## Open the product page in the theme editor

1. In Shopify admin, go to **Online Store › Themes** and click **Customize** on Stratum.
2. In the page picker at the top of the editor, choose **Products › Default product**.
3. In the left sidebar, click **Product information**. The section settings open; its blocks are listed underneath it.

{% hint style="info" %}
Changes here apply to every product that uses the default product template. To give some products a different layout, create a new template from the page picker (**Products › Create template**) and assign it to those products in **Products › \[product] › Theme template**.
{% endhint %}

## Product information section settings

| Setting                                    | What it does                                                                                                                                                                                              |
| ------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Show breadcrumbs**                       | Shows a "Home › Product" trail above the product, with the collection in between when the shopper came from a collection. On by default.                                                                  |
| **Show only the selected variant's media** | Shows only the photos that belong to the selected variant (see [Media per variant](#media-per-variant)). On by default.                                                                                   |
| **Show thumbnails on large screens**       | Adds a row of thumbnails under the main image on computers. Phones always show dots instead. On by default.                                                                                               |
| **Keep media in view while scrolling**     | On large screens the gallery stays in view while the shopper scrolls the product details. On by default.                                                                                                  |
| **Image fit**                              | **Fill frame** crops photos to fill the square frame; **Show whole image** shows the entire photo inside the frame. Choose **Show whole image** for products photographed on white with different shapes. |
| **Open images full screen on click**       | Turns the full-screen lightbox and the "+" cursor on or off. On by default.                                                                                                                               |
| **Color scheme**                           | Colors for this section.                                                                                                                                                                                  |
| **Top padding** / **Bottom padding**       | Space above and below the section (0–160 px). Defaults 24 px and 40 px.                                                                                                                                   |

Full table: [Product information reference](/reference/sections/main-product.md).

## The media gallery

The gallery shows every image, video and 3D model attached to the product in Shopify admin.

* **Images** fill the gallery frame using **Image fit**.
* **Shopify videos** play in place with controls.
* **YouTube and Vimeo videos** show their poster image with a play button; the player loads only when the shopper presses play, which keeps the page fast.
* **3D models** show their preview image with a **View in 3D** button. On phones that support augmented reality a **View in your space** button also appears.
* On computers, **thumbnails** sit under the main image. When there are more than fit, arrow buttons scroll the row. Phones show dots; swipe to change image.

### Media per variant

With **Show only the selected variant's media** on, the gallery shows only the photos for the selected variant — so choosing "Walnut" shows walnut photos only.

How Stratum groups your media:

1. In **Products › \[product]**, order the media so each variant's photos follow that variant's main image.
2. Assign that main image to the variant (click the variant, then **Add image**).
3. Each variant image starts a group that runs until the next variant image. Media placed **before** the first variant image is shared and shows for every variant (a size chart or a lifestyle shot, for example).

{% hint style="warning" %}
If only one variant has an image, grouping has no effect and every photo shows. Assign an image to each variant you want to group.
{% endhint %}

### Full-screen lightbox and "+" cursor

With **Open images full screen on click** on:

* On computers with a mouse, the pointer turns into a round **+** badge over product images. It follows the pointer with a slight lag and springs in and out. Over videos, 3D models and buttons the normal pointer returns.
* Clicking (or tapping on phones) an image opens it full screen. The image flies out of the gallery to fill the screen, and a counter ("2 / 6"), a close button and arrows fade in.
* Move between images by swiping, with the arrow buttons (on computers) or the left and right arrow keys. Images next to the current one load in advance, so they are usually ready; a slow image shows a small loading bar until it arrives.
* Close with the close button, **Esc**, or a click outside. The image flies back into the gallery, which moves to the last image viewed.
* With **Show only the selected variant's media** on, the lightbox shows the selected variant's photos only.

![Product lightbox](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-7c53484f8555ee5b631b169a480857fe364341af%2Fproduct-lightbox.gif?alt=media)

{% file src="/files/mq5ceR8tWO3KBlVY9uwW" %}
Watch the video (MP4)
{% endfile %}

![Lightbox open on an image](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-036fa16c69a1db54d7caa1bcaa7a82fbb2c87fbd%2Flightbox.png?alt=media)

{% hint style="info" %}
Shoppers who use a keyboard can tab to each image and press **Enter** to open it. Shoppers who ask their device to reduce motion get a simple fade instead of the flying image.
{% endhint %}

## Product blocks

Add blocks with **Add block** under **Product information**, drag them to reorder, and click a block to change its settings. Every product block has a **Product** setting; on the product page leave it as it is — it follows the product being viewed.

### Product title

| Setting             | Options                                    | Default                                                                                       |
| ------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------- |
| **Size**            | Small, Medium, Large, Extra large          | Medium (the default product page uses Extra large)                                            |
| **Heading level**   | Heading 1, Heading 2, Heading 3, Paragraph | Heading 3 (use **Heading 1** on the product page so search engines read it as the page title) |
| **Link to product** | On / off                                   | On (turn off on the product page)                                                             |

### Product details line

A single line with vendor, rating and SKU, for example "Normcore · ★ 4.8 (120) · SKU AP-01".

* **Show vendor** — on by default.
* **Show rating** — uses the `reviews.rating` metafield written by review apps (see [Metafields](/products/metafields.md)). Nothing shows when a product has no rating.
* **Show SKU** — updates when the shopper picks another variant.

### Price

| Setting                          | What it does                                                                                                                                                      |
| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Size**                         | Small, Medium, Large or Extra large.                                                                                                                              |
| **Show selected variant price**  | Turn on for product pages so the price follows the selected variant. Cards show the lowest price instead.                                                         |
| **Show "From" when prices vary** | Shows "From $20" when variants have different prices.                                                                                                             |
| **Show tax and shipping notes**  | Adds "Taxes included." (when your prices include tax) and "Shipping calculated at checkout." (linked to your shipping policy, when you have one) under the price. |

Sale prices show the compare-at price struck through. Unit prices (for example "$2.50 / 100 ml") appear automatically when you set them on the variant.

### Volume pricing

Shows quantity price breaks to customers buying through a B2B catalog with volume pricing. Shoppers without such a catalog see nothing. Setting: **Heading** (default "Volume pricing").

### Variant picker

Lets shoppers choose options such as Color and Size.

* **Style** — **Buttons** or **Dropdown**. Options set up as swatches always show swatches, whichever you choose.
* Options set up as swatches show round (or rounded-square) color swatches. See [Variants and color swatches](/products/swatches.md).
* Other options show as buttons in a grid of at least 96 px per button, starting from the left; long names wrap.
* Unavailable values are struck through. Choosing a combination that does not exist shows "This combination is not available".
* Choosing a value updates the price, photos, stock status, SKU, the add button and the page address straight away. Hovering a value starts loading it in the background, so the change is usually instant.

![Variant swatches](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-41608395d8648894f67ebaae725562773c5fdfd2%2Fvariant-swatches.gif?alt=media)

{% file src="/files/c1sm2S4igbVqkh9DGwlO" %}
Watch the video (MP4)
{% endfile %}

### Inventory status

Shows stock for the selected variant: in stock, low stock ("Only 5 left"), sold out, or available on backorder.

| Setting                              | What it does                                                                                                       |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
| **Style**                            | **Compact** (a colored dot and text) or **Panel** (a shaded box).                                                  |
| **Low stock threshold**              | Shows "Only \[count] left" at or below this quantity (0–100, default 50). Needs inventory tracking on the variant. |
| **Show units in stock**              | Shows the exact count when stock is above the threshold.                                                           |
| **Delivery note when in stock**      | For example "Order by 4 pm for next-day delivery".                                                                 |
| **Delivery note when stock is low**  | A different note for low stock.                                                                                    |
| **Note when available on backorder** | Shown when the variant is out of stock but still for sale.                                                         |

{% hint style="warning" %}
Keep delivery notes true for your shipping setup — they are promises to your customers.
{% endhint %}

### Buy buttons

The quantity selector, **Add to bag** button and dynamic checkout buttons.

| Setting                                | What it does                                                                                      |
| -------------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Show quantity selector**             | Minus/plus quantity control. Respects quantity rules (minimums and increments) from B2B catalogs. |
| **Show dynamic checkout buttons**      | Shows the shopper's preferred express payment, such as Shop Pay, PayPal or Apple Pay.             |
| **Show recipient form for gift cards** | On gift card products, lets the buyer send the card to someone else by email on a chosen date.    |

The add button changes by itself:

* **Sold out** when the variant cannot be bought.
* **Pre-order** when the variant is tracked, has no stock and is set to **Continue selling when out of stock**.
* **Unavailable** when the chosen combination does not exist.

**Subscriptions and selling plans:** if the product has selling plans (from a subscription app), purchase options appear above the button — "One-time purchase" plus each plan with its price. If the product can only be bought as a subscription, the first plan is preselected.

After adding, the cart opens as set in **Theme settings › Cart** (see [Cart](/cart/cart.md)).

### Restock request

A small form that appears **only when the selected variant is sold out**. The shopper leaves an email and the request reaches you as a contact form email. Reply when stock returns.

Settings: **Heading** (default "Ask about a restock"), **Text**, **Button label** (default "Send request").

### Compare

An **Add to compare** checkbox. It only shows when **Theme settings › Product compare › Enable product compare** is on. See [Product compare](/products/compare.md).

### Pickup availability

Shows the stores where the selected variant can be picked up and how soon. Set up local pickup in **Settings › Shipping and delivery** first; without it, the block shows nothing.

### Specifications

A tidy table of product facts that follows the selected variant.

| Setting                                                                         | What it does                                                                                                                                    |
| ------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading**                                                                     | Default "Specifications".                                                                                                                       |
| **Show divider above**                                                          | A line above the block.                                                                                                                         |
| **Show product options**                                                        | One row per option with all its values, for example "Color — Navy, Clay, Graphite".                                                             |
| **Show vendor** / **Show product type** / **Show weight** / **Show SKU**        | Rows from the product and the selected variant. SKU is on by default.                                                                           |
| **Row 1 label** … **Row 6 label** and **Row 1 metafield** … **Row 6 metafield** | Up to six rows from product metafields. Enter the metafield as `namespace.key`, for example `custom.material`. Rows without a value are hidden. |

You can also add **Specification** blocks inside it for extra rows. Each has a **Label**, a **Value** (connect it to a metafield with the dynamic source icon) and a **Style**: **Side by side**, **Stacked** or **Large**.

See [Metafields the theme reads](/products/metafields.md) for creating metafields.

### Description

The product description from Shopify admin, with **Heading** and **Show divider above**. Turn the divider off when the block follows **Specifications**, so there is only one line between them.

### Collapsible row

A row that opens and closes, for shipping information, care instructions or FAQs.

| Setting                          | What it does                               |
| -------------------------------- | ------------------------------------------ |
| **Heading**                      | The row title.                             |
| **Heading size**                 | Small, Medium or Large.                    |
| **Close other rows when opened** | Only one row in a group is open at a time. |
| **Open by default**              | The row starts open.                       |

Add blocks inside the row (text, images, Custom Liquid or app blocks) for its content.

### Complementary products

Small product cards for items that go with this one. Choose the products in the **Search & Discovery** app (**Complementary products**). Settings: **Heading** (default "Pairs well with") and **Maximum products** (1–6, default 3).

### Share

Copies the product link, or opens the phone's share sheet on touch devices. A "Link copied" message confirms it.

| Setting          | Options                                      | What it does                                                                                                      |
| ---------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| **Button label** | Text                                         | The button text. With **Icon only**, screen readers read it out.                                                  |
| **Style**        | **Button with label**, **Icon only**         | Icon only shows a round icon with a tooltip on hover.                                                             |
| **Position**     | **Where the block is placed**, **Top right** | Top right pins the button to the top right of the product details, beside the title. The title keeps clear of it. |

The default product page uses **Icon only** + **Top right**.

### Vendor and Rating

* **Vendor** shows the brand; **Link to vendor collection** links it to a page listing all products from that brand.
* **Rating** shows stars from the `reviews.rating` metafield, with **Show number of reviews**. Install a review app that writes this metafield.

### Other blocks

The product column also accepts shared blocks such as **Text**, **Button**, **Image**, **Icon**, **Divider**, **Spacer**, **Custom Liquid** and app blocks. See [Blocks](/reference/blocks.md).

## Sections below the product

### Product recommendations

![Product recommendations](https://2073252647-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX7okZwFVjG38blUMwqg%2Fuploads%2Fgit-blob-453e1383624e25ce972403e62e1edb12493d3183%2Fproduct-recommendations.png?alt=media)

Products Shopify recommends from sales and product data. Adjust them in the **Search & Discovery** app.

| Setting                               | Default           |
| ------------------------------------- | ----------------- |
| **Heading**                           | You may also like |
| **Maximum products**                  | 5 (2–10)          |
| **Products per row on large screens** | 5 (2–6)           |

The cards follow the **Product card** block inside the section and **Theme settings › Product cards**. If Shopify has no recommendations for a product, the section hides itself.

### Recently viewed

Products the shopper viewed on this device, newest first. The list lives in the shopper's browser, so it is private and needs no app. The current product is left out, and the section stays hidden until there is at least one other product to show.

| Setting              | Default         |
| -------------------- | --------------- |
| **Heading**          | Recently viewed |
| **Maximum products** | 6 (2–12)        |

### Product reviews

A rating summary from the `reviews.rating` and `reviews.rating_count` metafields, plus a place to add your review app's block. Settings: **Product** (leave empty on product pages), **Heading** (default "Reviews").

## Tips

* Keep **Show selected variant price** on in the product page's **Price** block, otherwise the price will not follow the chosen variant.
* Put **Specifications** before **Description** and turn off the description's **Show divider above** for a clean layout.
* Use **Show whole image** in **Image fit** if your photos have different shapes and some get cropped.
* To show a sticky "Buy" bar while scrolling, turn on **Show product bar on product pages** in the header section (see [Header](/header-and-footer/header.md)).