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.
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.
1 Like