If your Shopify product image does not change when a shopper selects a variant, the cause is usually one of three things: the variant has no image assigned, a theme setting or app is controlling the gallery, or the product section you use does not support variant images. The first two take a few minutes to fix in the admin. The third needs a theme change.
Horizon and Dawn, Shopify's most popular free themes, both support variant images. If you use another theme, first confirm that it supports the feature, then check your setup.
The same causes are behind several related symptoms:
- The product image is not changing or not updating when a shopper selects a color or size.
- The gallery does not scroll to the selected variant's image.
- The variant image is not showing on the product page at all.
- Clicking a variant image thumbnail does not select that variant.
Why the variant image does not change or update
Shopify stores one image per variant. Your theme decides what the product gallery does with it. When a shopper selects a variant, a theme that supports variant images reads that variant's image and moves the gallery to it. If any link in that chain is missing, the photo stays the same.
- No variant image. The variant has no image assigned, so there is nothing to switch to.
- The image is hidden or cut off. A gallery setting, a display limit, or the media order keeps the variant image off the page.
- An app controls the gallery. A gallery, swatch, or variant image app replaces the theme's behavior.
- The section does not support it. The product section on your template never reads the variant image.
Check whether your theme supports variant images
Start with your theme. Shopify's popular free themes, Horizon and Dawn, both support variant images in their product section. Horizon places the selected variant's image first in the gallery, and Dawn moves the gallery to it. If you use either theme, skip to the next section and check your product data and settings.
If you use another theme, confirm that it supports the feature before changing anything else:
- Check the theme's documentation or demo store. If a demo product switches images when you pick a variant, the theme has the feature.
- Compare with a free theme. Add Horizon to your theme library, preview it, and open the same product. Previewing does not publish anything. If the image switches in Horizon and not in your theme, your product data is fine and the cause is on the theme side.
Check the section as well as the theme. Many purchased themes, especially conversion-focused and dropshipping themes, include several product sections: a standard one plus alternative buy box, bundle, and quantity-break layouts. The feature can exist in the standard section and be missing from an alternative one. We ran into this on a client store built on a purchased theme. The theme's standard product section switched variant images, but none of its six buy box sections did. The store used a buy box for its richer layout, so the images never changed. Switching back to the standard section would have lost that layout, so we added variant image switching to the buy box section instead.
To see which section your product page uses, open the product template in the theme editor and look at the product section's name in the sidebar.
In Horizon, the default product template uses the Product information section, which supports variant images.
If the section does not support variant images, go to When the section cannot switch images below. If it does, continue with the setup checks.
Check that each variant has an image
In the admin, open the product, find the Variants section, and click the image icon next to each variant. Pick an image from the product's media and save.
If a product has Color and Size options, assign the color's image to every size of that color. A variant image that is assigned only to "Black / S" will not appear when a shopper selects "Black / M".
Every size of Black uses the Black image, so the gallery switches no matter which size a shopper picks.
Then compare the image count in the admin with the count in your storefront gallery. Some themes show only the first several images, and images added by a spreadsheet import often land at the end of the list. If the variant image sits past the cutoff, move it higher in the product media.
Check gallery settings and apps
Some themes include a setting that hides the images of other variants. In Horizon it is called Hide unselected variant media, on the product media block. With it on, shoppers see only the selected variant's image plus images assigned to no variant. Other themes use different names, so read the gallery settings in your theme editor.
If you use a gallery, swatch, or variant image app, disable its theme block or app embed on a duplicate theme and test again. If the image starts switching, the app is the cause, and its support team is the right next contact.
When the section cannot switch images
If your product section does not support variant images, you have four options:
- Switch to the theme's standard product section. This restores variant images with no code, but you lose the alternative section's layout.
- Ask the theme developer. A newer theme version may add the feature to the section you use.
- Install a variant image app. This works without code, but it adds a script and may conflict with the theme's own gallery.
- Add the feature to your section. This keeps your layout and avoids another app subscription.
Adding the feature means the section has to know each variant's image, move the gallery when a shopper selects an option, and select the matching variant when a shopper clicks a variant thumbnail. Links that include a ?variant= parameter should also open on the right image. The change touches the product form, so test it on an unpublished copy of your theme before publishing.
That was the scope of our fix on the client's buy box section. We also found that its gallery showed at most 10 images, so on a product with 22 images and 14 variants, most variant images never reached the page. The fix made sure every variant image is rendered, whatever the gallery limit.
If you would rather have it done for you, we can find the cause and get your variant images switching, tested on a duplicate theme before anything goes live.
FAQ
Can a Shopify variant have more than one image?
No. Shopify allows one image per variant. To show a set of photos per color, the theme has to group images another way. See how we built color-based image groups in Horizon.
Why does clicking a variant image not select the variant?
The gallery and the variant picker are separate parts of the page. Selecting a variant can move the gallery, but clicking a thumbnail only selects the matching variant if the theme links the two in both directions. Sections without variant image support usually only scroll the gallery.
Why does a variant link open on the wrong image?
The theme may select the first option value on page load instead of the variant in the ?variant= parameter. Themes that support variant images read the selected variant when the page loads; sections without the feature usually do not.
Do I need an app to show variant images?
Usually not. Horizon and Dawn support variant images in their product section, and so do the standard product sections of most current themes. An app or a theme change is only needed when the section you use lacks the feature.