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.
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.
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.
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 
Hi @hqbarcelona 
In this case,Easify Product Options can definitely help you solve the issue of displaying colors on your product page in a more stable and controllable way. Instead of relying on Shopify’s default color variants, you can create custom color swatches directly within the app and display them on the product page exactly according to your own setup.
Here’s an example I’ve created so you can see how it works:
- This is the result:
- This is the app setting:
When using Easify, each color is clearly configured as a color swatch or image swatch, allowing you to assign a specific color code or image to each option. As a result, the colors will always display correctly on the product page, without shifting or disappearing when customers view and select them.
With this setup, customers can still select colors as usual directly on the product page, but the experience becomes much more visual and clear. All color selections are attached to the product when added to the cart and are fully saved in the order, making it easy for you to review and process everything accurately on the backend.
Overall, Easify Product Options is very easy to use and doesn’t require any coding or complex technical adjustments. You simply configure the options within the app and gain full control over how colors are displayed on your product page. If you need any assistance during setup, the Easify team is always ready to help via live chat right inside the app.
Hi @hqbarcelona,
I hope you are doing well. If you are open to trying a third-party app, you can try the Inkybay Product Personalizer app to show any custom color variants for your product in the product page.
By using inkybay you can create a color set with any custom color for your product. You can create the color sets in two ways. If you have product images, you can apply an image instead of a color feature for any custom color option to show those images as color variants. Also, you can create a color with any custom code to apply the color to the product. All the custom colors will show on the product page properly.
In addition, Inkybay offers other product customization features that let customers personalize their products by adding text, graphics, or their own designs directly on the product page.
The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.