Poor Quality Collection Page images

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

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

0 Likes
Shopify Partner
2522 25 549

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
Tourist
7 0 4

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

 

0 Likes
Tourist
7 0 4

Thanks for your help. It works

0 Likes