Show only images related to the selected variant

This feature ensures that only images related to the currently selected product variant are displayed, providing a more relevant and clutter-free browsing experience, follow this step-by-step guide.

Prerequisites *

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

Before group image

After group image

Set up step by step

1. Group image thumbnails by color, or by model

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

E.g: White, Pink, Black, Green

Group image thumbnails

Group image thumbnails

2. Sort variants and group by color

• 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

Sort variants and group by color

3. Select image for main variant

Make sure the main image variant is the first image of a group

Select image for main variant

Select image for main variant

Make sure all primary image variations in a group are the first image of a group, no photo can be different main image

Select image for main variant

4. Sync data in admin app

• 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

Update data

5. Display variant options as color or image

• Need to set variant as color swatch, image swatch. Types like dropdown and button cannot group image.

Types variant support group image:

✅ 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)

Set variant as color swatch, image swatch

6. Enable setting group image

Navigate to the Settings app, tick Group image checkbox and save

Enable setting group image

7. Result

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

Group image by color green

Group image by color pink

Video guide

Video guide

---

Group image still not working?

1. Check your theme customize

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.

2. Contact us

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 [email protected]