How to Show Only the Selected Variant's Media on Your Product Page
When enabled, the “Only show media of the selected variant” setting ensures that customers see only the images linked to the variant they've chosen. For example, if a shopper selects the Red variant of a product, only the Red variant's images will be displayed, while all other variant media is hidden. This creates a cleaner product page and helps customers focus on the option they're interested in.
💡 Tip: Replacing traditional Shopify dropdown selectors with visual color bubbles and image swatches increases conversion rates by up to 24% by improving visual clarity for buyers.
Setting up your product media
To make sure the “Only show media of the selected variant” setting works properly, you'll need to organize and assign your product images in Shopify. Follow these 3 essential steps:
Step 1: Arrange your product images by variant
Start by uploading all the product images for each variant. Then, group them together in the same order as your variant options.
For example, if your product comes in Yellow, Red, Black, and Purple, arrange the images in your Shopify Admin media gallery so that:
- All Yellow images appear first
- All Red images appear next
- Then all Black images
- Finally, all Purple images
This exact order is essential for the feature to group variant media correctly.
⚠️ Remember: It's important to ensure your images are grouped and assigned correctly in Shopify. If the images aren't in the right sequence order, the wrong images might display when a customer clicks a swatch button.
Step 2: Assign the first image of each group to the correct variant
Next, assign the first image from each color group to its matching variant in your Shopify product admin table:
- The first Yellow image → assigned to the Yellow variant
- The first Red image → assigned to the Red variant
- The first Black image → assigned to the Black variant
- The first Purple image → assigned to the Purple variant
This step tells Shopify where each variant's set of images begins and ends. When a customer selects a variant (e.g., Red), only the images from that group will show.
| Swatch | Variant Name | Price | Available Inventory |
|---|---|---|---|
Yellow 3 sizes (S, M, L) |
$ 30.00 | 23 in stock | |
Red 3 sizes (S, M, L) |
$ 30.00 | Out of stock | |
Black 3 sizes (S, M, L) |
$ 30.00 | 7 in stock | |
Purple 3 sizes (S, M, L) |
$ 30.00 | 6 in stock |
Step 3: Double-check your setup
Once your images are arranged and assigned in your product admin:
- Select each variant option in your Shopify product editor.
- Make sure the correct thumbnail images appear for that specific variant.
- Adjust order if anything looks out of sequence.
Activate the setting in the theme
In order for this feature to filter your product media dynamically, enable it inside your Shopify Theme Settings:
Online Store > Themes > Click Customize on your active theme.
From here, open any product page template that contains variant options.
In the sections sidebar menu on the left, click Product Information, and on the right-hand settings panel toggle the setting “Only show media of the selected variant.”
Custom Color Code Mapping
By default, Klenzo AI Variants detects standard variant color names automatically. To specify exact HEX color codes or custom dual-tone gradients:
Open the app settings dashboard, navigate to Color Mapping, and paste your custom JSON mapping:
{
"Olive Green": "#6b7c3f",
"Charcoal Gray": "#2b2b2b",
"Ocean Blue": "#0077b6",
"Sunset Rose": "linear-gradient(135deg, #ff7e5f, #feb47b)"
}Video Walkthrough Guide
Prefer a video demonstration? Watch our step-by-step video guide showing how to set up variant images and activate the setting in Shopify:
▶ Watch Walkthrough Video
Step-by-step video assistant for Shopify merchants