Shopify themes, liquid, logos, and UX
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
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 !
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via [email protected]
你好,@BSS-Commerce
為什麼我添加了程式碼,但集合頁面上沒有任何變化?
謝謝
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024