> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/product-variant-swatch/display-on-product-page/show-only-images-related-to-the-selected-variant.md).

# Show only images related to the selected variant

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

Before setting this function, make sure:

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

## 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>

## Step-by-step configuration

### <mark style="color:blue;">Step 1. Group image thumbnails by color</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;">Step 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 the GLO Color Swatch app</mark>

* After setting up the group image for all products, go back to our app.
* Click the **Update data** button to sync these latest changes.

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

### <mark style="color:blue;">5. Set Color/Image display style for variant</mark>

To use this feature, your variant option must be displayed as a **Color Swatch** or **Image Swatch**. Variant types such as **Dropdown** and **Button** do not support image grouping.

{% hint style="info" %}
List of styles that support group image function:&#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/x0Xy3ohBqSQV2X2JaxyZ" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">6. Enable the Group image function</mark>

* Navigate to the **Settings** section
* Check on the **Group image** checkbox
* **Select a Shopify theme** that you're using on your store.
* Click **Save** to finish.

<figure><img src="/files/8U2oHUaFaTXF6so7vRMC" alt=""><figcaption></figcaption></figure>

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

When a variant group is selected, all images that do not belong to that group will be hidden, ensuring that customers only see images relevant to the selected variant.

<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 settings:</mark>

Some themes include a built-in feature called **"Hide other variants’ media after selecting a variant."**

If you're using the app's **Group Images** feature, please go to **Online Store → Themes → Customize** and disable this theme setting.

The theme's media filtering feature may conflict with the app's Group Images functionality, which can prevent images from displaying correctly.

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

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

Some newer theme versions may not support this feature yet. If you've followed the setup instructions and it's still not working, please contact our support team for assistance.

For further help, reach out to us at <contact@globo.io>.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.globo.io/product-variant-swatch/display-on-product-page/show-only-images-related-to-the-selected-variant.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.