Dawn Theme | Blurry image display despite high image resolution

rene_s
Tourist
15 0 2

We use the Dawn theme and the images in the listing are displayed blurred, although they were uploaded in the correct size (on the article page they are sharp again).
It is the same with the start page banner. 

product page.PNG

listing.PNG

Replies 6 (6)

LitCommerce
Astronaut
2860 684 744

Hi @rene_s,

Please go to snippets > card-collection.liquid file and change code here:

beforebeforeafterafter

Code:

<img
              src="{{ card_collection.featured_image | image_url: width: 1500 }}"
              alt="{{ card_collection.title | escape }}"
              height="{{ card_collection.featured_image.height }}"
              width="{{ card_collection.featured_image.width }}"
              class="motion-reduce"
            >

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!
rene_s
Tourist
15 0 2

Hi. Thanks for helping out! 
Unfortunately it`s not working. i changed the code but nothing happened. @LitCommerce 

LitCommerce
Astronaut
2860 684 744

Hi @rene_s,

Please send your site and if your site is password protected, please send me the password. I will check it.

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!
rene_s
Tourist
15 0 2

fg_sf2021#!

LitCommerce
Astronaut
2860 684 744

Hi @rene_s,

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

beforebeforeafterafter

Code:

<div class="card__media">
            <div class="media media--transparent media--hover-effect">
              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              <img
                src="{{ card_product.featured_media | img_url: 'master' }}"
                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 }}"
              >
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

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

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!
uvikart
Visitor
1 0 0

This helped me! thank you so much!!!