Colorways

Link separate products together as colourways on the product page.

In Shopify you can set colours up as variants of one product, or as separate products. This metafield is for the second approach — when each colour is its own product with its own SKU, photography and page.

Common for limited runs where each colour is a separate launch, and for stores where each colour needs its own URL.

What it renders

SUPRA's product page shows a column of thumbnails beside the image. Normally that's one vertical stack of this product's shots.

With colourways set, it becomes a column per colourway — each column is one product's shots, and the column of the colour being looked at is the outlined one.

Clicking another column hands the whole listing to that colour in place: title, colour name, price, size row, buy button and the address bar, with no page load. See Product.

Setting up the metafield

One definition, not two.

1. Shopify admin → Settings → Custom data → Products

2. Add definition

3. Fill in:

   • Name: Colorways

   • Namespace and key: custom.colorways

   • Type: Product → tick List of products

4. Save

Setting up a product family

Say a bomber in three colours, each its own product:

• BB-01 - Blue

• BB-01 - Brown

• BB-01 - Olive

On each of the three, set the Colorways metafield to a list of all three products, including itself, in the order you want the columns to appear:

• BB-01 - Blue → [Blue, Brown, Olive]

• BB-01 - Brown → [Blue, Brown, Olive]

• BB-01 - Olive → [Blue, Brown, Olive]

Yes, each product goes in its own list. Blue's list contains Blue. That is not a mistake in the example — it is how you place Blue's column among the others, because the list is the running order.

Leave it out and the theme puts it back rather than breaking, but at the front of the row instead of where you meant it. The lists then disagree with each other, and the columns move around as customers click between the colours. Two minutes of setup avoids it, so do it properly.

Tips

• Always include the current product in its own list — the theme copes without it, but that column lands at the front instead of where you put it

• Keep the order identical across the family — if Blue lists [Blue, Brown, Olive] and Brown lists [Olive, Blue, Brown], the columns jump around as customers click between them

• A product with no metafield set just shows the ordinary single stack — nothing breaks, the feature simply doesn't appear

Naming the colour

This metafield links the family; it does not name the colour under the product title. That is custom.colorway_name, a separate single line text metafield. A separate-product colourway family wants both.

Swiping between colourways on phones

The product page has a Swipe through colourways setting, off by default. Turn it on and the phone carousel carries on past this product's own shots into every shot of the other colourways, and swiping onto one hands the whole listing to that product — title, colour, price, sizes and the buy button. See Product.

Bulk setup

Fifty products with five colourways each is painful by hand. Matrixify (formerly Excelify) will export your products, let you fill the metafield column in a spreadsheet, and re-import.