Hi!
I am having issues with displaying custom color variants on my product page. I select them in the editor and they appear fine but once I am looking at them on the product page they just appear as white.
Thanks in advance for the help.
Topic summary
Custom color variants display correctly in the editor but appear as white on the product page.
Likely cause: the theme doesn’t recognize custom color names, so swatches default to white; caching may also show outdated swatches.
Suggested actions:
- Verify variant option color values are assigned correctly and that names match exactly (spelling, spacing, capitalization).
- Clear browser cache or preview in an incognito window to rule out cached assets.
- In Online Store → Themes → Customize → Theme settings → Colors/Variant Swatches, manually map each custom color name to a HEX code (standard web color code). Each color must be on its own line and match the variant name exactly.
- Basic colors like “White,” “Black,” “Red” are usually auto-recognized; unique shades (e.g., “Baby Pink,” “Sky Blue”) must be added.
Latest update: OP cannot share access and asked if all colors must be assigned in that settings window; the helper confirmed yes and offered to provide exact configuration lines if given the variant names.
Status: unresolved; awaiting OP’s follow-up. Another participant asked what steps the OP is taking to resolve it.
Notes: Screenshots were shared to show the configuration area, but no code changes are required.
1 Like
Hi hqbarcelona!
This usually happens when the variant color swatches aren’t properly linked to the color names or the theme can’t detect the custom color code.
A few quick things you can check:
Make sure the color values are assigned correctly
In your variant options, ensure each color has a valid HEX code or image assigned. If the theme doesn’t recognize the color name, it defaults to white.
Check your theme settings
Some themes require you to manually map custom color names to their HEX codes under:
Online Store → Themes → Customize → Theme Settings → Colors / Variant Swatches
Clear browser cache or preview in an incognito window
Sometimes old cached files cause the swatches to show incorrectly.
If you’d like, I can jump in and fix it directly for you—just share access and I’ll handle everything for you.
Thanks for trying to help, unfortunately sharing access is not an option!
Am I supposed to assign all colors in this window?
No worries — and yes, this section is exactly where you define all custom colors that your theme doesn’t automatically recognize.
If your product variants use color names like “Baby Pink”, “Sky Blue”, “Dark Green”, etc., then each of those needs to be added in this configuration box in the format:
A few key points:
Every color name must match your variant name exactly (same spelling, spacing, capitalization).
Each color goes on its own line.
If a color isn’t listed here, the theme shows it as white — which is the issue you’re seeing.
You don’t need to add basic colors already recognized by Shopify (like “Red”, “Black”, “White”), but any custom or unique shade must be added manually.
If you want, you can tell me the exact variant names you’re using, and I’ll write the correct configuration lines for you.
This is very dependent on your theme and the way it renders swatches and the way your options/metafields are configured.
Share a (preview) link to the page where it is possible to see it first-hand.
1 Like
Hi @hqbarcelona
Your color names don’t match CSS color names
Example:
- “Sky Blue” → works
- “Baby Blue” → DOES NOT work
- “Dark-Red” → does not work
- “Red ” (space at end) → does not work
Shopify only auto-detects colors that match standard CSS color names.
Best regards,
Devcoder 
Hi there! 
I’ve seen this happen before, most times it’s because the theme isn’t pulling the custom color settings correctly on the live product page. A couple of quick things can fix it, like making sure the color names match the theme’s supported values or adding a small update to the swatch CSS/JS.
If you can share which theme you’re using and a link or screenshot of the live product page, I’d be happy to take a closer look and guide you step-by-step 