Product Image Swatches

New Member
1 0 0

To begin - the code below works (provided the variant image filename contains the option value  - i.e. if the option value is navy, the filename could be "navy.jpeg"). 

 

What I'm hoping to do is avoid looping so much! Would love to know if there's a simpler/better way to achieve this!

 

 

<style>
{% for option in product.options_with_values %} /* get all of the product options */
{% for value in option.values %} /* get their values */
{% for variant in product.variants %}
{% assign imagesrc=variant.image.src %} /* get all the variant images */
{% capture optionValue %}{{ value | escape | downcase  }}{% endcapture %} /* CAPTURE MUST BE ON ONE LINE */
input[value="{{ value | escape }}"] + .color-option{ background-color: {{ optionValue }}; /* failsafe if image doesn't load and color matches HTML names */ background-size: contain;
{% if imagesrc contains optionValue %} background-image: url({{ imagesrc | product_img_url: 'master' }}); {% endif %}
}
{% endfor %} {% endfor %} {% endfor %} </style>

<input type="radio" value="{{ value | escape }}">
<label for="SingleOptionSelector-{{ forloop.index0}}-{{option.name}}" class=" color-option radio-js"> </label>

Thanks :)

 

0 Likes

please share a store url aur theme name better to assist

Thanks & Regards
Perennial Solution

Would like to add new functionality or customize an existing one, please hire us.
If helpful then please Like and Accept Solution .
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
0 Likes