# 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FMhoGJyho5Xn2wZnfgHtX%2Fimage.png?alt=media&#x26;token=e4093055-a15a-44e5-bf9e-bb40086f7575" alt=""><figcaption><p><strong>Before group image</strong></p></figcaption></figure> <figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FJawvpZ6tCjsiRAVkU0sM%2Fimage.png?alt=media&#x26;token=1c4fc363-3098-4f08-b38b-87b99e4403c0" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FKyOo6z1iTHxW4nqiq1ny%2Fimage.png?alt=media&#x26;token=761f68c3-d5f5-40fe-af5c-fedad5020f2b" alt=""><figcaption><p>Group image thumbnails</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FU9x7K2JHOJW3r8Sy6jby%2Fimage.png?alt=media&#x26;token=23e1b5e0-a4f7-4088-bad0-4f3d49e62907" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FasA9rX8kUiwSHJXPfCMH%2Fimage.png?alt=media&#x26;token=9a02b7db-21ad-419b-861b-909ec6b62208" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FS1RzjpeIRFuqzkaEVkQ0%2Fimage.png?alt=media&#x26;token=1520a611-0df3-4524-9051-7b5ced55930e" alt=""><figcaption><p>Select image for main variant</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FuSgBdTJx1ZnMYBGKkSLE%2Fimage.png?alt=media&#x26;token=a8963f5e-3665-478e-9e48-0dec89a282f2" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FKSc4ywyvGdlM5J9iLEd9%2Fimage.png?alt=media&#x26;token=a4b852b3-97cb-49e7-8b81-4e10522063af" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FPGthFGOauKeifWJfT3Nf%2Fimage.png?alt=media&#x26;token=b1015e9c-34ab-4219-ba6a-f6c5f09bb335" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FRBS60oiYD4yxjFgG0G9v%2Fimage.png?alt=media&#x26;token=9bc1e376-0079-4750-8983-4e77f0b739b5" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FV57KzYeNVzo0DKj4aFPH%2Fimage.png?alt=media&#x26;token=36686549-d50d-48d5-96c6-6052410f234b" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2F85w8BBCzZxSg16DH17wQ%2Fimage.png?alt=media&#x26;token=2ad9c619-a8d7-4a26-a655-9adc0b328b02" alt=""><figcaption><p>Group image by color green</p></figcaption></figure>

<figure><img src="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FhhlEl9yRu9v9yzFhe4g5%2Fimage.png?alt=media&#x26;token=f3be12e3-cd1d-4e7d-ad51-b8a0502ebde3" 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="https://3138853960-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDsbeTbRNMPUo58YEXkMj%2Fuploads%2FE1ohIoPnEY93NbHe1lG8%2Fimage.png?alt=media&#x26;token=1c10242d-f533-45e5-a289-cfca29bbe623" 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>**