My product's color swatch variants aren't showing up when the color is two words, using Brooklyn theme. Help?

Highlighted
New Member
2 0 1

I used this CSS guide and it works just fine with when the color is one word (ex: blue), but doesn't work when it's two words (ex: dark blue). I followed the instructions exactly, looked through the comments for solutions, experimented with different methods, absolutely no success.

When I change the product's color variant to include a dash (dark-blue), it starts to work, so I feel like it's something in the code. I've looked all over for a solution, but everything I've have found refers back to the above guide.

Any help would be extremely appreciated!

1 Like
Highlighted
Shopify Staff
Shopify Staff
25 0 3

Hi,

I’m Kevin a Shopify Guru.

I'll start with saying Guru's aren't coders and we don't support coding changes but I may have some advice.
Code changes are extremely sensitive. I'd make sure you are using Capitals like they say you should and double check those kind of details. I would test some of the codes that are shared like "Color-Medium-Turquoise' #48D1CC" and if that works but one of your colours does not then it may not be a code issue but a colour issue.

You said that is "started to work" so I hope you are able to find the missing piece. It does look like some people are having a similar problem in the comments. If you do find out the problem I encourage you to share it. :)

Best Regards,

Kevin | Shopify Guru

0 Likes
Highlighted
New Member
2 0 1

Thank you for your reply! I tried your exact example, but unfortunately it's still not cooperating. I changed the code to "'Color-Turquoise' #48D1CC" along with the product variant and it showed up, so it appears as though the code isn't recognizing the dash in the color name as a space.

If I find a solution, I'll be sure to update it here.

0 Likes
Highlighted
Shopify Partner
13 0 3

Hi Bublette, did you find a solution to this? I am having exactly the same issue.

0 Likes
Highlighted
New Member
1 0 0

You can use "navy" and that works for dark blue. If you want to make custom color swatches, follow this guide:            https://archetypethemes.co/blogs/impulse/how-do-i-set-up-color-swatches

 

You need to create a .png image that is a small rectangle of the color you want (say, in Photoshop or rename a screen grab from your photo of the color). Name the image the color name:  "marigold.png" and upload to your theme's assets folder according to the instruction. Then, when you assign a variant of "marigold" to the product, it will display your color swatch. 

 

The one tricky part is the bit about clearing your theme's caches, which you need to do if you don't see your new color swatch when you've cleaned your browser cache and refreshed your page. You may not need to do this if your color name is totally different from any you used elsewhere or before. For example, I have a lot of navy products. If I call my variant navy, I automatically get a blue swatch. But I don't like it, because it's not dark enough to represent navy accurately. So I made my own navy swatch, uploaded it and then I had to clear the caches to see it. But if you add a totally new color like marigold, you probably won't see the wrong color. If you do, then here's the next step –

 

The instructions are clear, just be sure to follow them exactly:

   https://archetypethemes.co/blogs/support/why-doesnt-the-color-swatch-update-if-i-change-the-file

To be safe when editing your code, open the code in editor and Select All then Copy and Paste it into Notebook or any text editor or Word outside of your site. Now you can search (control F) for the code string [    | split: '?' | first    ] and you'll see where it falls in the long page of code without having touched your theme's code yet. Now find the same section in the editor and delete that little string. Do it for both files that are listed in the guide. This will delete the cached file for your color, so the swatch you uploaded will show up.

 

0 Likes