Select second product image instead of first?

Technical Q&A
1

Is there a way to have this select the second image in the product images, instead of the first one?

Thank you!

 <a href="{{ item.url | within: collections.all }}" class="thumbnail">
<figure class="lazy-image {% if item.image.src contains 'png' %} lazy-image--transparent {% endif %}" data-ratio style="padding-top: 130%">
<img 
src="{{ item.image | img_url: '100x130', crop: 'center' }}" alt="{{ item.title | escape }}"
srcset="{{ item.image | img_url: '100x130', crop: 'center' }} 100w, {{ item.image | img_url: '200x260', crop: 'center' }} 260w"
sizes="100px" class="img lazy"
loading="lazy"
width="{{ item.image.width }}" height="{{ item.image.height }}"
/>
</figure>
2

Hi @kristobar ,

Please change all code:


{% assign image_product = item.product.media[1] %}

Hope it helps!

1 Like
3

Wow thank you!

Would it be possible to add a part that checks if the product has more than one image to select the second one?

Sorry to bug you again

4

Hi @kristobar ,

Please change all code:


{% if item.product.media[1] %}
  {% assign image_product = item.product.media[1] %}
{% else %}
  {% assign image_product = item.image %}
{% endif %}
1 Like
5

Thank you so much!

1 Like
6

Hi @kristobar ,

I saw you liked my answer. If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

7

Hello, is it possible to have that feature just on one “landing page”. So in the normal Shop it shows the first image as a thumbnail and on a specific page with featured Products it shows the second image? Maybe over custom css?

Thanks in advance!