Some of my color variants are not working... HELP?

Store Design
, , , , , ,

Topic summary

Color swatches for product variants were rendering as white for many options in a third-party (Etsy) Shopify theme. Only variants whose names matched valid CSS color keywords displayed correctly.

Diagnosis: the theme sets the swatch background using the variant name as the CSS color value. Non-standard names like “Dark Grey Heather” aren’t valid CSS color keywords, so the browser falls back to transparent.

Suggested fixes:

  • In Admin/theme settings, provide a proper color value (e.g., hex code) for each variant per the theme’s rules, keeping the display name separate from the color value.
  • If the theme can’t map values, rename or map colors to standard CSS color names.
  • Verify product page/global variant settings follow the theme’s prescribed format.

Outcome: the OP mapped their metafields/CSS to standard CSS color names (using the W3Schools list), and the swatches now display correctly. They couldn’t locate Admin fields for color values in this theme but achieved a working workaround.

Minor UX note: move the scroll-to-top button so it doesn’t overlap the WhatsApp button.

Status: resolved; further improvement would require proper color mapping support to allow custom names with hex/RGB values.

Summarized with AI on December 22. AI used: gpt-5.
1

Hello friends,

I am pretty new to shopify and trying to navigate a few issues. Would love some help!

My theme allows to display color variants on the product page, but only a few of them shows correctly, the orders are all white. Please note below:

fefades_0-1723512862052.png
fefades_0-1723512862052.png2528Ă—1330 264 KB

Any idea how to fix that?

Thank you in advance!

2

@fefades

Which is theme you using on your store?

To show the variant product you need add correct color variant in setting Admin of product. In case the color is image you can make a rule follow theme rule suggestion.

So first you need check in Admin to setting correct color code for variant.

And then you can check on setting of product page or variant setting on global setting of theme make sure you added correct follow rule of theme suggest.

1 Like
3

Hey @fefades

Welcome to the community!

Okay so it looks like the background color is being defined as the name of the variant. The value of “Dark Grey Heather” doesn’t exist in css (values like white,black,red etc do) and hence it falls back to the transparent value. In your theme/app that you are using, you’ll have to make sure that the name of the variant and the color value are different.

2024-08-13 12_54_47-Dramione Fandom T-Shirt - Universal Vacation Tee– Geeky Queen.png
2024-08-13 12_54_47-Dramione Fandom T-Shirt - Universal Vacation Tee– Geeky Queen.png1772×637 240 KB

1 Like
4

Thank you so much for your time in checking this!

I didn’t understand completely how to fix that but definitely your answer gave me the idea to match the color names in metafields/css to these on this link (https://www.w3schools.com/colors/colors_names.asp) and it worked!

Wish I didn’t have to use these standard names, but what matters is that it looks nice now… :smiley:

1 Like
5

Thank you so much for your time in checking this!

I am using a simple theme I found on Etsy. I have no idea it wasn’t so great… haha

I couldnt find where in the admin to add these colot values… but I think I was able to find another solution now, thank you so much!

6

@fefades

The site looks :kissing_face_with_closed_eyes: :ok_hand: .Could you move the scroll to top button up so it doesn’t overlap the whatsapp button. Otherwise, 11/10!