Blurry product images in Dawn theme

Solved
rusinov
Excursionist
19 2 9

Hey guys, I'm having issues where my product images are very blurry on the front end. They are fine when I preview them on the back end. Start happening after I've switched to the new Dawn theme. Images that I've uploaded are 1000px +, but site displaying them at half of that. Is there a way to fix that? Site: sapandbark.com

Thanks!

sapnadbark.com
Replies 56 (56)
rusinov
Excursionist
19 2 9

Ok so check it out. 
First, go to where you see what theme you got, from there add new theme and choose dawn, it will add it as a new theme. After it’s installed, go to that theme’s code editor and copy everything from that media file. Now go to your theme’s code and paste/replace that copied code in exactly same file. Save and done. Let us know if it works for ya.

sapnadbark.com
blowerband
Tourist
9 0 1

Thanks @rusinov what if I just created my store fresh again?  Im doing a total resdesign so shopify suggested I start another trial where I loaded my products and choose the dawn theme.  I just did this two days ago so I would assume its the latest and greatest version of the theme and my pictures were horriable.  Let me know if im not understanding still.  

rusinov
Excursionist
19 2 9

Installing the theme again and activating it will accomplish same thing, yes.

sapnadbark.com
blowerband
Tourist
9 0 1
Unfortunately for me they are still very blurry ill upload a pic when i get
a chance.
Eggae
New Member
2 0 1

Images in my products page looks fine but all my images on the product grind are blurred. Can you help? Thanks.

 

rusinov
Excursionist
19 2 9

This is an accepted solution.

Ok I think I found the actual solution. Look for product-card.liquid

And then change these lines (there are couple of them in that file:

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }

Basically, just change "divided_by: 4" to "divided_by: 1"

Voila!

sapnadbark.com
rusinov
Excursionist
19 2 9

Also in product-thumbnail.liquid:

find "sizes=" lines and replace first part of them with this (see screenshot):

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 0 | divided_by: 1 }}px, ...

This should fix blurry product images on the product pages themselves too. 

 

Took me forever to find these. But no more blurriness. That's some janky code there Shopify...

sapnadbark.com
LisaNielsen
New Member
1 0 0

Hi @HamishDavisonIC ! I tried following your instructions as my pictures are waaay to huge using the Dawn theme, whenever I click on an individual product. However, the image is not reducing, even if I change it to something like 20%. Do you know what I am doing wrong? 

Here's a screen shot of the code, I have changed:

LisaNielsen_0-1643198054494.png

 

 

Here's a link to a specific product so you can see the image size:

https://www.tinyreusers.com/products/806

 

I tried following your YouTube video but the text is too small, I can't see what you are looking at in the code.

 

Any ideas?

Butterflykeys
Shopify Partner
3 0 7

I've just migrated to shopify because I had thought I wouldnt really need to touch any code. So with that I would like to say shame on shopify for making their flagship theme buggy and not fixing it or providing support for it.

With that said, I think I have fixed the issue. 
The issue is in main-product.liquid at line 171. 
Replace: 

sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 12), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)"

 

With:

 sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 4), (min-width: 750px) calc((100vw - 16.5rem) / 8), calc((100vw - 8rem) / 5)" 

I hope this helps someone, as now i'm using the latest version of DAWN on Feb 7, 2022

lambcrash
Tourist
5 0 0

This took a lot of faffing about.  If you're reading this comment so late into the thread, I assume nothing so far has worked for you and you are still pulling your hair out.

 

My issue was that only the first product image on the collections page looked sharp; it was the ones after it that looked a bit blurred. It seems the changes you need to make will depend on the image size you use, so applying a solution in this thread that someone else got working may not necessarily work if you're not using the exact same size images as they are. Perhaps this is obvious if you have more experience with CSS, but it wasn't for me at the time.

 

How I fixed it:

My offending product image(s) is 1080, not 1200, so I tweaked Butterflykeys' solution above by navigating to main-list-collections.liquid and searched for min-width, then I changed the code in line 39 which refers to the image size that the problem image belongs to. For example, I ended up changing the 1000 to become 1080, which (I assume) will then only compress images that are larger than 1080, so what was previously this:

 

 

 {%- if collection.featured_image.width >= 1000 -%}{{ collection.featured_image | img_url: '1000x' }} 1000w,{%- endif -%}

 

 

Became this:

 

 {%- if collection.featured_image.width >= 1080 -%}{{ collection.featured_image | img_url: '1080x' }} 1080w,{%- endif -%}

 

Which I guess is saying, hey - if the picture size equals or is larger than 1080, resize it to 1080. I didn't change the next line, so images larger than 1500 have hopefully not been affected.

 

I hope this helps anyone else still struggling with the problem.

Butterflykeys
Shopify Partner
3 0 7
Try using a photo that has a 1:1 aspect ratio instead of 16:9.

hw31
Tourist
12 0 0

thx but i dont think that this can be a longterm solution. 16:9 is the standart.

Jules81
Tourist
10 0 2
Butterflykeys
Shopify Partner
3 0 7

If you use the "Image" block instead of the "Product" block the image will show crisp, however it wont link back to the item. 

Otherwise you'd have to find the proper section in the code where the large photo of the collage is created and change the size properties to something like the following: 
(min-width: 1200px) 737px, (min-width: 750px) 500px, calc(100vw - 30px)

Butterflykeys_0-1646302791592.png

 

 

lambcrash
Tourist
5 0 0
Hi thanks. They are square 1080 by 1080 already. I don’t know it seems to be fixed now.
hw31
Tourist
12 0 0

thx! im not sure if im searching at the right location. i guess i have to edit the theme? when i then enter any of the above code it cant find anything. could you please give me more detailed instruction where i have to search for it?

noap
Excursionist
26 0 2

Hello, my issue is also that my collection photos are blurry but when gpoing into the actual individual product photos they are crystal clear. i cvannot find the section you are referign to to try and fix? my images are 1296x1829 thanks for any help