Display Images of the Products Variant on Collection Page, Shopify Dawn Theme

[zain0712]

I am trying to display small images of the product variant on Collection Page with the help of this code but couldn't be able to fetch and display product variant images

{% if request.page_type == 'collection' %}
  {% if product.variants.size > 1 %}
    <div class="variant-images-row">
      {% for variant in product.variants %}
        <div class="variant-image">
          {% if variant.available %}
            <form action="/cart/add" method="post">
              <input type="hidden" name="id" value="{{ variant.id }}" />
              <button type="submit" class="variant-button">
                <img src="{{ variant.image.src | asset_url }}" alt="{{ variant.title }}" width="100" height="100">
              </button>
            </form>
          {% else %}
            <p>{{ variant.title }} - Sold Out</p>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endif %}

{% if product.has_only_default_variant %}
  <form method="post" action="/cart/add">
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <button type="submit" class "variant-button">
      <img src="{{ product.variants.first.image.src | asset_url }}" alt="{{ product.variants.first.title }}" width="100" height="100">
    </button>
  </form>
{% endif %}

Please someone help me to correct this code if there is something that I need to add.

I want to display images instead of colors

 

Thanks in Advance

[BSS-Commerce]

Hi @zain0712 ,

Please follow these steps:

- Themes -> Edit code -> Find the card-product.liquid file

-> Find code snippets that contain the following class "card__information"

- Add the following code below the lines containing class "card__information":

{% style %}
.variant-images-row {
display: flex;
width: 100%;
align-content: center;
flex-wrap: wrap;
justify-content: center;
}
{% endstyle %}
<div>
{% if card_product.media.size > 1 %}
<div class="variant-images-row">
{% for variant in card_product.media %}
<div class="variant-image">
{% if variant %}
<form action="/cart/add" method="post">
<input type="hidden" name="id" value="{{ variant.id }}" />
<button type="submit" class="variant-button">
<img src="{{ variant | image_url }}" alt="{{ variant.title }}" width="30" height="30">
</button>
</form>
{% else %}
<p>{{ variant.title }} - Sold Out</p>
{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</div>

Similar to the following photo:

Then press Save

The results you will achieve are similar to the following:

Hope it helps @zain0712 !