How to fix colour swatch file naming issues for display on frontend?

[tomgarrad1]

Hi,

I’ve written a script to replace the default dropdown menu for my colour variants to be colour swatches. (Code below.)

Problem:

The script is running fine, but the images I’ve uploaded to ‘Assets’ aren’t displaying on the frontend and I think it may be the file naming convention that’s stopping it.

Colour variant example:

‘Cool Dark Blue’

Tried file names:

‘Cool Dark Blue.jpg’

‘cool-dark-blue.jpg’

I’ve also tried using ‘.png’ format to no avail.

Any help would be greatly appreciated, thanks.

Tom

{%if option.name == "Colour"%}
                    

{%assign index = forloop.index %}
                    
{%for value in option.values%}
                    

                    
{%endfor%}
                    
{%else%}

[PBC]

Hi tomgarrad1!

Did you try the asset_img_url filter? Described here https://shopify.dev/docs/themes/liquid/reference/filters/url-filters

[tomgarrad1]

Thanks for the suggestion, unfortunately that hasn’t worked either.

[PBC]

Could you please provide the exect file name uploaded to assets folder and the exact option name. Also it would be good to have a link to that product

[tomgarrad1]

Link to product:

https://tomgarrad.myshopify.com/products/lightweight-trainers

Exact file names uploaded: (I understand that Shopify adds underscores to replace spaces in filenames by default, so I have renamed them within Shopify to remove them.)

'Cool Dark Blue.png"
'cool-dark-blue.png

'Vibrant Red.png"
“vibrant-red.png”

Exact Option name (Same in .CSV and image alt text)
Colour

If there’s anything else I can provide, let me know - Thank you.

[PBC]

Please try this

{{ value | escape | strip | downcase | replace: ' ', '-' | append: '.png' | asset_img_url: '300x' }}

[tomgarrad1]

That worked! Thank you for your help.