Why are my product images blurry on the collection page?

Store Design
,

Topic summary

A Shopify store using the Escoot theme is experiencing blurry product images on collection pages. The images appear to be loading at 100x100px and scaling up to 586x586px, causing quality degradation despite high-resolution images being available on product pages.

Initial troubleshooting attempts:

  • Editing collection-template.liquid file
  • Changing img_url filter from ‘master’ to ‘large’ or ‘grande’ (unsuccessful)

Working solution:
Removing or changing the image-size multiplier from 0.8 to 1 in the product grid item include statement resolved the issue. The original code used imageSize*0.8, which forced the system to load low-resolution thumbnails instead of full-quality images.

Alternative approach:
One user suggested exporting images in SVG format through Canva for crystal-clear results, though this may not be practical for all product photography.

Status: Resolved for the original poster, though one commenter noted difficulty locating the same code in newer theme versions.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
4

The solution is to remove the image-size multiplier of 0.8, so it’s at 1. I haven’t the slightest clue how a 0.8 modifier tells the store to load a 100x100px photo as opposed to the high-quality, uploaded photo - but it works.

Original:

{% if collection.products.size > 0 %}
                {% for product in collection.products %}
                
                  {% include 'product-grid-item', product: product, imageSize: imageSize*0.8 %}
                {% endfor %}

Solution:

{% if collection.products.size > 0 %}
                {% for product in collection.products %}
                
                  {% include 'product-grid-item', product: product, imageSize: imageSize %}
                {% endfor %}