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)

rusinov
Excursionist
20 2 16

I've opened an issue on GitHub for this with more details: https://github.com/Shopify/dawn/issues/616

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

I don't know why people always ask for your link first

It's easy my friend

Video:

 

 

How to make your product images smaller in Shopify 2.0 Dawn theme

Firstly you can identify the problem:

HamishDavisonIC_0-1631459826553.png

 

The product image is too large

HamishDavisonIC_1-1631459826581.png

 

In this example you want to look for product__media in section-main-product.css

HamishDavisonIC_2-1631459826583.png

 

 

Then you simply want to change the .product:not(.product — no-media) .product__media-wrapper {
 max-width: 64%;
 width: calc(64% — 1rem / 2);
 }

HamishDavisonIC_3-1631459826639.png

 

 

Change the percentage to whatever you want and you’re done

 

rusinov
Excursionist
20 2 16

Hey Hamish, unfortunately this does not solve the problem I'm having. The issue isn't the size of the block. Issue is that the image itself gets downsized in half and then displayed at full width with making it blurry.

I've fiddled with the product-media.liquid file, I believe the answer lies somewhere in these bits of code, but can't decipher it. The zoom-in modal opens image even larger and even more blurrier.

{%- if media.media_type == 'image' -%}
  <img
    srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | img_url: '550x' }} 550w,{%- endif -%}
            {%- if media.preview_image.width >= 1100 -%}{{ media.preview_image | img_url: '1100x' }} 1100w,{%- endif -%}
            {%- if media.preview_image.width >= 1680 -%}{{ media.preview_image | img_url: '1680x' }} 1680w,{%- endif -%}
            {%- if media.preview_image.width >= 2048 -%}{{ media.preview_image | img_url: '2048x' }} 2048w,{%- endif -%}
            {%- if media.preview_image.width >= 4096 -%}{{ media.preview_image | img_url: '4096x' }} 4096w{%- endif -%}"
    sizes="(min-width: 750px) calc(100vw - 12rem), 100vw"
    src="{{ media.preview_image | img_url: '750x' }}"
    alt="{{ media.alt | escape }}"
    loading="lazy"
    width="1100"
    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
    data-media-id="{{ media.id }}"
    {% if variant_image %}class="product__media-item--variant"{% endif %}
  >
{%- else -%}

 

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

I'm not at home so I can't test this but you could try removing the if statements like I have here

 

{%- if media.media_type == 'image' -%}

  <img

    srcset="{%- if media.preview_image.width >= 550 -%}{{ media.preview_image | img_url: '550x' }} 550w,{%- endif -%}

    sizes="(min-width: 750px) calc(100vw - 12rem), 100vw"

    src="{{ media.preview_image | img_url: '750x' }}"

    alt="{{ media.alt | escape }}"

    loading="lazy"

    width="1100"

    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"

    data-media-id="{{ media.id }}"

    {% if variant_image %}class="product__media-item--variant"{% endif %}

  >

{%- else -%}

vccreative
Shopify Partner
6 0 0

I tried this and won't let you save the code.

HamishDavisonIC
Shopify Partner
62 9 68

Interesting, i'll have to have a closer look when I get home. Will have a solution for you in around 2 hours 

rusinov
Excursionist
20 2 16

I've tried that, no cigar. I managed to get thumbnails to look better, but zoom-in modal is still very blurry.

If you delete this from product-thumbnail.liquid:

Screen Shot 2021-09-13 at 10.04.05.png

But that's a hack not a solution.

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

Could you try deleting everything in the <div> </div> and see what happens?

 

You can always undo after

rusinov
Excursionist
20 2 16

Removing div's eliminates all product's images from the product page or featured product modules. Doesn't affect collection thumbnails.

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68
    width="1100"
    height="{{ 1100 | divided_by: media.preview_image.aspect_ratio | ceil }}"
    data-media-id="{{ media.id }}"
    {% if variant_image %}class="product__media-item--variant"{% endif %}

Try playing with the numbers here

 

 

rusinov
Excursionist
20 2 16

Not it.

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

Just been trying to 30 minutes can't work it out - there seems to be two parts of the code which need to be changed though

rusinov
Excursionist
20 2 16

@vccreative  Nothing on Git at all. Is there any way to bump it up in priority somehow? Pretty major issue I think, considering a lot of people may use dropship sites like Prihtful, so all of those generated images (1000x1000) will be blurry in the Dawn theme. I've tried everything I could but still cant understand why it's downsizing images that are already small. @HamishDavisonIC thank you for spending time on this!

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

 

@rusinov last night I did something where I reduced the image size so it wasn't blurry anymore, it was more of an accident and I'll have to find out how I actually did it but would this solve your problem? It is still bigger than the thumbnail image 

rusinov
Excursionist
20 2 16

I dont 100% understand what you are saying bud. I've mentioned somewhere above that I was able to make thumbnails to look ok by deleting part of the code (it has a screenshot of what I've deleted), but when you click on the product image to view it larger (modal) it's hella blurry. Of course randomly deleting part of the code is not a solution either.

sapandbark.com
vccreative
Shopify Partner
6 0 0

Yes, I believe the same and I've been changing the measurements but no luck.

HamishDavisonIC
Shopify Partner
62 9 68

@rusinov Try swapping to the other Dawn option, seems to have solved it for me

 

HamishDavisonIC_0-1631910915750.png

 

rusinov
Excursionist
20 2 16

So I was able to solve it by getting the updated theme and pulling a code from a few files:

rusinov_0-1631911041880.png

Not sure which one did the trick, but it's better now.

 

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

@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
Excursionist
20 2 16

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

sapandbark.com
HamishDavisonIC
Shopify Partner
62 9 68

@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
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

 

 

kbeautyblossom
Excursionist
37 0 16

Thank you for this too. 

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

Eggae
Visitor
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
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
rusinov
Excursionist
20 2 16

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...

sapandbark.com
NeckAround
Visitor
1 0 0

works great! Thank you so much. Maybe they updated this with new version? We han v.9 and it was still buggy. I see v.12 now is out. 

vish_ravalji
Shopify Partner
1 0 0

Works

StaceyReverie
Visitor
1 0 0

Hello! Are you able to help me with this? I'm having the same issue with blurry product images and tried following these instructions but no 'craft' version of the theme appears. Thank you!

 

StephanieG
Excursionist
10 0 2

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

StephanieG
Excursionist
10 0 2
Click to expand...
 

Mine is still burry

Pauline_Millwar
Tourist
10 0 9

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?image-issue.jpg

StephanieG
Excursionist
10 0 2

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 

fineartprint
Excursionist
11 0 3

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
Excursionist
20 2 16

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

sapandbark.com
fineartprint
Excursionist
11 0 3
did you try what i did? i applied these CSS changes on DAWN theme, its
second version
rusinov
Excursionist
20 2 16

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.

sapandbark.com
FitFatTony
New Member
4 0 0

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
Shopify Partner
6 0 0
Yes I started uploading them in a lower res and it helped usually 1200 by
1200 px and that made a huge difference.
FitFatTony
New Member
4 0 0

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

Jules81
Excursionist
12 0 10

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. 

 

Jules81_0-1640780009960.png

 

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
blowerband
Tourist
10 0 1

@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
Excursionist
12 0 10

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: 

Jules81_0-1640872458442.pngJules81_1-1640872480372.png

 

 

Butterflykeys
Shopify Partner
4 0 8

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
4 0 8
Try using a photo that has a 1:1 aspect ratio instead of 16:9.

hw31
Tourist
13 0 0

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

Jules81
Excursionist
12 0 10