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.
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.