> For the complete documentation index, see [llms.txt](https://help.inspiredtheme.com/articles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.inspiredtheme.com/articles/theme-settings/inspiredtheme-settings-intro/swatches.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://help.inspiredtheme.com/articles/theme-settings/inspiredtheme-settings-intro/swatches.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.