How to Show Only the Selected Variant’s Media on Your Product Page
Introduction
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, helps customers focus on the option they’re interested in.
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 steps:
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 so that:
- All Yellow images appear first
- All Red images appear next
- Then the Black images
- Finally, the Purple images
This order is essential for the feature to work as expected.
Remember: It’s up to you to ensure your images are grouped and assigned correctly. If the images aren’t in the right order, the wrong images might display for a variant. Our support team are unable to assist you with this.
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.
- 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.
3. Double-check your setup
Once your images are arranged and assigned:
- Select each variant in the product editor.
- Make sure the correct images appear for that variant.
- Adjust if anything looks out of order.
Activate The Setting In the Theme.
In order for this feature to work, it will need to be activated in the theme settings. You can navigate to
Online Store > Themes > click Customize on the required theme.
From here search for and open any product that has variants.
As per the image below in sections on the left menu; click product and on the right hand side of the screen toggle the new setting “Only show media of the selected variant”
If you would like to see the process, we have created a handy video to assist you: