This worked! Wow. After all this time and no other solutions working, this actually solved it. Thank you!
Topic summary
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: 4todivided_by: 1in 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.
2 Likes