# Color swatch

This guide outlines the steps to configure color swatches on your product pages by leveraging Shopify's category metafields. By following these steps, you can ensure that color options are displayed as swatches, providing a visual representation for customers.

<figure><img src="https://content.gitbook.com/content/9icwdCUv3B94Yb9tmqHW/blobs/PttPcAxd2NEIzBo3nmCX/image.png" alt=""><figcaption></figcaption></figure>

***

### Step 1: Assign a Product Category

Shopify enables category metafields (e.g. Color, Size) only after a product has a category.

**To assign a category:**

1. Go to **Products** in the Shopify admin.
2. Click the product you want to edit.
3. In the **Category** section, click **Browse categories**.
4. Select a relevant category (e.g. `Apparel & Accessories > Clothing > Shirts`).
5. Click **Save**.

> ⚠️ Only products with assigned categories can use category metafields.

***

### Step 2: Configure the Color Metafield

Once a category is assigned, you can configure available values for the **Color** metafield.

**To add/edit entries:**

1. Go to **Settings > Custom data > Categories** in the Shopify admin.
2. Click the category you previously assigned.
3. Locate the **Color** metafield.
4. Click **Manage entries**.
5. Add new color entries:
   * Enter a color name (e.g., `Red`, `Blue`)
   * Optionally upload a swatch image or color hex (e.g., `#FF0000`)
6. Click **Save**.

***

### Step 3: Connect the Color Metafield to Variant Options

Link your product’s **Color** option to the metafield you just configured.

**Steps:**

1. Open your product in the **Products** section.
2. Under **Variants**, click **Add options like size or color**.
3. In **Option name**, type `"Color"`.
4. Click the **dynamic source icon** next to it (🔗).
5. Choose the **Color** category metafield.
6. Assign each variant the appropriate metafield entry (Red, Blue, etc.).
7. Click **Done** and **Save** the product.

***

### Step 4: Customize Swatch Display in the Theme Editor

If your theme supports it, you can customize how swatches are shown on the product page.

**To configure the visual style:**

1. Go to **Online Store > Themes > Customize**.
2. Open a **product page** template.
3. Find the section displaying variant options.
4. Click the **Color** option block.
5. Choose display type: `Swatches`, `Dropdown`, etc.
6. If swatches are used, select:
   * **Color hex code**
   * Or **uploaded swatch image**
7. Save the changes.

> 🔍 Your theme may prioritize the swatch image metafield if it exists, then fallback to color hex, then variant image.

***

### Resources

* [Shopify Help: Using category metafields](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields)
* [Shopify Help: Metafields overview](https://help.shopify.com/en/manual/custom-data/metafields)
* [Shopify Help: Displaying metafields on your store](https://help.shopify.com/en/manual/custom-data/metafields/displaying-metafields-on-your-online-store)

***

By following these steps, you can efficiently manage and display color swatches across your Shopify store — all from the admin, without writing code.

***ℹ️ Note:***\
*The current version of the theme **does not support color swatches on collection (collection grid) pages**.*

*However, we’re actively working on this feature and plan to include it in an upcoming update. Stay tuned!*
