Shopify Development 
This guide helps you quickly diagnose and fix the Shopify color swatch not showing the correct color. We’ll walk through two specific issues:
1. Color swatches appearing blank or white
2. Swatches showing the wrong color or loading the wrong product image when clicked
You’ll learn the exact steps to identify what’s causing the problem and how to apply simple fixes to get your swatches displaying accurately again. The goal is to make troubleshooting straightforward so your product colors look correct and your shoppers have a smooth, clear experience.
Color swatches are blank or white
When color swatches show up as blank or white circles, it usually means Shopify can’t “read” the color value. This happens when the theme doesn’t recognize the color name, the HEX code is missing, or the image file that should generate the swatch isn’t correctly mapped.
How to fix it
1. Make sure the variant color is set correctly in the Shopify admin
First, double-check that the color is actually assigned to the variant in your product settings.
If swatches still showed as white even though the color was selected correctly in the admin. This usually means the theme has extra requirements, such as needing a specific color name or expecting a HEX code.
2. Add HEX codes for unique or uncommon color names
Most Shopify themes only recognize standard color names like Red, Blue, Black, etc. If you use custom names such as Lilac, Olive Green, Sage, Sandstone, the theme may not know which color to display, so it defaults to white.
3. Use color swatches in NS Color Swatch Variant Images app
*With the app, you can name your variant any way you like, then simply go to the app and set the color/image for your own variant swatch.
1. Upload a variant image or use the color picker with HEX code input.
2. If there are theme conflict issues, drop us a message in the live chat.
Color swatches show the wrong color on click
If a swatch looks correct at first but shows the wrong product image when clicked, the issue usually comes from a mismatch between the color variant and the image assigned to it.
How to fix it
1. Make sure each variant is linked to the correct image
- Go to Products → Variants in Shopify.
- Click each variant.
- Make sure the correct image is selected for every color.
2. Check your theme’s variant picker settings
- Open your Theme Settings.
- Go to the Product Page or Variant Picker section.
- Look for settings that allow you to map colors to images or swatch values.
- Make sure every color is mapped to the right image.
3. Enable image swatches and show relevant variant image gallery for the selected variant in NS Color Swatch Variant Images app
This method enables you to not only show the correct color swatch on click but also update the product image gallery that associated with the selected variant.
FAQs
Why are my color swatches showing text instead of circles?
This usually means your theme doesn’t support visual color swatches by default, so it likely needs additional swatch settings, custom code, or a swatch app like NS Color Swatch Variant Images to generate the circles aka swatches automatically.
How to fix when variant images do not change on click?
When images don’t switch on click, the issue is almost always an incorrect image-to-variant assignment. Go to Products → Variants in Shopify and make sure each color variant is linked to the correct image.
If the assignments are correct but the images still don’t change, your theme may be overriding Shopify’s default image-switching logic. Check your theme’s product page or variant picker settings, or use a swatch app like NS Color Swatch Variant Images that handles image switching reliably across all themes.
👉 Related topic: Why Is Your Shopify Store Showing All Variant Images Instead of the Selected One?
