How to fix color swatch and variant image conflicts on Shopify
User clicks on the “Red” swatch. Variant ‘Single Color – Blue Hoodie’ is displayed in the product gallery instead of the expected ‘Single Color – Red Hoodie’. This bug occurs quite frequently and is rather trivial. The common root cause for this bug is that the image set for the variant does not correspond to the swatch that activates the variant.
There are several forms of Color swatch and variant image conflicts. The swatch color is correct, but incorrect gallery image is loaded. Correct image is loaded, but swatch color does not match product color. Two apps competing to control the variant picker. Theme update silently breaks swatch/image connection. Each cause has a distinct path to resolution.
This guide explains all the swatch-image conflict types, how to detect them, and how to fix each of them permanently.
In this post
- Types of swatch-image conflicts
- Fix 1: Wrong image loads when swatch is clicked
- Fix 2: Swatch color does not match product photo
- Fix 3: App conflicts (two apps controlling swatches)
- Fix 4: Theme update broke swatch-image connection
- Fix 5: Multiple option types causing image confusion
- Preventing conflicts going forward
- FAQ
Types of swatch-image conflicts
Before fixing anything, identify which type of conflict you have:
| Symptom | Likely cause | Fix |
|---|---|---|
| Click “Red” swatch, blue image loads | Wrong image assigned to variant | Fix 1 |
| Swatch shows bright red, product is dark burgundy | Swatch color hex does not match actual product | Fix 2 |
| Swatches render twice or flicker | Two apps both injecting swatch pickers | Fix 3 |
| Swatches worked yesterday, broken today | Theme update changed variant picker markup | Fix 4 |
| Selecting “Size: Large” changes the product image | Images assigned to wrong option type | Fix 5 |
Fix 1: Wrong image loads when swatch is clicked
This is the most common conflict. The swatch picker works fine, but clicking a color shows the wrong product image. The root cause is almost always incorrect image-to-variant assignment in the Shopify admin.
Go to Products and check every product, especially every variant. Go to the product and scroll down to the Variants and click on each one to make sure the image is the correct colour for that option. So a “Red” option should have a red product image. Sounds simple enough but on some of the stores with 50+ products this can get mixed up.
Common scenarios that cause this:
- Images uploaded in wrong order. You uploaded blue first, red second, but assigned them in the opposite order. The variant says “Red” but points to the blue image.
- Bulk import mismatch. CSV imports or bulk operations can assign images to the wrong variants if the column mapping is off by one row.
- Duplicate images. Two nearly identical images (slightly different lighting or crop) and the wrong one got assigned.
- No image assigned at all. The variant has no assigned image, so Shopify falls back to the featured image (which might be a different color).
For large stores with hundreds or thousands of products, manually checking every product variant is not realistic. These tools for bulk assigning variant images, and for having AI automatically assign them for you, take a lot of work off of the store owner and also can catch matches that a human would miss by relying on the filename, alt text, and the name of the product variant.
Fix 2: Swatch color does not match product photo
Image appears okay, but circle swatches have different colour to actual product. The “Red” swatch has a bright cherry red colour to it whereas the actual product image appears to be a dark burgundy colour, which creates suspicion.
Most themes generate swatch colors based off the variant option name. For example, in Shopify, “Red” will always map to standard CSS red (#FF0000). However, your theme and the products in your store may actually have a dark red (#8B0000) or a crimson (#DC143C) version of red, etc. The theme doesn’t know the specifics of your product colors.
Three ways to fix this:
- Custom CSS color map. Override the theme’s default color with your exact hex value. Add to your theme CSS:
.swatch[data-value="Red"] { background-color: #8B0000; } - Image swatches instead of color swatches. Use a cropped photo of the actual product as the swatch instead of a flat color circle. This guarantees the swatch matches the product because it IS the product. Image swatches work best for patterns, textures, or colors that are hard to represent with a single hex value.
- Use an app with custom swatch colors. Rubik Variant Images lets you set exact hex colors or custom images per swatch, overriding the theme’s default color mapping. You get pixel-perfect color accuracy without editing theme code.
Fix 3: App conflicts (two apps controlling swatches)
This one is ugly. Two apps trying to render the variant picker interfere with each other, resulting in duplicate swatches, flickering on page load, or the two apps interfering with each other’s image assignments.
Common conflict pairs:
- A color swatch app + a product page builder that also renders swatches
- Two different swatch/variant image apps installed simultaneously
- A theme’s built-in swatch feature + a third-party swatch app
The fix: pick one app to control the variant picker and disable or remove the other. Do not run two swatch apps at the same time. If your theme has a built-in swatch feature and you also use an app, disable the theme’s swatches in the theme settings (usually under “Product page” or “Variant picker” settings).
How to diagnose which app is causing the issue: temporarily disable each app one at a time (from Apps > your app > disable). Refresh the product page after each disable. When the conflict disappears, you found the culprit.
Fix 4: Theme update broke swatch-image connection
Updated theme causing swatches to stop changing the product image, incorrectly display the product image, or causing swatch picker to completely disappear.
Theme updates can change:
- CSS class names that swatch apps target
- JavaScript event names for variant changes
- The HTML structure of the variant picker
- The product gallery’s image-swap logic
After an update to custom CSS or JavaScript for swatches, ensure that all target selectors are still correct. Also, if using an app check if the app has been updated to support the new version of the themes. Most mainstream swatch apps update to support the new version of themes within a day or so of a major theme release.
Prevention tip: Duplicate the theme (Themes > Actions > Duplicate) before making any changes, update the duplicate, test for correct swatches on the preview URL and only publish the updated theme once you have confirmed the swatches are working correctly.
Fix 5: Multiple option types causing image confusion
Products with multiple option types such as (Color|Size, Color|Material) can make the image-swap logic a bit confusing for customers. Only the Color option should change the product image, and selecting “Large” instead of “Medium” should not change the photo. However, some themes may treat all options equally and swap the image on any option change.
The fix depends on your setup:
- Native Shopify: Shopify only swaps to the variant’s assigned image. If you assign images only to color-based variants (not size-based), the image only changes on color selection. Make sure size variants do not have separate images assigned.
- Theme with custom logic: Some themes have a setting for “which option controls the gallery.” Check your theme settings under the product section. Look for “Option that changes images” or “Gallery source option.”
- App-based: Swatch apps like Rubik Variant Images let you configure which option type triggers image filtering, so selecting Size never changes the gallery while selecting Color always does.
Preventing conflicts going forward
- Name your image files clearly. Use
product-name-red.jpg, notIMG_4532.jpg. This makes mismatches obvious during review and helps apps auto-match correctly. - Audit variant images quarterly. As you add products and update photos, assignments can drift. A quick scan every few months catches issues before customers do.
- Test after every theme update. Open your top 5 products, click through every color swatch, and verify the correct image loads.
- Use one swatch solution, not two. Pick either your theme’s built-in swatches or a dedicated app. Running both is asking for trouble.
- Use image swatches for ambiguous colors. “Sage”, “Dusty Rose”, “Heather” mean different things to different people. An image swatch removes all ambiguity.
For stores using separate products per color, Rubik Combined Listings avoids most of these conflicts entirely. Each product has its own images and its own gallery. Swatches on the collection and product pages link the products together, but there is no variant-image assignment to get wrong.
“Hands Down the best customer support of all the variation/swatch apps I have used till date. The app does everything. From individual variant gallery to really detailed customizable swatch’s. All in a single app. Originally we used to use two different apps so this is so much more cost efficient for us.”
Bellissima Covers, India, Rubik Variant Images on the Shopify App Store
See the live demo store, watch the variant image demo, or read the getting started guide.
Frequently asked questions
Why does clicking a color swatch show the wrong product image?
The most common error with this issue is that the image is assigned to the wrong color variant. Check the product show case and make sure the correct image is assigned to the correct variant. If no image is assigned to a variant, by default the store will default to the featured image for that product.
Can two swatch apps run on the same Shopify store?
Technically yes, but can cause some headaches like making two pickers simultaneously to create swatches, having things flicker on screen, or have one application override another. Stick with one swatch solution (i.e. use the swatches in your theme or a swatch application) and disable the other swatch solution.
My swatches broke after a theme update. What do I do?
Theme updates can change CSS class names, JavaScript events, or the HTML structure of a swatch app. Check for a compatibility update for your swatch app. If using custom code, verify that the CSS selectors are still applicable. As a precaution, always update and duplicate the theme before applying the updates.
How do I make the swatch color match my exact product color?
override color: Instead of using the default color, use a custom hex code for the CSS color, or go with image swatches (a cropped up version of the product image as the swatch). There are apps such as Rubik Variant Images that allow you to specify the exact hex color for each swatch without having to hard code it.
How do I stop Size selection from changing the product image?
Only assign an image to a color based variants and fix themes and apps that currently swap images for size. Many still do this and it causes a lot of issues. Look for something like an “option that controls galleries” or an “image filter option” and set it to Color only.
Is it better to use separate products per color instead of variants?
Since each color has completely different images, descriptions, and inventory tracking needs; It would be more organized to create separate products using an app like Rubik Combined Listings. Each product can have a full image gallery and away go all the variant-image assignment conflicts.
