# Setting Up Color Swatches

**What You’ll Learn**

* How to assign a product category
* How to apply color swatches using Shopify's category metafields
* How to connect a color metafield to your theme’s product variants

<figure><img src="/files/wbV3WEsUVxMfmKHa8Bzi" alt=""><figcaption></figcaption></figure>

### 1. Open the Product Page in the Theme Editor

* In the Shopify admin, go to **Online Store > Themes**, then click **Customize** on your live theme.
* Navigate to a product page.
* Click the **Product Variants** block inside the **Product Section**.
* Under **Variant Style**, select **Color Swatches**.

> 💡 Tip: Use the preview selector to load a product that has multiple color variants.

<figure><img src="/files/OtTP4pt10idjlRF51Ens" alt=""><figcaption></figcaption></figure>

### 2. Assign a Category in the Shopify Admin

* Go to **Products** in the Shopify Admin.
* Click on the product you want to edit.
* Scroll to the **Category** section and assign it to a relevant option (e.g. **Apparel & Accessories**).

<figure><img src="/files/GF61mGbJhgjR2YZYgHpv" alt=""><figcaption></figcaption></figure>

### 3. Add Color Values to the Category Metafields

* After assigning a category, scroll down to **Category Metafields**.
* You'll now see options specific to that category (like "Color").
* Click into the **Color** field and either select from the list or choose **Add new entry** to type in a custom color.

<figure><img src="/files/Xo6uJB0Osul1QILlmjuv" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/cjLVLXbfFTlyBw9fO4DO" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/jGUMhew3Az52251widkn" alt=""><figcaption></figcaption></figure>

### 4. Link the Color Metafield to the Variant Block

* Return to the Theme Editor and click the **Product Variants** block again.
* Locate the **color variant** and click the **dynamic source icon** (stacked circle icon).
* Select the color metafield you added from the dropdown.

<figure><img src="/files/cSqp1nNrR3P7LXCzNnXE" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FaEtZe8PNfhgaeogq1nX" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Xxs75fAVZXiYqXvNiqs7" alt=""><figcaption></figcaption></figure>

### 5. Save Your Changes

* Click **Done** and then **Save** at the top-right of the theme editor.

***

✅ Your product should now display clickable color swatches based on the metafield values you added.

> ⚠️ Warning: Color swatches only appear if your product has a **variant option named “Color”** and it’s matched with the corresponding metafield.

<figure><img src="/files/wbV3WEsUVxMfmKHa8Bzi" alt=""><figcaption></figcaption></figure>

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# 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.openspaces.design/readme-1/advanced/setting-up-color-swatches.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.