Why are my product images on the home page loading in low resolution?

Store Design
1

Hi there,

I’ve seen this posted a few times in previous threads but never saw a conclusive solution to it.

I’m nearly there with creating my fine art prints store on Shopify, but I’m having a problem with my product images on the home page loading in low-res. What’s strange is that if you click on the image to go to the product page, and then click back to the home page, that particular image will now be high resolution, and the rest will stay the same.

Does anyone have a solution to this? My WIP site is https://madebysirkett.myshopify.com/

Thanks,

J

2

Hi @sirkett ,

Please go to card-product.liquid file and change code here:

Screenshot.png
Screenshot.png1587×840 85.1 KB

Code:


              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}

Hope it helps!

3

Thank you - this worked!

Is it possible to give me a quick explanation as to why this was happening as well, for context?

I was also wondering if this new code would be applied to all new images on the page as well?

Thanks again!!

Jack

4

Hi @sirkett ,

This code will help the image display in its default size, will not be set according to the screen ratio.

And it will only work for product images, so if you want to edit other images, it will need to change with different code.

Hope it is clear to you.

5

I tried this because I’m having the same issue and I’m getting an error code:

Unable to update the file

  • Liquid syntax error (line 1165): ‘schema’ tag must not be nested inside other tags

    I have no idea how to change the code back and my home page images are still blurry. :sweat_smile: (even though they’re high resolution and perfect on the individual product pages)

6

Same! Does anyone have an update to this code?