> For the complete documentation index, see [llms.txt](https://nextsky.gitbook.io/glozin-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky.gitbook.io/glozin-theme/product-page-settings/variant-image-group.md).

# Variant image group

Color swatches configured with the **Variant Image Group** feature can display images that are related to the selected color variant. This allows customers to see variations in product appearance based on color selection directly on the product page.

Demo product: [Short-Sleeved Thin Cotton T-shirt](https://glozin-demo.myshopify.com/products/short-sleeved-thin-cotton-t-shirt?variant=44340059865241\&preview_theme_id=136058110105)

Below are the step-by-step instructions to set up Variant Image Group:

{% hint style="success" %}
**Step 1:** You guys need to create a [metafield](https://nextsky.gitbook.io/glozin-theme/product-page-settings/pages/dP7t3ajKulECOCy8JZ39#id-8.-image-variant-group) then Go to **Products** select product you would like to use **Variant Image Grouped** , you guys will see the **Use variants image group** option here:
{% endhint %}

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

{% hint style="success" %}
**Step 2:** Then you guys need to select it to true.
{% endhint %}

{% hint style="success" %}
**Step 3:** Copy the colors of **Variant section**
{% endhint %}

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

{% hint style="success" %}
**Step 4:** Click on **image product** -> Paste **name of the variant color** on **“Image alt text”** section of a product image.
{% endhint %}

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