New Shopify Certification now available: Liquid Storefronts for Theme Developers

Studio Theme - Blurry Images

Solved
sirkett
Tourist
6 0 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

Accepted Solution (1)
LitCommerce
Astronaut
2860 684 718

This is an accepted solution.

Hi @sirkett,

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

Screenshot.png

Code:

<img
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}loading="lazy"{% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                <img
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  alt="{{ card_product.media[1].alt | escape }}"
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 5 (5)
LitCommerce
Astronaut
2860 684 718

This is an accepted solution.

Hi @sirkett,

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

Screenshot.png

Code:

<img
                src="{{ card_product.featured_media | image_url: width: 533 }}"
                alt="{{ card_product.featured_media.alt | escape }}"
                class="motion-reduce"
                {% unless lazy_load == false %}loading="lazy"{% endunless %}
                width="{{ card_product.featured_media.width }}"
                height="{{ card_product.featured_media.height }}"
              >

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                <img
                  src="{{ card_product.media[1] | image_url: width: 533 }}"
                  alt="{{ card_product.media[1].alt | escape }}"
                  class="motion-reduce"
                  loading="lazy"
                  width="{{ card_product.media[1].width }}"
                  height="{{ card_product.media[1].height }}"
                >
              {%- endif -%}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
sirkett
Tourist
6 0 1

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

LitCommerce
Astronaut
2860 684 718

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.

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
mbrasher
Visitor
1 0 0

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. 😅 (even though they're high resolution and perfect on the individual product pages)
sunsetseattle
Visitor
3 0 0

Same! Does anyone have an update to this code?