Users report blurry product images on Shopify’s Dawn theme front-end, despite images appearing sharp in the backend. The core issue stems from Dawn automatically downsizing high-resolution images (1000px+) by half, then displaying them at full width, causing visible blur—especially in modal/zoom views.
Primary solutions identified:
Update Dawn theme: Pull fresh code from GitHub, particularly from product-media files. Requires re-uploading customization images but preserves products.
Modify product-card.liquid: Change divided_by: 4 to divided_by: 1 in the sizes attribute to prevent aggressive downsizing.
Adjust modal width: In section-main-product.css (line 651), reduce width from 100% to 70-80% to minimize blur on click.
Remove width parameters: Delete the dynamic width argument in card-product.liquid’s image URL code, forcing full-resolution loading instead of 360px defaults.
Customize for image dimensions: Users with non-standard sizes (e.g., 1080px vs 1200px) need to adjust corresponding values in main-list-collections.liquid.
Multiple users confirm these fixes eliminate blurriness. The issue particularly affects dropshipping sites using auto-generated images. Some solutions require testing across desktop and mobile devices for optimal results.
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.
