# 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2F7KAHpd9Np0UuXnzU4p1a%2FScreenshot_150.png?alt=media&#x26;token=3ee79b81-47d4-4b0e-a79c-4f1093dcb1e7" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FDB0Uan382rMAsTTfW5AZ%2FScreenshot_151.png?alt=media&#x26;token=3e534495-fdb3-4e39-821f-4069da101096" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FiyYE5p3ESUqCb9KDbpbr%2FScreenshot_152.png?alt=media&#x26;token=0e5041d0-f1c7-4af4-8da6-fbac6f867529" 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FQpmd7Ze4rVcu5JkYaf4w%2FScreenshot_153.png?alt=media&#x26;token=fedad86b-7e86-4911-b3e1-97b67448cee4" alt=""><figcaption></figcaption></figure>

## 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://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FDnMseZ1XpcmOngunpJx9%2FScreenshot_154.png?alt=media&#x26;token=b6b413c5-086e-44a9-ae82-941a9ea1d20e" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2658914724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTsBtmFQxtPZrKf7veaAQ%2Fuploads%2FLUqFTjZEUJkj8Da9n6gr%2FScreenshot_155.png?alt=media&#x26;token=95b3a096-e9ae-4236-85a8-92b3d0e183df" alt=""><figcaption></figcaption></figure>

## Video Tutorials

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