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:
collection-template.liquid fileimg_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.
We’re using the Escoot Shopify theme and the collection page uses the “collection-template” section. The section is loading the product images that have an intrinsic size of 100x100 and then scales up to 586x586. This is causing blurred and stretched images.
On the product page we have high-quality images, so why does Shopify insist on using, what appears to be, a downscaled photo then upscaling - any way to fix this?
Eg.
Hello @FrillyLama ,
You can try to follow these steps:
Go to Online Store → Themes → Actions → Edit code
Go to Sections → collection-template.liquid file
look for the section that displays the product images. It might look something like this:
{% for product in collection.products %}
{% endfor %}
To display higher-quality images, you can modify the code to use a larger image size. For example, you can replace ‘master’ with ‘grande’ or ‘large’:
{% for product in collection.products %}
{% endfor %}
Save changes
Let us know if you can make it.
Ali Reviews team.
I believe I found the section in collect-tempalte.liquid and changing the img_url to master/grande did not alter the photo. Any more ideas?
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 %}
Thanks for this contribution! I having a hard time finding this code for my site. Maybe the code has changed for the latest theme versions. Can you help me find it so I can change the blurry images on my collection page? It’s killing my sales. Thanks in advance!
Hi there, Just figured how to fix this so commenting here if anyone still needs help. I exported the image in SVG format through Canva and it became crystal clear. You can see it in our website, we are a coffee store specializing in coffee blends specially made for Gamers for improving their performance - https://hpbrew.com/ You can see in here that images are super sharp. If this answer helped you please help us back as well. You can help us by following our Instagram https://www.instagram.com/hpbrewofficial/ and yes only if you like what you see.