Product thumbnails appears blurry in Dawn 2.0. I’ve updated to the most recent Dawn version, no change. Images are uploaded in 4k. First thumbnail appears sharp. SO does the actual product image. It is only the subsequent thumbnails that are blurry as you can see below. Also, changing (clicking) the next thumbnail makes no difference, so it doesn’t seem to be a loading issue. Any ideas on why Shopify has done this, and what I can do to fix it - because this is clearly not OK for a webstore platform.
Topic summary
Product thumbnails in Shopify’s Dawn 2.0 theme appear blurry despite uploading high-resolution (4k) images. The first thumbnail and main product image display sharply, but subsequent thumbnails remain blurry.
Primary Solution:
Modify the main-product.liquid file around lines 139 and 185. Change all “divide by” values (after the / symbol) to 1 in approximately 7 locations total. This adjusts the intrinsic size of thumbnails and resolves the blurriness.
Alternative Fix:
Another user discovered thumbnails were rendering at 59x59 pixels due to a srcset attribute typo. Changing 59x to 59w in the media width specification corrected the issue, allowing thumbnails to display clearly.
Access Instructions:
Navigate to the theme editor and click “Edit code” near the Customize button to access the necessary files.
Multiple users confirmed both solutions successfully resolved their thumbnail quality issues.
1 Like
Please provide your store URL
As I saw that many others seems to have the same issue with the Dawn 2.0 theme, I contacted support who was able to solve the issue.
Code changes are needed in main-product.liquid to change the intrinsic size of the thumbnails.
On or around line 139:
On 4 places, change all “divide by” values (after the /) to 1.
On or around line 185, on 3 places, change all “divide by” values (after the /) to 1.
This solves the issue for me in Dawn 2.0.
Hope it helps others!
6 Likes
And how do you get to the code programming page…(for a programming ignoramus !!!)
Go to “Edit code” near the Customize button for the theme of the Online Shop.
I have tried this with a few different denominators and it doesn’t seem to be helping. I would be curious to see if anyone could see what I am missing: my thumbnails are supposed to be coming from large images but render really small then are upsized it seems.
Just flagging you to my response above in case you are monitoring…
Found another solution:
Played with it some more and noticed that all my thumbnail images were being set to 59 by 59 for their intrinsic values and there was a srcset that had a typo. when the srcset specifies the media width, it couldn’t look past it …changed it from 59x to 59w and it works! Thumbnails are coming way more clearly, this is the real solution, at least for me.
1 Like
This one works for me, thank you for sharing @Salty-Sleeves
1 Like
This worked for me!!! Thank you SO much @barcusmrandt !!! You’re a legend!