Categories
Uncategorized

How to add product variant Image swatches in Collection page

https://prnt.sc/RPCqovU6xl-d

Card-product.liquid (Snipets)

   <!– start Color Swatch code –>

        {% for option in card_product.options %}

          {% assign color_option = option %} 

        {% endfor %}

        {% if color_option contains “Color” %}

          <div class=”color_swatches”>

            {% for option in card_product.options %}

              {% if option == ‘Color’ %}

                {% assign index = forloop.index0 %}

                {% assign colorlist = ” %}

                {% assign color = ” %}

                {% for variant in card_product.variants limit:3 %}

                  {% capture color %} {{ variant.options[index] }} {% endcapture %}

                  {% unless colorlist contains color %}

                  {% assign var_img = variant.image.src | img_url: ’35x’ %}

                  {% assign ftr_img = variant.image.src | img_url: ‘master’ %}

                    <a href=”javascript:void(0);”><img src=”{{ var_img }}” class=”hover_image” alt=”{{ color }}” data-image=”{{ ftr_img }}” width=”34″ height=”34″ alt=”{{ color }}” loading=”lazy” /></a>

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

                    {% assign colorlist = tempList %}

                  {% endunless %}

                {% endfor %}

              {% endif %}

            {% endfor %}

        {% assign var_size = card_product.variants | size %}

        {% if var_size > 3 %}

          <a href=”{{ card_product.url }}” class=”product_more_link”><img src=”{{ ‘plus_icon.svg’ | asset_url }}” loading=”lazy” alt=”plus icon”></a>

        {% endif %}

          </div>

        {% endif %}

        <!– start Color Swatch code –>

Leave a Reply

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