# Color swatches

{% hint style="success" %}
**Take the following steps:**

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Color swatches**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FZOiC056hDsmb04p5qT9Z%2Fcolor_swatches_1.png?alt=media&#x26;token=12920640-359a-48cc-b4a1-549efc113dec" alt=""><figcaption></figcaption></figure>

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FQi6nv45q7h05rvbtIGyJ%2Fcolor_swatches.png?alt=media&#x26;token=c5ae9e6c-cb4c-41a7-8abc-a39552f20317" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**This is the option for enabling or disabling color swatches across the entire website.**
{% endhint %}

| Settings                               | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Enable color swatches**              | Color selections are displayed in swatches on the product card, allowing you to swiftly select.                                                                                                                                                                                                                                                                                                                                                                                                 |
| **Color swatch activation**            | <p>Define the color option name. Eg. <strong>Color, Colour</strong>, etc.</p><p></p><p><strong>The name you used for the variant color option name must be entered exactly as it was there.</strong></p><p></p><p><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FDvugaO4j1xXWPyfuxWRZ%2Fcolor_option_name.png?alt=media&#x26;token=6e760ddd-5038-45e7-b3a3-e32a3f7fdee2" alt="" data-size="original"><br></p> |
| **Maximum number of swatches to show** | You can set a limit on how many color swatches to display.                                                                                                                                                                                                                                                                                                                                                                                                                                      |
| **Swatch type**                        | <ol><li><strong>Color swatch (Default selected)</strong></li><li><strong>Variant image</strong> (You can display a variant image instead of the color swatch )</li></ol>                                                                                                                                                                                                                                                                                                                        |
| **Recently viewed product**            | You can also enable/disable color swatches for the recently viewed product section.                                                                                                                                                                                                                                                                                                                                                                                                             |

## Color swatches for a specific section

{% hint style="info" %}
**For each section, color swatches can be enabled or disabled Following the screenshot** -
{% endhint %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FuWEp0vX0XVitulEAlkXf%2Fcolor_swatches_3.png?alt=media&#x26;token=950a94b9-7368-4510-ba54-b8a17d0a6733" alt=""><figcaption></figcaption></figure>

## Video Tutorials

{% embed url="<https://www.youtube.com/watch?index=11&list=PLWCiWoEvn91ivfW5vf1gw_rnacJw8G5pj&v=NSgd8ZM2NTQ>" %}

## Adding custom colors to swatches

{% hint style="warning" %}
Suppose you are using such color names. Names that are not supported as colors in browsers. Then you should follow the steps below -
{% endhint %}

{% hint style="success" %}

**Take the following steps:**

1. In the theme editor (**Customize**), click on the **Color swatches** Section
2. Add **Color item**
3. Make the necessary adjustments.
4. **Save**
   {% endhint %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FXzwIJgr4XeXW7wLdxBjN%2F1.png?alt=media&#x26;token=c92346fa-b9c3-4002-acda-21657658cc14" alt=""><figcaption></figcaption></figure>

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FDeWV7Kswt3MGf6iTXhks%2F2.png?alt=media&#x26;token=00c7042a-b22c-4512-bd71-70b746b386eb" alt=""><figcaption></figcaption></figure>

## Video Tutorials

{% embed url="<https://www.youtube.com/watch?index=12&list=PLWCiWoEvn91ivfW5vf1gw_rnacJw8G5pj&v=UyPxAlsZFXM>" %}