> For the complete documentation index, see [llms.txt](https://docs.optis.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.optis.me/swatch/variant-images/show-images-per-variant.md).

# Show Images per Variant

## ✨ What is Variant Images?

Variant Image allows the product image gallery to display **only the images of the selected variant**, keeping the product page clean and focused.

#### 🛠 How it works

* Each variant is linked to its own set of images
* When a customer selects a variant, the gallery updates instantly
* Images from other variants are hidden until selected

#### 🎯 Use when

* Each variant has its own visual set (e.g. different colors)
* You want a cleaner, less cluttered product gallery
* You want customers to focus on the selected variant

## ⚙️ How to set up

🎥 **Video tutorial:**

Watch this quick guide to see how Variant Images work in action and how to set it up correctly in Shopify.

{% embed url="<https://www.youtube.com/watch?v=9Bqe9zMacHc>" %}

🛠 **Step-by-step**

{% stepper %}
{% step %}
**Enable Variant Images in the app**

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-91b55638a652d5fc610359c3ece24629146931da%2Fvariant-images-enable-toggle.png?alt=media" alt="Enabling Variant Images in the app"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
In Shopify Product admin, group images by variant and place the primary image first

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-da29227ec5e947708e5317815996826a5136fc22%2Fvariant-images-group-media-by-variant.png?alt=media" alt="Shopify product media grouped by variant with the primary image first"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Assign each primary image to its corresponding variant

{% hint style="warning" %}
**Note:** The first image in each image group must be the **same file as the variant image** (select the exact image already uploaded in Shopify Files, not a re-upload)
{% endhint %}

<figure><img src="https://4026661835-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F50cmOdvfYj3qqQaTzKEI%2Fuploads%2Fgit-blob-178064da01ff2e2bd2ddc89d50623a5a6aed691d%2Fvariant-images-gallery-result.png?alt=media" alt="Product gallery showing only the selected variant&#x27;s images"><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

Once completed, the image gallery will automatically update when customers switch variants.

💬 If the variant images don’t behave as expected, just contact us - our support team is happy to help.