# Set color for variant option value

## Guide

### <mark style="color:blue;">1. Setup style for variant option is color swatch</mark>

* Go to admin app GLOBO Color Swatch **Dashboard -> Options list**
* Select your product variations to display as swatches<br>

  <figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FbNQCFEqpzF5cO5nRTVEO%2Fimage.png?alt=media&#x26;token=6b133197-6c92-48bc-8edb-fa5fc691d540" alt="" width="563"><figcaption></figcaption></figure>

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

* Choose one of 4 style

{% hint style="info" %}
Types variant support setup color hex:&#x20;

✅ Swatch

✅ Pill swatch

✅ Custom swatch with price

✅ Swatch dropdown
{% endhint %}

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fq7VjoWXH51Jsh8bGso1t%2Fimage.png?alt=media&#x26;token=a6a12351-ded4-447a-a053-90be249858e4" alt="" width="187"><figcaption><p>Swatch</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FAGsGIqCdGuI0aAvNpLVy%2Fimage.png?alt=media&#x26;token=32df610c-6dc3-464f-93ed-9ecf1acd1ad9" alt="" width="197"><figcaption><p>Pill swatch</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FPGMIpm4hGWoV4jO8dA8g%2Fimage.png?alt=media&#x26;token=df45f9d2-f90a-467d-b36c-97a496e4b31c" alt="" width="170"><figcaption><p>Custom swatch with price</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FA7tNotgaKfHu0010zR9n%2Fimage.png?alt=media&#x26;token=64c0688f-9b57-48cf-af0a-9441be735ade" alt="" width="175"><figcaption><p>Swatch dropdown</p></figcaption></figure>

* Click **save** button<br>

  <figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fc4ccIDjrtLrWvtuK6ZvM%2Fimage.png?alt=media&#x26;token=144a20f2-b9cd-4b81-9535-42acba560428" alt="" width="563"><figcaption></figcaption></figure>

### <mark style="color:blue;">3. Change color hex for options value.</mark>

* After change style -> click **config button**

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2F3dEpHMM2z2UmOnHRqWuV%2Fimage.png?alt=media&#x26;token=41a3fc9f-5df5-4da9-a418-19b0ad4bd694" alt="" width="563"><figcaption><p><strong>Config color swatch</strong></p></figcaption></figure>

* In config page, you can setup color for option value.
* For each option value, you can only configure a **maximum of 2 colors for 1 value**.
* If you use 2 colors, you need to tick the **checkbox next to color 2**
* **Save** and preview on front store\ <br>

  <figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2F133Bh7D8IvpooEhFpKQy%2Fimage.png?alt=media&#x26;token=115ceac1-3ae9-4c90-b89d-7444472c0f79" alt=""><figcaption><p>Setup color for option value</p></figcaption></figure>

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

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FW5f6evHZX0edJzmIVClO%2Fimage.png?alt=media&#x26;token=0504c471-dd42-47f9-a18a-b7718a853214" alt=""><figcaption><p>Demo</p></figcaption></figure>