Shopify themes, liquid, logos, and UX
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!
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)
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?
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
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.
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.
Installing the theme again and activating it will accomplish same thing, yes.
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
Hello! Thanks for this! I know this is an old post but I'm experiencing the same with Dawn (15.0) and I was wondering if you just needed to copy the code (from the latest version of Dawn) only from Porduct-media? or did you also copy it from these?
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:
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?
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
Any reply back on this on Github?
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' %}
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:
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
works!, thanks you very much!, you need "delete both lines
This worked! Wow. After all this time and no other solutions working, this actually solved it. Thank you!
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024