# Show only images related to the selected variant

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

Before setting this function, make sure:

* **Your product have color/image variants** (e.g., Red, Blue, Green).
* Your product has thumbnails of different colors/model.

## Demo

<div data-full-width="false"><figure><img src="/files/axEsIqTZOtVL8SL2khTt" alt=""><figcaption><p><strong>Before group image</strong></p></figcaption></figure> <figure><img src="/files/fjMIciXGx3cth6G8fCRy" alt=""><figcaption><p><strong>After group image</strong></p></figcaption></figure></div>

## Set up step by step

### <mark style="color:blue;">1. Group image thumbnails by color, or by model</mark>

First, in the **Shopify Product Admin** you need to rearrange the order of all images in the product image list by group.&#x20;

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

<figure><img src="/files/bFnAO0hnoxALc6AswRpH" alt=""><figcaption><p>Group image thumbnails</p></figcaption></figure>

<figure><img src="/files/1XsyaPUcRihBt66XP9eH" alt=""><figcaption><p>Group image thumbnails</p></figcaption></figure>

### <mark style="color:blue;">2. Sort variants and group by color</mark>

* Once the image group is complete, scroll down to the variation options
* Reorder variants, **variant option displayed as image or color must be placed on top**

<figure><img src="/files/aQycMIVuOrkIKooB9UAV" alt=""><figcaption><p>Sort variants and group by color</p></figcaption></figure>

### <mark style="color:blue;">3. Select image for main variant</mark>&#x20;

> <mark style="color:red;">**Make sure the main image variant is the first image of a group**</mark>

<figure><img src="/files/EXsi1lpkbL61Qld4HmOx" alt=""><figcaption><p>Select image for main variant</p></figcaption></figure>

<figure><img src="/files/M01ZZqIpSdoe9yujxLFH" alt=""><figcaption><p>Select image for main variant</p></figcaption></figure>

> <mark style="color:red;">**Make sure all primary image variations in a group are the first image of a group, no photo can be different main image**</mark>

<figure><img src="/files/XkcCxiy5dKJJvfMrBEMo" alt=""><figcaption><p>Select image for main variant</p></figcaption></figure>

### <mark style="color:blue;">4. Sync data in admin app</mark>

* After setting up the group image for all product, go to admin app **Dashboard**
* **Click Update data** to sync the product data with the app

<figure><img src="/files/TrDHhPVEM7X0meTJwq2h" alt=""><figcaption><p><strong>Update data</strong></p></figcaption></figure>

### <mark style="color:blue;">5. Display variant options as color or image</mark>&#x20;

* Need to set variant as **color swatch**, **image swatch**. Types like <mark style="color:red;">**dropdown and button cannot group image.**</mark>

{% hint style="info" %}
Types variant support group image:&#x20;

✅ Swatch

✅ Pill swatch

✅ Automated swatch

✅ Image swatch with price

✅ Custom swatch with price

✅ Swatch dropdown

✅ Image dropdown

❌ Button (all style button)

❌ Button with price (basic)

❌ Dropdown  (basic)
{% endhint %}

<figure><img src="/files/dmqdtFa3axKgoOxPjmXo" alt=""><figcaption><p>Set variant as <strong>color swatch</strong>, <strong>image swatch</strong></p></figcaption></figure>

### <mark style="color:blue;">6. Enable setting group image</mark>

Navigate to the **Settings** app, tick **Group image checkbox** and save&#x20;

<figure><img src="/files/xdRJFi3Tqse7HuPTiYQF" alt=""><figcaption><p>Enable setting group image</p></figcaption></figure>

### <mark style="color:blue;">7. Result</mark>

All images not from the group variant selected will be discarded.

<figure><img src="/files/ItsNmUJI1riGDkQbZzF3" alt=""><figcaption><p>Group image by color green</p></figcaption></figure>

<figure><img src="/files/FhDhiFNQBq0Q6wDRnuyc" alt=""><figcaption><p>Group image by color pink</p></figcaption></figure>

## Video guide

{% embed url="<https://www.youtube.com/watch?v=P5HZbJIKGJ4>" %}
Video guide
{% endembed %}

***

## Group image still not working?

### <mark style="color:blue;">1. Check your theme customize</mark>

Some themes support this function *"Hide other variants’ media after selecting a variant"*

If you use the app's group image, you need to go to theme -> customize to **turn off** *"Hide other variants’ media after selecting a variant"*.

This function and the app's group image function will conflict with each other.

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

### <mark style="color:blue;">2. Contact us</mark>

Some updated theme versions may not support it yet, you can contact the support team if the setup according to the instructions still does not work

For further assistance, contact us via **<hi@globosoftware.net>**


---

# 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.globo.io/product-variants-swatch/display-on-product-page/show-only-images-related-to-the-selected-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.