Colour swatch file naming convention

Solved
tomgarrad1
New Member
9 0 0

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%}
0 Likes
PBC
Excursionist
15 3 9

Hi 

tomgarrad1
New Member
9 0 0

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

0 Likes
PBC
Excursionist
15 3 9

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
New Member
9 0 0

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
 
Capture.PNG
 
If there's anything else I can provide, let me know - Thank you.
 
 


0 Likes
PBC
Excursionist
15 3 9

This is an accepted solution.

Please try this

{{ value | escape | strip | downcase | replace: ' ', '-' | append: '.png' | asset_img_url: '300x' }}
tomgarrad1
New Member
9 0 0

That worked! Thank you for your help.

0 Likes