# Swatches

***

**Swatches** are visual representations of product variants (e.g., colors), helping customers quickly understand and select options. They enhance the shopping experience by updating product images instantly and creating a more interactive, visually appealing interface.

### **I. How to Add Color Swatches (Using Category Metafields)**

**1. Step 1: Assign a Product Category**

In **Shopify admin**, assign a **category** that supports color metafields (e.g., *Apparel & Accessories → Clothing → Shirts*).

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

**2. Step 2: Connect Color Metafields**

Click the **dynamic source icon** (⛁) to link the **Color** field to the category metafield. You can add custom values via **Edit → Add new entry → Save**.

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

**3. Step 3: Apply to Store**

Once configured, swatches will appear across product cards and product pages.\
Customize via: **Theme Editor → Theme settings → Swatches**

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

### **II. Swatch Settings in Theme**

**1. Swatch display options**

* **Show swatches:** Enable/disable swatches on **product cards** and **product pages**.
* **Swatch type:**
  * **Color**: Displays a color swatch for each variant.
  * **Native**: Uses the variant image (if available) instead of a color.
* **Product card swatch shape:** Defines the shape of swatches on collection grids: Square, Circle or Rectangle.
* **Hide swatches when only one option exists:** Automatically hides swatches if the product has only one variant.

**2. Product card settings**

* **Maximum swatches on product cards:** Limits the number of swatches displayed on product cards from 2 to 10 to maintain a clean layout.

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


---

# 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://help.inspiredtheme.com/articles/theme-settings/inspiredtheme-settings-intro/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.