---
description: Setup automated variant images in swatch for product and collection.
---

# How to show automated variant images as swatch

App allows you to show variant images in swatch options if you choose "**Circular**", "**Square**", "**Swatch in card**",  "**Swatch in box**", "**Swatch in Pill**" styles, and **"Variant Image"** types in the **Options Configuration.**

<figure><img src="https://4193867224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEoAvbObuIUyjIXkMsEx%2Fuploads%2FgvWbxSeZYvuQe4gSzL7G%2Foption_configuration_image.png?alt=media&#x26;token=4a442486-4aa0-4d10-8923-80aa6e8ca80d" alt=""><figcaption></figcaption></figure>

Once you configure **"Variant Image"** type in the **Options Configuration** in the app you need to configure variant images in the product section in Shopify.

#### Go to the product section choose a product and follow the instructions below:

If you have multiple images then **arrange the images such that all the images belonging to a particular variant should be together in the sequence** you want them to be displayed and **repeat it for all the variants.**

In the below screenshot, all the images of **“gray”** caps are placed together followed by the **“blue”** and **“red”** color variants.

<figure><img src="https://4193867224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEoAvbObuIUyjIXkMsEx%2Fuploads%2Fkm0wHuvJnWvPfwyjwyMk%2FArrange_the_images.png?alt=media&#x26;token=718d31e1-ad84-4f6d-9bb9-622d3adbd31e" alt=""><figcaption></figcaption></figure>

After arranging the images in the groups, **we need to assign the images to the variants.**

{% hint style="info" %}
**Note:** Please note that the first image of the group should be assigned to the varian&#x74;**.**
{% endhint %}

<figure><img src="https://4193867224-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnEoAvbObuIUyjIXkMsEx%2Fuploads%2F8iQnVSz9aeauOOrFtiJ6%2FAssign_the_images_to_the_variants.png?alt=media&#x26;token=22596be6-42f3-49d5-bd77-90f8df79afc7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you have multiple images for a variant then you can show the "First", "Second" and "Last" images in the swatch:
{% endhint %}
