How can I resolve my color picker issue on my website?

Technical Q&A
1

Hi guys,

My website is https://proudstripes.com/. Most of my t-shirts have an issue in terms of choosing the right colour.

Let’s take the following product as an example: https://proudstripes.com/collections/men/products/american-rockets-flag. You can see that Blue True Royal colour it’s visible as it is white, not blue. I mean, the circle of the colour it’s white and I don’t know why.

I tried to upload a 50 x 50 px .png image with the colour name but still doesn’t work. Any ideas on how I can solve this?

Thank you,

Paul

2

Hi @PurplePartner ,

oscprofessional_0-1633340919911.png
oscprofessional_0-1633340919911.png1288×756 103 KB

Is it not right T shirt color?

1 Like
3

Hi @oscprofessional ,

I found out that if I enter the name of the basic colour at the end of the variant (example: True Royal Blue instead of True Royal) the circle will turn into that basic colour. However, this is only a temporary solution.

Because the colour has different shades, it’s still not displaying properly. For example, for Military Green, the circle will be the basic green colour instead of the military green colour.

4

Hi @PurplePartner ,

.true-royal-blue-swatch label {
	background: #4169e1 !important;
}
.swatch-element.color.heather-navy-swatch.available label {
	background: #333F48 !important;
}

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->style.scss.liquid

1 Like
5

Thank you so much! You saved my day!

Just one little question, if I may: All I have to do now is to copy-paste your code again if I want another colour, but changing the colour name and the colour ID?

6

Hi, @PurplePartner

Thanks for reaching out in our Community forums and sharing your concern.

I’m happy to hear that adding the line of code was able to fix the issues you were running into with displaying the correct color swatch. I can also confirm, that it is working as expected:

04-06-43107-28546
04-06-43107-285461458×856 94.4 KB

Feel free to share more information on which theme you’re using and whether or not you’re utilizing an app for these swatches so we can troubleshoot this issue further.

I’d love to know more about your business! How is your current marketing strategy going with bringing customers to your product pages? Have you thought about what to include in your announcement bar?