# Colorways

In Shopify, you can either set up colors as variants of one product (one product, multiple colors) or as separate products. The colorways metafield is for the second approach — when each color is its own product.

This setup is common for:

* High-end fashion (each color has its own SKU, photoshoot, marketing)
* Limited-edition drops where each color is a separate launch
* Stores where SEO per color matters (each color gets its own page)

## How it looks on the PDP

When colorways are set up, the PDP shows a row of color swatches just below the product title. Each swatch links to a different product (the color variant). The currently-viewed product's swatch is highlighted.

## Setting up the metafields

You need TWO metafield definitions:

### 1. Colorway Color (the swatch color hex)

1. Shopify admin → **Settings** → **Custom data** → **Products**
2. **Add definition**
3. Fill in:
   * **Name**: Colorway Color
   * **Namespace and key**: `custom.colorway_color`
   * **Type**: **Single line text**
4. Save

### 2. Colorways (the linked products)

1. Same place → **Add definition**
2. Fill in:
   * **Name**: Colorways
   * **Namespace and key**: `custom.colorways`
   * **Type**: **Product list** (a list, not single product)
3. Save

## Setting up a product family

Say you have a t-shirt in three colors: Black, White, and Navy. Each is its own product:

* TS01 - Black
* TS01 - White
* TS01 - Navy

For each product:

1. Set the **Colorway Color** metafield to the hex value of THAT color
   * TS01 - Black → `#000000`
   * TS01 - White → `#FFFFFF`
   * TS01 - Navy → `#1B2845`
2. Set the **Colorways** metafield to a list of ALL three products (including itself):
   * TS01 - Black → \[TS01 - Black, TS01 - White, TS01 - Navy]
   * TS01 - White → \[TS01 - Black, TS01 - White, TS01 - Navy]
   * TS01 - Navy → \[TS01 - Black, TS01 - White, TS01 - Navy]

Yes, the product references itself in its own colorways list. DRIFT detects that and highlights the current product's swatch.

## What it renders

On the PDP for TS01 - Black:

* The swatch row shows three circles (Black, White, Navy)
* The Black circle is the active state (highlighted/larger)
* White and Navy are clickable — they link to those products

## Tips

* **Always include the current product in its own colorways list** — DRIFT needs it to know which swatch to highlight as active
* **Use accurate hex values** — close-but-not-quite hex makes the swatches look slightly off. Pull hex codes from the actual product photos if you can
* **Keep colorways consistent** — if a customer expects 3 colors on every product in a family, make sure all 3 products show all 3 colorways. Mismatches confuse buyers
* **Watch for sold-out colorways** — DRIFT still shows the swatch for sold-out products. If you don't want that, unpublish the sold-out product (or remove it from the colorways list)

## Bulk setup

If you have 50 products with 5 colorways each, manual entry is painful. Bulk options:

* **Matrixify/Excelify** — export, fill in the metafields columns, re-import
* **Shopify Functions or a custom script** — only if you have access to a developer

Once the colorways are set up, they update automatically as you change product details. No re-importing needed unless you add new colorways to a family.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webexp.dev/drift/drift-studio/metafields/colorways.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.