Blurry Images on Single Product View Thumbnails

Shopify Partner
41 0 3

The Issue:

Images that are sized correctly become small, blurry, and compressed.

The Solution:

1. Navigate to product-template.liquid
2. Search for a block of code that looks like this:
    {% if product.images.size > 1 %}
        <div class="product-single__photo-thumbs js-product-single-thumbs">
              {% for image in product.images %}
                   <div>Product image {{ forloop.index }}<img src="{{ image.src | img_url: '24x24', crop: 'center' }}" data-src="{{ image.src | img_url: '92x92', crop: 'center' }}" alt="{{ image.alt | escape }}" class="product-single__photos-thumbs__img lazyload"></div>
               {% endfor %}
         </div>
    {% endif %}

3. Change 92 x 92 to 192 x 192
 

I am posting this because the solution for this issue doesn't appear to be evident or answered recently on the Shopify Forums. I hope this helps someone out! Good luck, friends :)

0 Likes
Shopify Partner
66 2 9

Great job!

Developer @ MageWorx | Explore our Shopify apps | Need theme customization or migration? Reach us at apps@mageworx.com
1 Like
New Member
6 0 0

I'm having this problem where my product thumbnails in the collection gallery are low resolution and look like crap. Unfortunately that chunk of code does not exist in my product-template.liquid file. Any other suggestions out there?

0 Likes