> 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-image-of-product-variant.md).

# Use image of product variant

## <mark style="color:red;">Prerequisites \*</mark>

* You need to add the main image for each variant of your products.

### Step 1 - Add image for each variant&#x20;

Go to the Shopify product detail -> Add image for each variant:

<figure><img src="/files/FOdAsV0y0R4C0TrDbna6" alt=""><figcaption><p>Add main image variants</p></figcaption></figure>

### Step 2. Sync data in GLO Color Swatch app

Go to the **Options** section, click the **Update data** button.

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

### Step 3. Change display style to Automated Swatch

{% hint style="info" %}
List of styles that support automatic variant image

✅ Automated swatch

✅ Image swatch with price

✅ Image dropdown
{% endhint %}

<figure><img src="/files/ncMpAUKTzNCuj4dEdn2d" alt="" width="302"><figcaption><p>Automated swatch</p></figcaption></figure>

<figure><img src="/files/HJLPaDOahgII8cgXU11X" alt="" width="255"><figcaption><p>Image swatch with price</p></figcaption></figure>

<figure><img src="/files/pXL6tk79VXrzY24qN60M" alt="" width="261"><figcaption><p>Image dropdown</p></figcaption></figure>

<br>

* Go to the **Options** section
* Select your product variations to display Variant image.
* From the **Display as** dropdown, choose **Automated Swatch** style.

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

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

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

**💬 Need help?**

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