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

---

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

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

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

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.

---

Need help?

Whether you have a question, run into an issue, or just need some guidance, our support team is here to help.

Chat with us Submit a ticket