Brooklyn, change size of product page thumbnails

13 1 3

I would like to change the size of the thumbnails under the main picture, on the product page. 


So far i have changed the img_url from "150x" to "250x"  in the following code within the product-template.liquid file. But the pictures scale to a max image size of 81px regardless of the number i input. 

<ul class="product-single__thumbnails small--hide grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                {% if product.images.size > 1 %}
                  <li class="grid__item medium--one-third large--one-quarter product-single__photo-wrapper">
                    <a data-image-id="{{ }}" href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail {% if image contains featured_image %} active-thumb{% endif %}">
                      <img class="product-single__thumb" src="{{ image.src | img_url: '250x' }}" alt="{{ image.alt | escape }}">
                {% endif %}
              {% endfor %}


Here is a product from my website:



Any help would be much appreciated! 



Shopify Expert
166 40 71



Go to Online Store > Themes > Actions > Edit Code. 

From there, go to your Assets folder and select the timber.scss.liquid file. Once you're there, search for this: .product-single__thumbnails img


Your image is scaling to 81px because the max-height is set to 85px. You can now change the value to whatever you'd like and you'll have a smaller image. 

Did I provide you with a working solution? Give me an Approved Solution!

Likes are appreciated as well :)
1 Like
13 1 3

Thanks Shay! You've been a major help, i hope your answer will benefit others as well. :) 

1 Like