Color tags not showing the correct color

[RainydaysK]

Hello,

I am having some problems with the visibility of the colors of my product tags in my webshop. (Theme: Natches)

My website is: https://rainydayssportswear.com/collections/all and the passwordprotection is: zahpon

I have set the colors of my products, but they are not correctly showing when you look in the shop:

I set it up like this, I created the tags and set up the variants (so that the products also change when you click the specific colour. This fucntion is working correctly). 

I also created the colors in automatic collections, like this: 

Can anyone help and see what I'm doing wrong here? 

Things I already tried: 

- Caps, no caps, change the naming to one word (so no spacing)

- Tried to change it in the CSS code. This worked in the actual product (see image), but not in the collections/shop page: 

 

 

 

[Imogen]

Hi there, @RainydaysK. Thanks for taking the time to reach out to the Shopify Community Forums here regarding this colour question! My name is Imogen. It's good to meet you!

I took a few minutes to check out your pages in your shop via the link and storefront password you shared, and can definitely see that the colours shown on the images on the collection/home pages are different than the colours presented on the actual product pages. This is likely a result of an issue with the coding on the pages showing the colours incorrectly. Are the colour swatches being shown on the images on your pages part of the functionality of the theme you're using? Or, did you have to download an app to have those colour swatch circles appear?

I tried to locate the theme you mentioned (Natches) in our theme store, but was unable to find it. Do you mind sharing where you purchased your theme? For third party themes, it's often a wise choice to reach out to the developers of the theme you're using directly to report issues such as this, and to see if they can advise on what may be wrong, and how you may be able to fix it. The same can be said for the developers of any third party apps you may be used to present this colour information! Have you reached out to the developer of your theme to ask them about this?

[RainydaysK]

Hi Imogen, thanks for your reply! 

The color of the swatches in the product page were altered by myself with a CSS code. These were actually also not working, just like the others on the collections page... But changing the Css on the collections page seems a bit to difficult for me...

I've contacted the 3rd party, but unfortunately they don't want to help me because i bought the theme via Envato elements. Very unfortunate.

to answer your other question: i did not install an app to do something with the colors. 

Any chance you know what else i could try? 

[JasmeetVT14313]

Hi @RainydaysK 
You'll need to update the code for collection filters as your theme currently does not support background-images for color filter on collection
Like in below example you are getting bg color as

background: Light Blue;

which you need to obtain as

background: lightblue;

If you still have any concerns you can reach or to me directly. I'll help you with the code.

If this information was helpful to you, please give it a Like. If it resolved your issue, kindly hit Like and mark it as the Solution! Thank you!

[RainydaysK]

Are you sure of this? lightblue works, but i think that's only because lightblue is a hardcoded color. if you try it with 'oldrose' it doesn't work. Or am i misunderstanding you? 

Could you help me with the code possibly? im not sure how i can fix this... 

[RainydaysK]

I think i was able to sort it out. In stead of working with special colors, i just pickt de basic one and changed all the naming everywhere. It seems to be working fine now! 

Thanks for your insight! 

[Dan-From-Ryviu]

Hi @RainydaysK 

You can try to remove space in color list tags in Shop by color list tags and check if it solve the issue. 

[RainydaysK]

Things I already tried: 

- Caps, no caps, change the naming to one word (so no spacing)

- Tried to change it in the CSS code. This worked in the actual product (see image), but not in the collections/shop page: