# Swatches

Swatches are **visual indicators** of product variants, enhancing user experience by: providing instant feedback by updating the main product image when a swatch is selected and improving page aesthetics with an interactive color selection component.

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

### **1. Adding Color swatches using category metafields**

* **Assign a product category**

  * Navigate to the **Category** section and select an applicable category, such as **Apparel & Accessories > Clothing > Clothing Tops > Shirts** or any category supporting the **color metafield**.&#x20;

  <figure><img src="/files/sPLU5PsqPFKCGTRc1Mit" alt=""><figcaption></figcaption></figure>
* **Connect category metafields for color**

  * Click the **dynamic source icon ⛁** to link the category metafield to **Color**.
  * To add custom option values, click **Edit > Add new entry**, complete the fields, and click **Save**.

  <figure><img src="/files/6Ah5zjJSkYOiYEL7MOad" alt=""><figcaption></figcaption></figure>
* **Apply color swatches to your online store:**
  * Once configured, swatches will be available across relevant product displays.

### **2. Swatch settings:**

**Customization options:**

* **Type:** Defines swatch display method: **Color** – Shows variant color; **Native** – Displays an image if assigned to the variant.
* **Ratio:** Determines swatch shape: *Square (1:1), Landscape (4:3), Portrait (3:4), Circle*
* **Style:** Controls corner radius for a refined look.


---

# 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.byinspiredlabs.com/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.