> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/how-to-guides/use-a-metafield-to-match-the-active-product-card-color.md).

# Use a metafield to match the active product card color

By default, product cards activate the first available variant. Use the `custom.active_color` metafield on a collection to pre-select a specific color variant for every product card in that collection, without any customer interaction.

When a matching variant is found, the whole card updates to it: the **variant image**, **price**, **highlighted swatch**, and **stock badges**. Quick view and quick add open on that variant as well, rather than on the product default. For example, a "Summer Blue" collection can show the blue variant of every product automatically.

![Product cards pre-set to a collection's active color](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-316cfb5139ad664ee33730132594e65687946ef1%2Fuse-a-metafield-to-match-the-active-product-card-color-overview.png?alt=media)

***

**Step 1 — Create the metafield definition**

1. In Shopify Admin, go to **Settings → Metafields and metaobjects → Collections**.
2. Click **Add definition** and configure:
   * **Name** — `Active color`
   * **Namespace and key** — `custom.active_color`
   * **Type** — Metaobject → Color, list of values
3. Click **Save**.

![Creating the Active color collection metafield definition](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-894da8e5f4960b057ad89187434bd056dd3b7885%2Fuse-a-metafield-to-match-the-active-product-card-color-metafield.png?alt=media)

**Step 2 — Assign colors to a collection**

1. Open any collection in Shopify Admin.
2. Scroll to **Metafields → Active color**.
3. Click **Select entries** and choose one or more Color entries.
4. Save the collection.

![Selecting Color entries for a collection's Active color metafield](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-49cf4a441cdbda50f0da0daf8882d650c727782a%2Fuse-a-metafield-to-match-the-active-product-card-color-assign.png?alt=media)

**Step 3 — See the result**

Helix applies the metafield automatically — it only needs the product cards to be showing that collection:

* **In a section** (Collection Tabs, Featured Collection, etc.) — set the section's **Collection** to the one that has the **Active color** metafield.
* **On the collection page** — open a collection that has the **Active color** metafield; its product grid picks it up automatically.

![The collection's product cards showing the active color on the storefront](https://3215967854-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlyCMfKbEVTf3hu8uxjSZ%2Fuploads%2Fgit-blob-00ddba43527b8d2af912f0f79c3919c697381a5a%2Fuse-a-metafield-to-match-the-active-product-card-color-result.png?alt=media)

{% hint style="info" %}
You can assign multiple colors to a collection. Helix uses the first color that matches a variant on each product — useful when products in a collection use slightly different color names.
{% endhint %}