Categories
Uncategorized

How to use variant images as swatches

Product-variant-options.liquid

Example Code with tested

<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">

        {% if option.name == 'Color' %}

              {% unless colorlist contains color %}

              {% assign var_img = product.variants[forloop.index0].image.src | img_url: '35x' %}

              {% assign ftr_img = product.variants[forloop.index0].image.src | img_url: 'master' %}

                <img src="{{ var_img }}" class="hover_image" alt="{{ color }}" data-image="{{ ftr_img }}" title="{{ value }}" width="34" height="34" alt="{{ color }}" loading="lazy" /> 

                {% capture tempList %}{{colorlist | append: color | append: ' '}}{% endcapture %}

                {% assign colorlist = tempList %}

              {% endunless %}

          {% else %}

            {{ value -}}    

        {% endif %}

      <span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>

    </label>

   

Leave a Reply

Your email address will not be published. Required fields are marked *