Re: Blurry product images in Dawn theme

Solved

Why are my Dawn theme product images blurry on the front end?

rusinov
Excursionist
20 2 16

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!

sapandbark.com
Accepted Solutions (3)
HamishDavisonIC
Shopify Partner
62 9 68

This is an accepted solution.

@rusinov if you could mark this answer as a solution I would appreciate it so it reaches more people:

Let's talk about how to make your Dawn images not so blurry!

This was more because Dawn is currently in development than anything else 

All we need to do is update Dawn, all your products etc. will be saved but you will have to quickly put your images (which will already be uploaded) back into the customizer, but it's worth it as the quality is vastly superior

HamishDavisonIC_0-1631922161324.png

HamishDavisonIC_1-1631922186745.png

HamishDavisonIC_2-1631922204984.png

I personally recommend Craft as it looks nice af

 

 

View solution in original post

rusinov
Excursionist
20 2 16

This is an accepted solution.

That indeed solves the issue! For anyone that is having an issue, just add another copy of Dawn theme, look into code, and replace everything from product-media into your active theme code. No more blurriness! Boo-ya!

sapandbark.com

View solution in original post

rusinov
Excursionist
20 2 16

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!

sapandbark.com

View solution in original post

Replies 66 (66)
Butterflykeys
Shopify Partner
4 0 8

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

 

 

hw31
Tourist
13 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?

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

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

rusinov
Excursionist
20 2 16

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.

sapandbark.com
blowerband
Tourist
10 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
20 2 16

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

sapandbark.com
blowerband
Tourist
10 0 1
Unfortunately for me they are still very blurry ill upload a pic when i get
a chance.
Chafirovitch
Visitor
1 0 0

Hey Rusinov, i hope u still active in here cause im trying to solve this for about a week now. Is there any otherway of solving it in 2023? Apreciate the attention

Butterflykeys
Shopify Partner
4 0 8
I'm not recently active. At a quick glance, it appears that the source code
in the newer versions of DAWN have been changed, and the logic has moved to
another file. possibly to media-gallery.js or another similar file. it's
hard to tell without closer examination.
For now, i've neglected my ecommerce project, but eventually i will circle
back to it, and will need to resolve this issue on the newest theme if
shopify still hasn't fixed it. smh! If so, at that point I will post what I
find.
Good luck!
LisaNielsen
Visitor
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?

DJ2023
Visitor
1 0 1

Hi Lisa,

I noticed your store is working correctly now.  May I ask what you did?  I started with Dawn, updated to Craft, tried different code but my images are still blurry when they are clicked on.  the images are 2500x2500 so have plenty of quality.  Thanks in advance! DJ

vccreative
Shopify Partner
6 0 0

Any reply back on this on Github?

donfromunu
Visitor
2 0 1

I had the same issue. I found that if you go to the product-template.liquid, you can change the product image size in second line of code.  Since all of my product images are 1600x1600, I change the line of code to:


{% assign product_image_size = '1600x1600' %}

 

Screen Shot 2022-07-26 at 1.39.31 AM.png

alki
Shopify Partner
1 0 3

Here's another solution WITHOUT USING CRAFT! Hopefully someone finds this useful. Find this line of code in card-product.liquid in the Snippets folder, and delete what I've highlighted:

 

alki_0-1688632615477.png

 

How it works: I discovered just with inspect element that Shopify will actually give a "width" argument to your product's image URL, which is supposed to dynamically generate an efficiently-sized image, presumably to reduce load time. Not really sure, but no matter how I sized my screen it'd always use a 360px image, hence the blurriness when it gets blown back up to the card size. It's not like loading a large image takes much nowadays, so you can just always load the max width. So, get rid of that whole cascade of if statements and just keep the last one.

 

If you want to play around with this, feel free to use this URL to one of my images. You can change the width argument, or remove the '&width=' altogether to load the full resolution.

https://alki.studio/cdn/shop/files/IMG_2896.png?v=1688509705&width=600

felipegonzalezm
Visitor
1 0 2
works!, thanks you very much!, you need "delete both lines

felipegonzalezm_0-1696377749749.png

 

 

MNMC
Visitor
2 0 2

This worked! Wow. After all this time and no other solutions working, this actually solved it. Thank you!