Liquid tags / code for product thumbnails

New Member
3 0 0

I want to be able to call upon each product's thumbnails in Liquid.

 

I know {{ product | img_url: '100x' }} asks for the first thumbnail within a product page and at 100px wide.

 

What about the code for the second, third, fourth and last?

0 Likes
Highlighted
Shopify Expert
3297 526 775

Hi @ralphsmouse 

To get thumb product image you can use below code:

{% for image in product.images %}
    <img  src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="">
{% endfor %}

And this is code of debut theme thumb file

{% for image in product.images %}
              <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
                <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
                   class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
                   data-thumbnail-id="{{ image.id }}"
                   {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
                     <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
                </a>
              </li>
            {% endfor %}
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
3 0 0

I want to be able to call on other thumbnails besides the first.

0 Likes