# Color Swatch

{% hint style="info" %}
**Theme settings -> Color swatch**
{% endhint %}

## Swatch mode

In the **Swatch mode** drop-down menu, choose how swatches will be displayed in your store. The theme provides three design options: buttons, colors, or variant images.

Below are examples illustrating how each mode may be displayed in a store:

{% tabs %}
{% tab title="Default " %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FAILUroIc1K9XpHrgg8ec%2Fswatch_default.png?alt=media&#x26;token=7f7ce88d-f8fd-43c9-9ff2-f13e6d9e17bb" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Flat color" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F4NN3Zpg9InvAKmdrnSBG%2Fswatch_color.png?alt=media&#x26;token=ddc8be0b-ed97-4a6e-a798-f9d9580450f4" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Variant's image" %}

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FuYaGWkwKCVMNDN1gls9u%2Fswatch_image.png?alt=media&#x26;token=b36be0b4-cab0-4542-82a6-9bcb2b6d47a4" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

Select the swatches mode. If you pick the image or color mode but see the text value, you should check if product variant has an image. Or if the 'Colors configuration' field has the configuration for this value.

Now, let's go over how to set up each design option variant:

* **Default**

To display buttons with color names, choose **Default**. Selecting this option hides the color swatches on collection pages and Theme sections.

Ensure the button colors in the theme match the colors specified in the **Option values** fields in your Shopify admin.

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FhoceOWKSMKFOyXyK6eea%2Fcolors_texts.png?alt=media&#x26;token=9cc3ba69-3a54-4fe5-a218-ddee2d5d6444" alt=""><figcaption></figcaption></figure>

* **Flat color**

Enable the **Flat color** option to show color swatches for each product variant.

Enter the list of hex color codes in the **Colors configuration** input field.

Set a comma-separated list of colors. Each entry should be a pair of color name and color HEX code, separated by a ':' character. For example, black:#000000,white:#FFFFFF,blue:#2196F3. Note: The syntax is sensitive, so ensure correct usage of commas and colons to avoid errors. Add as many colors as needed.

{% hint style="info" %}
The syntax option name should have the same parameters: **option value:#hex code,**

Example:

red:#F44336,

blue:#2196F3,

green:#4CAF50,

blue grey:#607D8B
{% endhint %}

To customize colors in the Theme Editor, follow these steps:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2F0EEHtKIyO6E4RiLVnctF%2Fswatch_admin_colors.png?alt=media&#x26;token=054c7864-0777-4ed5-a528-69e0d7fe3169" alt=""><figcaption></figcaption></figure>

* **Variant's image**

To display product images as swatches, use the **Variant's image**.

**Option name(s)**

Set the option name to apply color swatches configuration. You may set multiple options with a coma-separate list (example: color,colour,choose color). Please note, that color swatches may be applied only to one product option.

To display a product image for each option, assign images in your Shopify admin:

<figure><img src="https://1734026102-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKXAimBJFhRJImV3lJL36%2Fuploads%2FXTiDhf7km4I9WkUQB1zR%2Fvariants_images.png?alt=media&#x26;token=5f2fa073-fbe8-4122-a0da-6864b9c4da78" alt=""><figcaption></figcaption></figure>

**Colors configuration**

Set comma-separated list of colors. Split items with ',' sign. Each item should be a pair of color text and color HEX code separated by ':' sign, like colorText:colorHEXcode. In my example I showed the configuration for three colors, you may set as many as you need. Example: black:#000000,white:#FFFFFF,blue:#2196F3 Please note, that this field is very sensitive to the syntax, one missing coma or semicolon may cause an error.

**Show on thumbnails**

Tick the option to enable/disable the function.

**IMAGE**

The available options: Image hover effect, Image ratio.
