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

zain0712
Tourist
4 0 1

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

Shopify Q3.png


Thanks in Advance

Replies 2 (2)

BSS-Commerce
Shopify Expert
3477 461 519

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:

view - 2023-11-03T092350.234.png

 

Then press Save

The results you will achieve are similar to the following:

 

view - 2023-11-03T092642.403.png

 

Hope it helps @zain0712 !

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

MEDICI
Visitor
2 0 0

你好,@BSS-Commerce 

為什麼我添加了程式碼,但集合頁面上沒有任何變化?
謝謝