A shopper clicks Black, the price changes, but the product gallery still shows the white version.
If that is happening on your Shopify store, start by checking the variant's assigned media. If the assignment is correct, confirm whether the selected variant itself is changing. When the price, availability, or variant ID updates but the image does not, the fault is usually in the product gallery, variant picker, app integration, or theme JavaScript rather than the product data.
Shopify themes are expected to update relevant product information, including product media, when a shopper selects another variant.
Quick diagnosis: what does the symptom tell you?
Before changing settings or editing code, reproduce the issue once and note exactly what still works.
| What you see | Where to look first |
|---|---|
| Price and image both stay unchanged | Variant picker or product form |
| Price changes, image does not | Product gallery or theme JavaScript |
| Only one product is affected | Product setup or variant media |
| Many products are affected | Theme, app, or shared custom code |
| Native variant picker works, custom swatches do not | Swatch implementation |
| Problem started after a theme update | Theme customization or changed markup |
| Problem started after an app change | App conflict or script interaction |
| Correct image loads on refresh but not when clicking an option | Front-end variant-change logic |
Also ask one simple question before you start troubleshooting:
What changed shortly before the issue appeared?
A theme update, app installation, new swatch feature, product import, gallery customization, or bulk product edit can narrow the search immediately.
1. Check the image assigned to the affected variant
Start in Shopify Admin rather than the theme editor.
Open:
Products → affected product → Variants
Select one of the variants that is showing the wrong image and inspect its assigned media.
For example, a shirt may have:
-
White / Small
-
White / Medium
-
Navy / Small
-
Navy / Medium
-
Black / Small
-
Black / Medium
If the Navy / Medium variant has no navy image assigned, the storefront cannot switch to the expected image when that variant is selected.
Shopify lets you associate an image with an individual product variant. Each variant can have one directly assigned image.
If the image is missing:
-
Assign the correct product image to the variant.
-
Save the product.
-
Reload the storefront.
-
Select the same variant again.
Do this before changing theme code.
The image exists, but is it the right one?
A wrong assignment can look like a theme bug.
Imagine Navy / Medium is accidentally mapped to the white product image. Shopify can change the variant correctly and still show what looks like a broken result.
To test the mapping, temporarily assign a very different image to one affected variant.
If that test image appears on the storefront, the switching logic is working. The original mapping was the problem.
If the image still refuses to change, move to the next test.
2. Confirm that Shopify is actually selecting another variant
Change the color, size, or option on the product page and watch more than the image.
Check whether any of these update:
-
price
-
compare-at price
-
availability
-
SKU, if displayed
-
selected option values
-
variant-specific content
-
variant parameter in the URL, if your theme exposes it
Suppose a shopper changes White / Medium to Black / Medium.
The price changes. Availability changes. The Black swatch becomes selected.
The image stays white.
That tells you something useful: the storefront is probably resolving the new variant, but the media component is not following it.
At that point, spending more time on the variant data is unlikely to help. Focus on the connection between the selected variant and the product gallery.
3. Compare the native variant picker with custom swatches
Custom selectors are a common source of variant-image issues.
A store may use:
-
color swatches
-
image swatches
-
pill buttons
-
custom size selectors
-
page-builder controls
-
product-option widgets
These controls still need to resolve the correct Shopify variant.
For a product with both Color and Size, selecting Navy is only part of the job. The storefront may need to resolve:
Color: Navy + Size: Medium → Navy / Medium variant
Only then can the product gallery switch to the media associated with that variant.
Run this comparison
Test the product with the theme's standard variant picker where possible.
If the standard picker changes the image correctly but your custom swatches do not, the product media is probably fine.
The issue is more likely inside the swatch implementation.
Common causes include:
-
custom JavaScript targeting an old selector
-
swatch markup changed after a theme update
-
page-builder elements replacing the native product form
-
custom options not triggering the theme's expected variant event
-
an app controlling the picker separately from the gallery
A swatch can look selected without the rest of the product page receiving the correct variant state.
4. Check the scope: one product or the whole store?
Test at least two or three products before editing anything.
This is one of the fastest ways to narrow down the cause.
If only one product is affected
Start with:
-
variant image assignments
-
product media
-
option combinations
-
imported product data
-
product-specific template settings
-
product-specific metafields
-
app settings applied only to that product
A single-product issue usually points toward product data or a product-specific configuration.
If many products are affected
Look at shared components:
-
active theme
-
product template
-
variant picker
-
media gallery
-
app embeds
-
custom scripts
-
recent theme changes
A bad image assignment on one product should not normally break every product page.
A shared theme or JavaScript issue can.
5. Check whether an app is modifying the product form or gallery
Several app categories can touch variant selection or product media:
-
color swatch apps
-
product-option apps
-
variant-image apps
-
gallery apps
-
personalization tools
-
bundle apps
-
page builders
-
product upsell tools
The app does not have to be “broken” for a conflict to occur.
A theme may listen for a variant change and then move the gallery to the variant's featured media. An app may replace the original picker with its own control.
Both pieces can work independently and still fail when combined.
If the issue started after an app was installed, updated, enabled, or reconfigured, test that dependency carefully.
Do not disable several apps and remove theme code at the same time. You will lose the ability to tell which change affected the result.
Change one thing. Reproduce the same customer action. Record what changed.
For a broader troubleshooting process, use the Shopify App Conflict Checklist.
6. Compare the current theme with another theme
If the product data looks correct, test the same product outside the current theme.
A previous theme version or a clean theme can provide a useful control.
You do not need to publish it.
Preview the product and select the same variants.
Current theme fails, comparison theme works
Focus on:
-
custom variant-picker code
-
product-gallery changes
-
app integrations
-
copied theme snippets
-
JavaScript added to the current theme
-
differences introduced by a theme update
Both themes fail
Go back to:
-
variant media assignment
-
app-level behavior
-
product data
-
external scripts or integrations affecting both themes
This test is especially useful after a theme update.
Theme updates can change element IDs, CSS classes, product-gallery markup, variant-picker components, and JavaScript behavior. Custom code written against an older version may continue loading while no longer targeting the right part of the page.
Always make experimental code changes on a duplicate theme, not the live store.
7. Test a direct variant state against an interactive change
This test helps separate variant data from variant-change behavior.
First, load the product with the affected variant already selected.
On themes that update the URL when variants change, you can often select the variant, copy that URL, and reload it.
Then compare two actions:
Test A: Load the page directly with the affected variant selected.
Test B: Load another variant first, then click the option that switches to the affected variant.
Correct image in Test A, wrong image in Test B
The variant and its media are probably available.
The problem appears during the interactive switch.
Investigate:
-
variant picker
-
gallery change handler
-
custom swatches
-
theme JavaScript
-
apps modifying the product form
Wrong image in both tests
Return to the product data and assigned media.
The gallery cannot switch to the correct image if the underlying variant is not linked to it properly.
8. Check the product gallery and JavaScript
Once the product data and variant selection are confirmed, inspect the media layer.
The expected flow is:
Customer chooses an option → Shopify resolves the selected variant → product state changes → gallery activates the relevant media
If the first three steps work and the last one does not, the break is probably in the gallery logic.
Common symptoms include:
-
price updates while the hero image stays fixed
-
swatch changes but gallery position does not
-
correct image appears only after a page refresh
-
one variant works while another does not
-
gallery stops responding after another product-page interaction
-
browser console reports an error when the option changes
A useful browser test
On a duplicate theme or test environment:
-
Open the affected product page.
-
Open the browser developer console.
-
Clear existing messages.
-
Select the affected variant.
-
Look for a new JavaScript error.
The first error shown after the interaction is often more useful than the last one.
A script elsewhere on the product page can throw an error and stop later gallery code from running. The visible image issue may be the consequence, not the original fault.
Avoid copying a random variant-change script from an old forum thread into the theme. Variant and media handling differs between themes and theme versions.
If the problem is in custom theme code, Shopify development support is usually more appropriate than adding another app on top of the existing behavior.
Multiple images per variant is a different requirement
There is an important distinction between switching the featured image and filtering an entire gallery by variant.
These are not the same feature.
Requirement 1
A shopper selects Navy.
The main product image changes from White to Navy.
That is standard variant-image switching.
Requirement 2
A shopper selects Navy.
The gallery now shows five navy images and hides every white and black image.
That is variant-specific media grouping or filtering.
Shopify supports one directly assigned image for an individual variant. Other images can still exist in the product's media gallery.
If you want several images tied visually to one color or option, you may need theme logic, a suitable app, or a different catalog structure.
Do not troubleshoot a multi-image gallery requirement as if the basic variant image switch is broken.
The fastest troubleshooting order
For most stores, this order avoids unnecessary code changes:
1. Variant media
Is the correct image assigned?
2. Variant state
Does the selected variant actually change?
3. Scope
Is one product affected or many?
4. Picker
Does the native selector behave differently from custom swatches?
5. Recent changes
Did the issue start after an app, theme update, or customization?
6. Theme comparison
Does the same product work on another theme?
7. Direct variant test
Does the right image appear when the variant is already selected on page load?
8. Gallery and JavaScript
Is the selected variant reaching the media component?
That sequence starts with reversible checks and leaves code changes until the evidence points there.
When does this need a Shopify developer?
You probably do not need development work when the only problem is a missing or incorrectly assigned variant image.
Developer help makes more sense when:
-
the correct image is assigned but never activates
-
price changes while product media stays on the previous variant
-
native selectors work but custom swatches fail
-
the problem began after a theme update
-
the issue affects several products using the same template
-
an app and theme both modify variant behavior
-
the gallery uses custom JavaScript
-
console errors appear during variant selection
-
fixing one product-page component breaks another
At that point, the useful question is no longer “Why won't the image change?”
It is:
Where does the selected variant stop reaching the product gallery?
Once that point is identified, the fix can usually stay focused on the affected component instead of rebuilding the product page.
For theme-specific issues, see Shopify theme customization services. For custom product logic, gallery behavior, or JavaScript problems, use Shopify development services.
Common questions
Why does the Shopify price change but the product image stay the same?
If the price changes, the storefront is likely resolving a different variant successfully. Check the assigned variant image first. If it is correct, investigate the product gallery, custom swatches, app integrations, or theme JavaScript responsible for activating the selected variant's media.
Can every Shopify variant have a different image?
Yes. Shopify lets you assign an image to an individual product variant.
A setup where one color needs several dedicated gallery images is different from assigning one featured image to a variant and may require additional theme or app logic.
Why doesn't the image change when I click a color swatch?
The swatch may be updating visually without triggering the variant behavior expected by the theme.
Compare it with the native variant picker. If the native picker changes the image correctly, focus on the custom swatch code or the app that provides it.
Can a Shopify app cause variant images to stop changing?
Yes, particularly when an app modifies the variant picker, product form, swatches, or media gallery.
The issue can also be a compatibility conflict between the app and the current theme rather than a fault in the app itself.
Why did this start after a Shopify theme update?
The updated theme may use different markup, selectors, gallery components, or JavaScript.
Custom code or app integrations built around the older theme structure may need to be updated so they connect to the new variant and media components correctly.
Fix the broken layer, not everything around it
A Shopify variant image that does not change can come from several different places, but the storefront usually gives you enough clues to narrow it down.
If the price changes, variant selection is probably working. If the native picker works, inspect the custom swatches. If only one product fails, start with its data. If the old theme works, compare the theme code.
The goal is not to keep adding fixes until the image moves.
It is to find the exact point where the selected variant stops reaching the product gallery.
If your product setup is correct but the gallery still does not follow the selected variant, Ecomheroes can review the theme, variant picker, app integrations, and custom code through its Shopify development services.