# 🖼️ 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="/files/AaBRhB4PFDkxbrltEBe7" alt=""><figcaption></figcaption></figure>
{% endstep %}

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

<figure><img src="/files/oBDCYWasGhX6db0UrzEB" alt=""><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="/files/xg3qqR2EaiVghfW5oTJd" alt=""><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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.optis.me/swatch/variant-images/show-images-per-variant.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.