Display specific color variant images

Highlighted
New Member
6 0 0

How can i display specific colored variant product images on Collection page in FASTLANE theme like this page, https://relxnow.com/collections

 

My website is https://relxpakistan.myshopify.com/collections/frontpage

 

I have added this code for now in Collection template, it is displaying correct amount of images, like 5 and 7 images for both products, one product has 5 colors, and other has 7 flavors, but its not displaying their colored images.

 

{% for product in collection.products %}
{% for option in product.options %}
   {% if option == 'Color' %}
   {% assign index = forloop.index0 %}
   {% assign colorlist = 'Classic Black', 'Red', 'Navy Blue', 'Space Gray' , 'Rose Gold' %}
   {% assign color = '' %}
   {% for variant in product.variants %}
   {% capture color %}
   {{ variant.options[index] }}
   {% endcapture %}

     {% unless colorlist contains color %}
        {%include 'product-thumb' with productWidth show_collection_in_link: settings.collection_seo_link %}
        {% capture tempList %}
      {{colorlist | append: color | append: " " }}
      {% endcapture %}
      {% assign colorlist = tempList %}
      {% endunless %}
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endfor %}

{% for product in collection.products %}
{% for option in product.options %}
   {% if option == 'Flavor' %}
   {% assign index = forloop.index0 %}
   {% assign colorlist = '' %}
   {% assign color = '' %}
   {% for variant in product.variants %}
   {% capture color %}
   {{ variant.options[index] }}
   {% endcapture %}

     {% unless colorlist contains color %}
        {%include 'product-thumb' with productWidth show_collection_in_link: settings.collection_seo_link %}
        {% capture tempList %}
      {{colorlist | append: color | append: " " }}
      {% endcapture %}
      {% assign colorlist = tempList %}
      {% endunless %}
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endfor %}

password: dowpeu 

0 Likes