Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
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!
Solved! Go to the solution
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
I personally recommend Craft as it looks nice af
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!
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!
I've opened an issue on GitHub for this with more details: https://github.com/Shopify/dawn/issues/616
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:
The product image is too large
In this example you want to look for product__media in section-main-product.css
Then you simply want to change the .product:not(.product — no-media) .product__media-wrapper {
max-width: 64%;
width: calc(64% — 1rem / 2);
}
Change the percentage to whatever you want and you’re done
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 -%}
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 -%}
I tried this and won't let you save the code.
Interesting, i'll have to have a closer look when I get home. Will have a solution for you in around 2 hours
Yes, I believe the same and I've been changing the measurements but no luck.
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:
But that's a hack not a solution.
Could you try deleting everything in the <div> </div> and see what happens?
You can always undo after
Removing div's eliminates all product's images from the product page or featured product modules. Doesn't affect collection thumbnails.
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
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
@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!
@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
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.
So I was able to solve it by getting the updated theme and pulling a code from a few files:
Not sure which one did the trick, but it's better now.
User | RANK |
---|---|
197 | |
105 | |
79 | |
62 | |
61 |