> 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/use-custom-image-for-each-value.md).

# Use custom image for each value

### <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 custom image:&#x20;

✅ Swatch

✅ Pill swatch

✅ Custom swatch with price

✅ Swatch dropdown
{% endhint %}

* 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. Upload a custom image for each color value</mark>

* Click the **Set Swatches** button

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

* Choose the **Image** option
* Upload a custom image or directly put the Image URL of the custom image
* Click **Save** to finish.

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

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

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

**💬 Need help?**

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