Blurry product images in Dawn theme

[rusinov]

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!

[HamishDavisonIC]

@rusinov I think they're just steadily updating Dawn 🙂

We both came to the same conclusion! I spent 3 days on mine though haha

[rusinov]

Totally, I wish there was an update button without rebuilding the pages again.

[HamishDavisonIC]

@rusinov You can set up a GitHub Fork but it's beyond my technical skills right now, but I'm going to look at it soon.

[HamishDavisonIC · 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

I personally recommend Craft as it looks nice af

[kbeautyblossom]

Thank you for this too. 

I downloaded it but I wish I didn't need to start over. LOL

[Pauline_Millwar]

Hi,

Did anyone work this out? I am not a developer, but i inspected the code via a browser and i noticed that when i removed the "w" from after the number after the image url (see attached to make more sense) the image became clear.

Any ideas where this "w" comes from in the files and if it is ok to remove it?

[StephanieG]

Did anyone reply on the “w” ?

I tried it but it did nothing. I see there is a product width of 1100 so I lowered that and it did nothing. 
I do like the theme I have dawn as craft but the images are way to blurry 

[StephanieG]

Click to expand...

Mine is still burry

[StephanieG]

What is that code you found? I can view your picture

[fineartprint]

My way of kind of fixing this issue with the enormous blurry image DAWN theme loads on clicking any product images (modal view) is to alter width:100% to width:70% on 

section-main-product.css, line 651 (this has worked ok for me on desktop. So now i do not see the blurry images (most of my jpeg files are of 1500px, so loading it as it DAWN did by default, they looked terrible)

@media screen and (min-width: 750px) {
  .product-media-modal__content {
    padding: 2rem 11rem;
  }

  .product-media-modal__content > * {
    width: 80%;  /*----------HERE-------------*/
  }
  .product-media-modal__content > * + * {
    margin-top: 2rem;
  }
  .product-media-modal__toggle {
    right: 5rem;
    top: 2.2rem;
  }
}

Mobile device workaround: On mobile devices, loading full screen image looked even worse. I fixed this by adding "width: -webkit-fill-available;" on the same file, line 610, have a look below

.product-media-modal__content > * {
  display: block;
  height: auto;
  margin: auto;
  border: 0.1rem solid rgba(var(--color-foreground), 0.04);

width: -webkit-fill-available;  /*-----------HERE, you may adapt it to the width % you like, for example width:120%, just to have a little zoom effect and scroll */
}

i am not a CSS expert anymore (i am very far from that) so i cannot tell if there will be any other implications. For the moment i have tested it on my desktop PC and my mobile device, only on product pages and the result is the one i wanted. 

You may check it live on this product page https://wallprint.photo/products/fineart-print-zinal-village-swiss-alps-valais

[rusinov]

I gave up. Main product image is still blurry. Just have to live with it for now.

[fineartprint]

did you try what i did? i applied these CSS changes on DAWN theme, its
second version

[rusinov]

Yeah, looks like your css is applied to modals. I don't have problems with them. I have issues with main product images and if I use a featured product section with 2 products.

[FitFatTony]

Have you happened to find a solution yet? I just started working on my shop a week ago and noticed that the product images on shop all and the product page are super blurry. I uploaded the pictures in 2048x2048. Changing to the craft theme like some have said to do changed nothing for me. Any help is greatly appreciated.

[vccreative]

Yes I started uploading them in a lower res and it helped usually 1200 by
1200 px and that made a huge difference.

[FitFatTony]

thank you!! I will give it a try. have a great day

[Jules81]

I guess you solved the issue by now.

However, still want to share my solution with you just in case it helps. 

I think you were right with your assumption that the answer lies here: product-media.liquid

We exchanged the code you mentioned with the newest code from the current version of the dawn theme. 

They included some new scrsets and it seems to solve the issue. 

Our images were blurry before in the zoom feature - now they are crisp and sharp. 

[rusinov · 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!

[blowerband]

@rusinov  Can you explain more of what you mean here?  I am recreating my narrative store as a dawn store but the featue collections and collections images are so bad my store looks fake.  Im not sure i understand what you mean by 

"nother copy of Dawn theme, look into code, and replace everything from product-media into your active theme code"

Could you walkme through exactly what you mean?

[Jules81]

See this post https://community.shopify.com/c/shopify-design/blurry-product-images-in-dawn-theme/m-p/1430423/highl...

What he means is that you need to exchange some part of the code. 

The reason for this is the fact that the DAWN theme is still under development and apparently Shopify issues new versions of the DAWN theme. You can see the development in GitHub https://github.com/Shopify/dawn. 

This means that the version of the DAWN theme you will download from the Shopify store will change over time. 

We installed the theme in October and already something has changed. We also had issues with blurry images and we exchanged a part of the code (see the link to my post) with code from the latest version. It solved the issue for us. 

Just download the latest version of the DAWN theme here and replace accordingly: