# Setup automate image variant product

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

* You need to add main image for variant group in shopify admin before changing variant style to automatic image

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

### 1. Go to the Shopify admin product detail

#### Add variant color/model&#x20;

<mark style="color:purple;">E.g: White, Pink, Black, Green</mark>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2Fif8bqp84lOvFTrNusOIk%2Fimage.png?alt=media&#x26;token=809398f4-47d1-4203-bcf8-5fa584e77538" alt=""><figcaption><p>Add variant color/model</p></figcaption></figure>

#### Sort group variant by color/model

The variant displayed as a color/image must appear before the variant displayed as a button

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FVQC8EaQeHUrwWQIqfz7C%2Fimage.png?alt=media&#x26;token=71876800-aaae-4ba5-90ba-1b8b47214621" alt=""><figcaption><p>Sort group variant</p></figcaption></figure>

#### Add main image for variant group

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FJx3A2D95GTx9eKHc0Xq3%2Fimage.png?alt=media&#x26;token=3735879c-3448-4c6d-a1b7-2711343ca554" alt=""><figcaption><p>Add main image variants</p></figcaption></figure>

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

### 2. Sync data agian in GLOBO Color Swatch

Go to **Dashboard** GLOBO Color Swatch, click button **Update data**<br>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FXKvAiqzhq4DMIXPrUdQZ%2Fimage.png?alt=media&#x26;token=63ec5136-f190-4856-b365-e33a3d72b8ba" alt=""><figcaption><p>Update data</p></figcaption></figure>

### 3. Setup style for variant option is color swatch

* In 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>

### 4. Change display style to image

* Choose style image

{% hint style="info" %}
Types variant support setup automatic image variant product&#x20;

✅ Automated swatch

✅ Image swatch with price

✅ Image dropdown
{% endhint %}

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FdCCiQIwDqB4OJNozjMpN%2Fimage.png?alt=media&#x26;token=395ae4c3-36d5-4f05-890c-fa924fcb11ae" alt="" width="302"><figcaption><p>Automated swatch</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FVIgk3MCsyebDi1OpUQuO%2Fimage.png?alt=media&#x26;token=19d2b1e6-9d9b-4366-b465-2e5078a5c3a8" alt="" width="255"><figcaption><p>Image 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%2FfaniUXo7IO4e6KuKj8Ss%2Fimage.png?alt=media&#x26;token=1bb488b2-e75a-4e14-a1fd-90d81413fe5f" alt="" width="261"><figcaption><p>Image 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%2F4x83AAfKAMCyJC6W0ca4%2Fimage.png?alt=media&#x26;token=34a3853c-9e2d-402c-81ba-f6575d54086f" alt="" width="563"><figcaption><p>Save style</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%2FqVs8dpXMFw6JgERNZ8Nz%2Fimage.png?alt=media&#x26;token=898c3dce-f058-4c35-aaee-17716a427fd2" alt=""><figcaption><p>Demo </p></figcaption></figure>
