Brooklyn, change size of product page thumbnails

Solved
Highlighted
Excursionist
13 1 2

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="{{ 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 }}">
                    </a>
                  </li>
                {% endif %}
              {% endfor %}
            </ul>

 

Here is a product from my website: https://auraofzeus.com/collections/bracelet/products/7-chakras-bracelet

 

 

Any help would be much appreciated! 

0 Likes

Success.

Shopify Partner
152 37 58

@JCommerce,

 

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
Excursionist
13 1 2

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

1 Like