> For the complete documentation index, see [llms.txt](https://docs.webexp.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.webexp.dev/supra-shopify-theme/supra/sections-and-features/product.md).

# Product

The product page, colourways, and the in-cart state.

Image on the left, details on the right, all flush at the top.

| Setting                      | Notes                                                                |
| ---------------------------- | -------------------------------------------------------------------- |
| **Show media thumbnails**    | The column of shots beside the image                                 |
| **Swipe through colourways** | On phones, keep swiping past the last shot into the other colourways |

## The buy block

A 2×2 arrangement: the state of this variant on the left, the ways out on the right. Nothing moves as the state changes — when the item is in the cart, **in cart** appears above and **remove** takes the add button's place.

**in cart** is a link to the cart. The reference leaves it inert, but a control that looks like a button and does nothing reads as broken.

On phones, a product with nothing to choose gets a full-width buy button rather than sitting in half a row.

## The colour line

The line under the title names the colour. It comes from a variant option named `Color` or `Colour` if the product has one, and otherwise from the [`custom.colorway_name`](/supra-shopify-theme/supra/metafields/colorway-name.md) metafield. With neither set there is no line — which is better than the old behaviour of printing the variant title, since on a product carrying only sizes that meant a jacket labelled `1`.

## Colourways

If each colour is a separate product, the [`custom.colorways`](/supra-shopify-theme/supra/metafields/colorways.md) metafield links them. The thumbnail column then renders a column per colourway instead of a single stack.

**Clicking one hands the listing over.** Within a column it changes which shot is shown, as it always did. Across columns it makes the page that product — title, colour, price, size row, buy button, the outline in the thumbnail row and the address bar — with no page load. Nothing is fetched; every colourway's details are in the page from the start.

This needs no setting. It happens wherever there is a family, and it is the wide-screen equivalent of the swipe below.

The thumbnails are still links, so a visitor running no JavaScript gets the ordinary page load to the right product.

### Swipe through colourways

Off by default, and only about the phone. Turned on, the carousel there does not stop at the end of this product's shots — it carries on through every shot of every other colourway in the family.

Swiping onto one hands the listing over. The title, the colour line, the price, the size row and the buy button all become that product, and the address bar follows, so a refresh or a shared link lands on the colour that was on screen. Nothing is fetched: every colourway's details are in the page from the start, which is what makes the change instant.

What this means in practice is that the buy button always adds the colour being looked at. Without it, swiping past the end of a product showed another colour's photograph while the form still held the first one — the shopper sees olive and the cart gets blue.

The outline in the thumbnail column moves with it, so the row always shows which colour is on screen.

**The back button steps out of the product, not through it.** Each swipe replaces the address rather than adding to history, so a family of four colours is not four presses to leave.

Tapping a slide opens the larger view, the same as tapping any other. A visitor running no JavaScript gets no swapping, and there each colourway shot is a plain link to its product — a way to the right page rather than a wrong buy button.

## Zoom

Hovering the image turns the cursor into a magnifier; clicking opens every shot stacked full-width, scrolling. On phones, tapping the image does the same — swiping doesn't, so moving the carousel along never opens it by accident.

## Next product

A `next product ›` link sits in the buy block on desktop and at the foot of the page on phones.

## After add to cart

Staying on the page or going to the cart is a [Theme setting](/supra-shopify-theme/supra/theme-settings/cart.md), not a product one — it applies to every product, so it did not belong on this section.