Only show variant images that are in stock.

Highlighted
New Member
1 0 0

I'm looking for a way to only show variant images that are in stock on the product page. I know how to hide the swatches using: 

{% if variant.available %}

 but how can I tie that into a forloop below for the product thumbnails?

 

  {% for image_item in image_list %}
          {% assign image = image_item | split: "`~`" %}

          {% capture image_id %}{{ image[0] | strip }}{% endcapture %}
          {% capture image_alt %}{{ image[1] | strip }}{% endcapture %}
          {% capture image_50x %}{{ image[2] }}{% endcapture %}
          {% capture image_200x %}{{ image[3] }}{% endcapture %}
          {% capture image_400x %}{{ image[4] }}{% endcapture %}
          {% capture image_600x %}{{ image[5] }}{% endcapture %}
          {% capture image_800x %}{{ image[6] }}{% endcapture %}
          {% capture image_1200x %}{{ image[7] }}{% endcapture %}
          {% capture image_2000x %}{{ image[8] }}{% endcapture %}
          
          <div class="product-gallery__thumbnail one-fifth column" 
                data-title="{{ image_alt | escape }}">
              <img  src="{{ image_400x }}"
                    alt="{{ image_alt | escape }}"
                    data-index="{{ forloop.index0 }}"
                    data-image-id="{{ image_id }}"
                    data-featured-image="{{featured_image.id}}"
                    />
          </div>
        {% endfor %}

 

0 Likes
Shopify Partner
189 13 21

@jcr23 

Please, can you share your store URL?

As you have mentioned you want only available variant on swatch selection is possible through Javascript Or jQuery.

{% for image in product.images %}
     {{ image | img_url: 'original' | img_tag  }}
{% endfor %}


With the help of the above code, you can display product images on the product page.

Thanks & Regards
Akshay Vaghasiya

Shopify Expert | E-commerce Consultant
Email: akshayvaghasiya84@gmail.com
Skype: akshayvaghasiya84
 - Want to modify or custom changes on store hire me .
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
0 Likes