Poor Quality Collection Page images

7 0 4

Hello shopfy users :)

I am having issues with Shopify reducing resolution of the images on the collection pages.

Product page images is finr however. I haven't been able to pinpoint where in the code I can change this.

Can anyone help please. Here is an example of a collection page.

Thanks in advance :)


Shopify Expert
2577 41 602

Hi S,

the designer of your theme decided to use size medium (which is 240x240 pixels) to show product images in collection display. The theme is carefully tuned to show it fully, without resizing.

This is very good and works fine on standard screens, however, it makes images look blurry on retina (or hiDPI) screens, because to fill the same space and look sharp on these screens the images must be 480x480 pixels.

To fix it you have to find the piece of code which outputs these images. Open your collection.liquid template find the lines similar to this

  {% for product in collection.products %}
    {% include 'product-grid-item' %}

The code inside this for loop is the one we are looking for. It can be in this file, or in snippet product-grid-ite.liquid (as in this example). 

The easiest would be to look for img_url: 'medium'  and replace it with img_url: 'large'.

This change will make images look sharp on retina screens, however, will serve larger then necessary files to the standard,  medium DPI screens.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
1 Like
7 0 4

Thank you very much Tim. Will look into it :)


7 0 4

Thanks for your help. It works