Poor Quality Collection Page images

Highlighted
Tourist
8 0 5

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 :)

https://www.divinitycollection.com.au/collections/summer-collection-16-17

0 Likes
Shopify Expert
2684 67 841

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? Like it!
I am away till Feb-15.
1 Like
Highlighted
Tourist
8 0 5

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

 

0 Likes
Highlighted
Tourist
8 0 5

Thanks for your help. It works

0 Likes
Highlighted
Excursionist
35 0 3

I'm having similar issues on my collection page. On desktop the "collection image" at the header looks great, but it's badly compressed on mobile.

I looked in the collection-template.liquid file and the collection image img_url is already set at "master" which I believe should render the highest quality image.

What is the problem and how can I get the mobile collection page to give me higher quality images? Thanks in advance.

0 Likes