# 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*).
**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**.
**3. Step 3: Apply to Store**
Once configured, swatches will appear across product cards and product pages.\
Customize via: **Theme Editor → Theme settings → Swatches**
### **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.
