Re: Collection Image Blurry

Solved

Why are my product images blurry on the collection page?

FrillyLama
Tourist
9 1 0

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.

FrillyLama_0-1684889600883.png

FrillyLama_1-1684889617313.png

FrillyLama_2-1684889642877.png

Accepted Solution (1)

FrillyLama
Tourist
9 1 0

This is an accepted solution.

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 %}

 

View solution in original post

Replies 5 (5)

AliReviews
Shopify Partner
773 90 356

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 %}
  <!-- Display product image -->
  <img src="{{ product.featured_image | img_url: 'master' }}" alt="{{ product.featured_image.alt }}">
{% 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 %}
  <!-- Display product image -->
  <img src="{{ product.featured_image | img_url: 'grande' }}" alt="{{ product.featured_image.alt }}">
{% endfor %}

Save changes

 

Let us know if you can make it.

Ali Reviews team.

- Was my answer helpful? Please hit Like or Mark it as solution!
- Ali Reviews - The must-have Shopify app that empowers you to effortlessly collect, display, and manage product reviews.
- Start your FREE trial today!
FrillyLama
Tourist
9 1 0

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?

FrillyLama_0-1685211641992.png

 

 

FrillyLama
Tourist
9 1 0

This is an accepted solution.

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 %}

 

JDog1
Not applicable
1 0 0

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!

hpbrewdotcom
Visitor
1 0 0

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.