Solved

Color Swatch Missing - Code Issue in Warehouse

dragman
Tourist
9 2 2

For my product page, one of the color variant swatches is missing (dark grey heather). The custom swatch has been uploaded in the assets page of the edit code section and all the other uploaded swatches work with no issue. When I go to the page itself and inspect the code I can see the issue, but I don't know where to fix it in the 'Edit Code' section
01.png

02.png

Code Issue: 

For example, when looking at the color swatch code in the Inspect section for the Heather Clay color the code goes

<label class="" for="" data-bg=" This is the link for the color " title="Heather Clay" style="">...</label>

  
The color swatch code in the inspect section for the Dark Grey Heather color code goes

<label class="" for="" style="background-color:darkgreyheather"" title="Heather Clay">...</label>


While there is a link in the Heather Clay (data-bg="") for the Dark Grey Heather it only says 'style' with no link. I don't know where to edit this in the actual theme code

Accepted Solution (1)
dragman
Tourist
9 2 2

This is an accepted solution.

Solution Found:

I had uploaded the original swatches to both my files and assets, but I had the Dark Heather Grey named incorrectly in my files. The new swatches were never uploaded to my files. Now that they have been uploaded to both locations the product page swatches are working correctly. If anyone else has a question regarding this same issue please reach out if you don't understand my solution!

Thank you very much for your help IDoThemes!

View solution in original post

Replies 8 (8)

iDoThemes
Trailblazer
207 43 91

Looking at the warehouse code:

Vision Control ~ Edit ~ Warehouse ~ Shopify 2021-08-04 15-57-08.png

It looks like if color_swatch_image isn't blank it will output and image, else the background-color style. This means for some reason color_swatch_image is blank for you at this stage in the loop, you can probably do some logging out of the data here to see what's going on, my guess would be some issue with case/spaces/handleization

Developer of Liquify Chrome Extension -- Enhance the Shopify Theme Code Editor
.




Theme Developer -- Drop me a line
dragman
Tourist
9 2 2

Thank you for the reply! My code line looks identical to what you're showing. Do you know where I would be able to find the code specific to the Dark Grey Heather to see what is going on over there? I'm not sure what section to look in under Edit Code

Also, I don't know if this helps, but I added a new product with different color options - the new options being Navy, True Royal, Leaf, and Athletic Heather. I added my custom swatches to the assets just like all the other ones and with the correct names but they aren't working either

Untitled.pngCapture.PNG

dragman
Tourist
9 2 2

02.png

dragman
Tourist
9 2 2

This is an accepted solution.

Solution Found:

I had uploaded the original swatches to both my files and assets, but I had the Dark Heather Grey named incorrectly in my files. The new swatches were never uploaded to my files. Now that they have been uploaded to both locations the product page swatches are working correctly. If anyone else has a question regarding this same issue please reach out if you don't understand my solution!

Thank you very much for your help IDoThemes!

justeezin
Visitor
2 0 0

Can you help me please? I just installed Printify app and for those 4 listings, the color bubbles are invisible. I uploaded color png's exactly as you instructed to assets and files folder but still not working. Shopify cannot assist. In the rest of my shop, my listings (not printing) display color names instead of swatches. I would be ok changing to that display but I don't know how. Any advice you can provide would be appreciated. 

dragman
Tourist
9 2 2

Hi justeezin!

Sorry for the delay - I couldn't get to a computer earlier today.  Without any screencaps or anything my best guess right now would be to double check the variations vs file name. What kind of products are they? Would you be able to screen cap a product, one of your swatches, and the assets section so I can get a better idea of what might be wrong?

Thanks!
dragman

justeezin
Visitor
2 0 0

Hi,

I was able to figure out how to display the color names instead of the color swatches, and that's ok with me. 

I appreciate your reply and willingness to assist!

Take care,

Sutisa

dragman
Tourist
9 2 2
Excellent! I'm glad you found a workaround 🙂 And you're very welcome!
Have a great day!

-dragman