The customer clicks on the red swatch for the product. The image remains blue throughout. The customer leaves the site. This bug, known as Shopify variant image not changing on click, is one of the most common problems we encounter when managing a Shopify storefront and is typically caused by one of seven factors. The good news is that most of these fixable issues only take 5 minutes to resolve, once you know where to look.
The post goes through the causes of the variant change event being hijacked from the product editor in order from simplest to most complicated. For each cause it describes how to identify the cause, how to fix it and provides either an explanation of how to manually fix it or details of a tool/app that can do the fix for you if manual fixing is too invasive and time consuming.
Table of contents
- Variant has no image assigned
- Image assigned but not in the product gallery
- Theme is using “featured image only” mode
- Theme JS hijacks the variant change event
- Page builder block overrides the native gallery
- Cached page serving stale variant data
- App conflict between two variant image apps
- The 5-minute shortcut for stores with hundreds of products
- FAQ
1. The variant has no image assigned
This is the #1 cause of “variant image not changing” reports (accounting for about 60% of reports total), and is due to Shopify only natively supporting 1 image per variant. If the product’s images aren’t set to variants properly, when a shopper clicks on a swatch, the gallery won’t have anything to show, so it defaults back to the product’s featured image.
How to detect it. Open the product in the Shopify admin. Scroll to Variants. Click into the red variant. Look at the Media section. If the Image field is empty, this is your bug.
How to fix it. Select the red product image from the gallery for the Image field on the variant page and save. Refresh the storefront and it should work. If you have 100s of products, this method is tedious, so see the shortcut below. Or use our variant image checker tool to find every product missing variant images at once.
2. The image is assigned but not in the gallery
Shopify will ignore variant images if the URL of the variant image does not exist in the image gallery for a product. Typically this is a result of a failed or incomplete import from a CSV, for example if the URL from the Variant Image column does not exist in the Image Src column.
How to detect it. look at the image for the variant in the store variant chooser. If the thumbnail image appears to be there correctly but selecting the variant does not change the store variant view, then check the gallery on the product page for this product. Is the exact image in the bug present in the main gallery? No. Variant is pointing to an orphaned url.
How to fix it. Re-upload the image to the main gallery for the product, then set the image as the variant image. Save the changes. More on this quirk in the blog post bulk variant images via CSV.
3. The theme is using “featured image only” mode
Some Shopify Themes have a feature built in that forces the product gallery to only show the featured image when a variant of a product is changed. This means all the shopper sees is the new featured image of the different color (or size etc) but they never get to see the rest of the product images such as the lifestyle shots, the details, the back of the product etc.
How to detect it. Open Online Store, then Themes, then Customize. Find the Product page section. Look for a setting called “Show featured image only on variant change”, “Use featured image”, or similar. If it is enabled, that is the cause.
How to fix it. Disable the setting. Save. Reload the storefront. If your theme does not expose this setting in the customizer (some paid themes hide it), you have two options: Go through the theme’s code (not recommended), or use a variant image app that will override the native gallery and behave correctly. The demo store shows what the multi image per variant looks like when fixed properly.
4. Theme JavaScript is hijacking the variant change event
This one is really frustrating to fix. Some themes, as well as many of the page builders (and most page builders), attach additional functionality to the variant selector. This additional JavaScript usually binds to the change event of the variant selector. By the time Shopify’s gallery script tries to update the gallery, the event has already been caught and Shopify’s script doesn’t know that anything happened with the variant. In the admin, the price and SKU etc will update fine, but the gallery won’t fade in or out at all.
How to detect it. Open the product page in your browser. Right click and choose Inspect. Open the Console tab and click a swatch. If there are no errors but also no fetch requests for new image data, the click event is being swallowed somewhere upstream.
How to fix it. The cleanest fix is to use a variant image app that listens for both the native variant change event AND the theme’s custom event. Rubik Variant Images hooks both, so it works on stock Dawn as well as paid themes. And it works on GemPages pages, PageFly widgets, EComposer widgets, Beae widgets, Foxify widgets, Instant widgets and Replo widgets without having to write custom JS code.
5. A page builder block has replaced the native gallery
If you built your product page with a page builder such as GemPages, PageFly, EComposer, Instant, Beae, Foxify, or Replo then the page builder probably comes with a product gallery component. It is possible that the component is not actually set up to fire the Shopify variant change event, depending on the widget that you used as your gallery.
How to detect it. Open up your page builder. Look for your gallery element within your product page. Is it set to dynamic product gallery (as shown in the animation) or the standard image gallery with manual images uploaded? The standard image galleries will not behave as expected when selecting variants.
How to fix it. Replace manual image gallery with dynamic product gallery element or a variant gallery in your page builder. If your page builder does not support variant-aware gallery elements yet, you can insert a variant image app into your page and use its blocks instead. We have the tutorials on how to fix it for different page builders: GemPages, PageFly, Beae, etc.
6. The page is cached and serving stale variant data
Shopify caches the product page heavily. Since you fixed the variant images in the admin, the issue still persists in the storefront. Any of Cloudflare, your theme’s edge cache, or the Shopify Content Delivery Network could be serving up cached, stale HTML for several minutes.
How to detect it. To test for product variant image caching, open the product page in an incognito browser window. Add a ?nocache=1 query string to the URL. If images display correctly after doing this, it typically means that a cache is in use.
How to fix it. Sometimes, you have to wait 5-10 minutes. If you have a CDN like Cloudflare cache in front of your Shopify store, just manually purge that URL from the CDN settings page. Usually, the cache will expire naturally after about 15 minutes.
7. Two variant image apps are fighting each other
If you’ve installed a variant image app and then installed another app (or color swatch app that accesses the gallery), then the two apps may attach handlers to the same nodes on the page and cancel each other out. The shopper tries to click to move to the next image, and both apps try to update the gallery, but neither app succeeds.
How to detect it. The easiest way to identify conflicts is to visit your Shopify admin, under Apps. Look for any installed applications that relate to variant options, product swatches, colour swatches, image filtering, or product image galleries. In most cases, having more than one application installed that serve these purposes will indicate a potential conflict.
How to fix it. Uninstall the older, less-maintained app and keep the one with the better rating, faster support, and Built for Shopify badge – test on your store immediately after uninstalling. If you can’t decide which is the better variant image app, read our 2026 best variant image app comparison.
The 5-minute shortcut for stores with hundreds of products
Fixing this product by product is doable for a small product catalog. But as you add more products, the fix needs to scale. For 200 products, fixing this manually is probably fast enough. For 500 products, a simple script would work nicely. And for 5,000 products, you would clearly need some automation.
- AI auto-assign per product. Rubik Variant Images uses Claude AI to read each product’s name, variant titles, image filenames, and image alt text, then matches images to variants automatically. Per product, one click each. Fast for the long tail after a CSV import.
- Bulk assign by image order. Upload your photos in color groups (5 blue, then 5 red, then 5 green) and let the app use the gallery boundaries to map images to variants. No filename matching, no manual tagging. Works at the scale of thousands of products. The featured image acts as the group separator.
For stores that list same product in multiple separate listings (one product per color variant) Variant Images are NOT the answer. Instead you need a combined listing that allows you to create swatches on the collection pages for the individual product variants. Read our combined listings app comparison to help you decide which side of the line your store falls on.
See the live demo store, watch the tutorial video, or read the getting started guide.
FAQ
Why does my Shopify variant image not change when I click the swatch?
The most common reason for this bug is that the variant for which the image is not loaded does not have an image assigned in the Shopify admin. To fix, open the product and go to the variant in question, and set an Image for it. Then, save the product. If the image still does not load after doing this, the cause is probably a theme setting that locks the gallery to the featured image instead of variants, or a conflict in theme JS that swallows the variant change event.
Can Shopify show multiple images per variant natively?
No. Shopify natively allows one image per variant. To show multiple images per variant (front, back, side, detail, lifestyle) you need a third-party app. The full walkthrough is in our native vs apps comparison.
Does this affect the Shopify Horizon, Dawn, or Prestige themes?
Yes. All three themes can hit causes 1, 2, 3 and 4 on this list. Dawn and Horizon expose the “featured image only” setting directly in the customizer. Prestige hides it deeper. Most paid themes deal out similar settings with different names.
Will this fix work with GemPages, PageFly, or EComposer?
Yes, but you need to use the dynamic product gallery component in your page builder, not a static image gallery. Rubik Variant Images supports all 7 page builders – Beae, EComposer, Foxify, GemPages, Instant, PageFly, and Replo.
How do I check which variants are missing images at scale?
Use a free online audit tool such as our variant image checker. This tool will check all of the products in your store for you and advise of any variants which have no images attached. It took around 30 seconds to scan 500 products and 3-5 minutes to scan 5,000 products.
Does this issue hurt conversion rates?
Variants are displayed as a list of color swatches. Most customers expect to select a color swatch and see the image update to the selected color, if the product variant includes an image. If the image does not change, most customers will assume the product is defective or the color is not available and leave the product page. Stores that implement variant image swatches see a measurable increase in product page engagement and conversion. Read more in our variant image swatches conversion guide.
What if I have separate products for each color instead of variants?
Then you don’t have a variant image problem at all. You have a product grouping problem. Connect the separate products with combined listings displaying color swatches on the collection page and product page. See the combined listings explainer for more information on this feature.
