> 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
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.
Group image by color green
Group image by color pink
There are two ways to show only the images related to the selected variant:
**Option 1:** Use Shopify variant images by grouping product images.
**Option 2:** Assign images directly in the GLO Color Swatch app. This method gives you more flexibility and doesn't require rearranging your Shopify product images.
Choose the option that best fits your workflow.
| Method | Best for |
| ---------------------- | ------------------------------------------------------------------------- |
| Shopify Variant Images | You already manage variant images in Shopify. |
| Assign Images in Globo | You want to control image groups without changing Shopify product images. |
Choose the method that best fits your store.
## Method 1 - Arrange existing **Shopify Variant Images**
Before you begin, make sure:
* Each color or model has its own set of product images.
* Images are uploaded to the Shopify product.
{% stepper %}
{% step %} Group image thumbnails by color
In the Shopify Products admin, arrange your product images so that images belonging to the same variant are placed together.
Example:
White 1 → White 2 → White 3
Pink 1 → Pink 2 → Pink 3
Black 1 → Black 2 → Black 3
Group image thumbnails
Group image thumbnails
{% endstep %}
{% step %} 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
{% endstep %}
{% step %} Select image for main variant
**The image assigned as the variant's main image in Shopify must be the first image in its image 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.**
Select image for main variant
{% endstep %}
{% step %} Sync data in the GLO Color Swatch app
If you've recently updated product images or variants in Shopify, click **Update Data** to synchronize the latest changes with the app.
{% endstep %}
{% step %} Set Color/Image display style for variant
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:
✅ 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 %}
{% endstep %}
{% step %} Enable the Group image function
* 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.
{% endstep %}
{% step %} Video guide
{% embed url="" %}
Video guide
{% endembed %}
{% endstep %}
{% endstepper %}
## Method 2 - Assign Images in the GLO Color Swatch App (New)
If you need more control over which images are displayed for each variant, you can assign images directly in the Globo app instead of relying on Shopify's variant images.
### Steps to assign images
1. Open the product in **GLO Color Swatch**.
2. Go to **Assign Images**.
3. Select a product.
4. Choose the images that should be displayed for a specific variant.
5. Save your changes.
6. Set color/image display style for variant
7. Enable the **Group image** function.
👉 *Watch the video tutorial:*
{% embed url="" %}
### Assign a general image to multiple variants
If you have an image that should be displayed for **every variant** (such as a size chart, product packaging, a lifestyle photo, or a brand image), you only need to upload it once.
Any image left in the **Shared across all variants** section will be displayed regardless of which variant the customer selects.
#### **How to set up**
1. Go to the **Assign Images** section.
2. Open the product you want to adjust.
3. Leave the general image in the **Shared across all variants** section. **Do not assign it to any specific variant.**
4. Click **Save**
#### How It Works
When a customer selects a different variant:
* Variant-specific images will change based on the selected variant.
* Images in the **Shared across all variants** section will remain visible for every variant.
This is useful for images that are not tied to a specific variant, such as:
* Size charts
* Product packaging
* Lifestyle photos
* Brand or promotional images
* Care instructions
> **Tip:** You can combine shared images with variant-specific images. Each variant will display its own assigned images together with any images in the **Shared across all variants** section.
***
## Troubleshooting
1. Check your Theme Customize settings:
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.
2. Still not working?
Please check:
* ✅ App Embed is enabled.
* ✅ Product data has been synced.
* ✅ The variant is displayed as a supported swatch type.
* ✅ Images are grouped correctly.
* ✅ Your theme's "Hide other variants' media" setting is disabled.
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 .