Display specific color variant images

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 
password: dowpeu

 

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 = '' %}
   {% 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 %}

 

0 Likes
Highlighted
Shopify Partner
14 0 1

For each color  or flavor you need to identify the image associated with a variant of that color.  This code assigns variable featured_image to the image for each color as it loop through the values:

        {% for product in collection.products %}
	        {% assign featured_image = product.featured_image %}
            {% assign values = null %}
            {% if product.options contains "Color" or product.options contains "Flavor" %}
{% assign values = product.variants | map: "option1" | uniq %} {% endif %} {% if values %} {% for value in values %} {% assign variant = product.variants | where: "option1", value %} {% if variant[0].featured_image %} {% assign featured_image = variant[0].featured_image %} {% else %} {% assign featured_image = product.featured_image %} {% endif %} {% include 'product-grid-item' with grid_item_width, featured_image %} {% endfor %} {% else %} {% include 'product-grid-item' with grid_item_width, featured_image %} {% endif %} {% else %} <div class="grid-item"> <p>{{ 'collections.general.no_matches' | t }}</p> </div> {% endfor %}

Once you identify the the image you replace product.featured_image with featured_image in the html output.

Note this example code makes the assumption that Color or Flavor is always the first option.

0 Likes