Hello,
first of all the theme is Dawn, the website name is floofhoop.com
I figured out how to add color swatches but the code doesn’t work on colors that have a space as part of the color name (Heather Black) and I don’t know how to link it to heather_black.png
Also how is it possible to delay the hover over image which shows the second image?, so it changes lets say after 1 second and not immediately?
Any help will be highly appreciated,
thank you ^^
Hi @tmamula
This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
At the background-image position, add the handleize attribute to correct the structure of the image link:
background-image: url({{ value | handleize | append: ‘.png’ | file_url }})
I hope it would help you
Best regards,
Richard | PageFly
Hey @PageFly-Richard ,
thank you very much for the tip. Sadly, it doesn’t help. With the change it doesn’t show even the previous ones and just blacks out the. I don’t know if I mentioned that not every single color has a space. Sometimes its red → red.png and sometimes its Hether Black Hether_Black.png
Hi @tmamula ,
After using my code, you can upload the image name with the following syntax:
color-name.png.
For example color “Hether Black” according to the syntax will be: hether-black.png (Converts all characters to lowercase, replace the space as “-”)
I hope it would help you
Best regards,
Richard | PageFly
thank you so much Richard. It works perfectly. 
Hi guys !
can you please share this code?
