Multi-Word Colors not working with Color Swatches

Store Design
1

Hey Shopify Community,

I’ve been working on making the color swatches for all product colors accurate on our storefront. All of the single-word colors are working properly. Blush, Cinder, Black, White, etc. The issue arises when I try to put in colors with two or more words. Heather Grey, Deep Royal, Gun Metal Grey, Pigment Ivory, etc.

All of the files are both uploaded under settings → files and code → assets as 100x100 png’s. I have tried naming all the png’s in multiple formats. Using Deep Royal as an example, I’ve tried: deep royal.png, Deep Royal.png, deep-royal.png, and Deep-Royal.png

Anyone have any idea what the issue could be?

lheureuxa_0-1659716594593.png
lheureuxa_0-1659716594593.png259×195 2.11 KB

2

Hello @lheureuxa

would you like to share your store URL please so i can check and let you know possible solution for it.

1 Like
3

Yes absolutely, https://bluechip-app.myshopify.com/

an example impacted page: https://bluechipteam.com/products/bluechip-vintage-prime-t-shirt?variant=42031135490243

1 Like
4

Hello @lheureuxa

I see as your name is Vintage White but you added image as vintage.png thats why it is not populating on screen.
please see my screenshot below so you get what i mean

Niraj_singh_0-1659722181436.png
Niraj_singh_0-1659722181436.png1902×984 157 KB

1 Like
5

That’s strange. In assets and in files it is correctly titled

lheureuxa_0-1659722503465.png
lheureuxa_0-1659722503465.png278×103 1.94 KB

6

Hello @lheureuxa

I understand you added correct file in assets but in code you are calling wrong file..so thats why need to edit liquid file of your theme so these images will be show with correct rendering.

1 Like
7

Thanks, thats definitely the case.

I think its this line of code, do you know what is causing it to only pick up the first word of the product color?

8

Did you manage to find a solution to this issue? I’m having the same problem. The code not picking up multiple word? I used a work around to rename the file e.g. vintage_white.png and I called the colour Vintage_White. But it will be nicer if I can get rid of the symbol.