Blurry collections images Dawn theme

Diashop
Tourist
9 0 3

We have an issue that our product images in collection views and product sliders e.g. on "home" landing page are blurry. When clicking on the individual product the images are crystal clear on the product page. 

I already read through this forum but could not find a fix without changing the entire theme. So I really need your help to fix this.

Thanks in advance for any advice!

Replies 20 (20)
dmwwebartisan
Shopify Partner
9829 2237 3078

@Diashop 

Please share your store URL & screenshot.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Diashop
Tourist
9 0 3

URL: damandia.myshopify.com

PW: roomaw

Appreciate your help!

Capture.PNG

 

dmwwebartisan
Shopify Partner
9829 2237 3078

@Diashop 

Please check following URL for help

https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/td-p/1311709/page...

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Diashop
Tourist
9 0 3

I know this thread but to what I understand their solution is to rebuild everything in craft theme. I would not really like to do it because it will be much work. Is there any code solution?

Diashop
Tourist
9 0 3

After some investigation I found the following:

The original full resolution image is: https://cdn.shopify.com/s/files/1/0593/7830/3162/products/Test.jpg?v=1629651700

The file it pulls to be displayed on the page in the collection is: https://cdn.shopify.com/s/files/1/0593/7830/3162/products/Test_360x.jpg?v=1629651700  And this file is much too low resolution for the image size. But I can not find out why it is using such a low resolution and not a higher resolution version. Any idea how to fix that?

SpotterJ
Tourist
16 0 4

Did you manage to find out?

 

I'm hunting for the same thing.

Sarah05
Tourist
10 0 4

I'm also struggling with this - please let me know if you find a solution.

SpotterJ
Tourist
16 0 4
SpotterJ
Tourist
16 0 4

Find your product-card.liquid file and then this:

 

 

            <img
              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '165x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"

 

that's the code that finds the current viewport width and then the image resolution that goes with it.

 

you can choose what resolution image gets used for each viewport width. Its the resolution followed by an x that tells Shopify image server how big to render an image, ie filename_360x.jpg

 

I just upped every one to the next res up, so instead of a 360 pixels wide image, I go for the next one, 533 pixels. Rinse and repeat, and we get:

 

              srcset="{%- if product_card_product.featured_media.width >= 165 -%}{{ product_card_product.featured_media | img_url: '360x' }} 165w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 360 -%}{{ product_card_product.featured_media | img_url: '533x' }} 360w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 533 -%}{{ product_card_product.featured_media | img_url: '720x' }} 533w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 720 -%}{{ product_card_product.featured_media | img_url: '940x' }} 720w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 940 -%}{{ product_card_product.featured_media | img_url: '1066x' }} 940w,{%- endif -%}
                {%- if product_card_product.featured_media.width >= 1066 -%}{{ product_card_product.featured_media | img_url: '1440x' }} 1066w,{%- endif -%}
                {{ product_card_product.featured_media | img_url: 'master' }} {{ product_card_product.featured_media.width }}w"

 

 

do the same for the set below, which renders the alternate (mouseover) images.