Colour swatch file naming convention

[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"%}
                    
<label>{{option.name}}</label>
{%assign index = forloop.index %}
                    
{%for value in option.values%}
                    
<input class="single-option-selector-{{ section.id }}" id="color-{{forloop.index}}" type="radio" name="color" value="{{ value | escape }}" data-index="option{{index}}" {% if option.selected_value == value %}checked{%endif%}/>
<label for="color-{{forloop.index}}">
<img src="{{value | escape | append:'.png' | strip | asset_url }}"/>
                      
</label>
                    
{%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 · Accepted solution]

Please try this

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

[tomgarrad1]

That worked! Thank you for your help.