> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/product-variant-swatch/configure-swatch-style/set-color-hex-code-for-each-value.md).

# Set color HEX code for each value

## Guide

### <mark style="color:blue;">Step 1. Choose variant(s) to be displayed as Swatch style</mark>

* Go to **the Options** section
* Select your product variations to display as swatches<br>

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

### <mark style="color:blue;">Step 2. Change display style to swatch</mark>

{% hint style="info" %}
List of styles that support HEX code:&#x20;

✅ Swatch

✅ Pill swatch

✅ Custom swatch with price

✅ Swatch dropdown
{% endhint %}

<figure><img src="/files/LWwtAtYXQ5ETUKKL028M" alt="" width="187"><figcaption><p>Swatch</p></figcaption></figure>

<figure><img src="/files/IoJaYr5F1DSlRCyb5jtu" alt="" width="197"><figcaption><p>Pill swatch</p></figcaption></figure>

<figure><img src="/files/O8n6yEqwbzgkKCniWPGe" alt="" width="170"><figcaption><p>Custom swatch with price</p></figcaption></figure>

<figure><img src="/files/iYbxi3vyZwBo6jKcwzk1" alt="" width="175"><figcaption><p>Swatch dropdown</p></figcaption></figure>

* From the **Display as** dropdown, choose **Swatch** style.

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

* Click **Save** button to save the changes.

### <mark style="color:blue;">Step 3. Set HEX code for each color value</mark>

* Click the **Set Swatches** button

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

* In the configuration page, you can setup HEX code for value.
* If you use 2 colors, you need to tick the **checkbox next to color 2**
* **Save** and preview the changes on the frontstore.<br>

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

## <mark style="color:blue;">Result:</mark>

<figure><img src="/files/YFdCsT583KtLIIqeijBH" alt=""><figcaption><p>Demo</p></figcaption></figure>

**💬 Need help?**

Email us at **📧 <contact@globo.io>** - we’re happy to assist!