Why are my Dawn theme product images blurry on the front end?

Store Design

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: 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.

Summarized with AI on November 5. AI used: claude-sonnet-4-5-20250929.
3

I don’t know why people always ask for your link first

It’s easy my friend

Video:

How to make your product images smaller in Shopify 2.0 Dawn theme

Firstly you can identify the problem:

HamishDavisonIC_0-1631459826553.png
HamishDavisonIC_0-1631459826553.png800×371 198 KB

The product image is too large

HamishDavisonIC_1-1631459826581.png
HamishDavisonIC_1-1631459826581.png800×445 56.8 KB

In this example you want to look for product__media in section-main-product.css

HamishDavisonIC_2-1631459826583.png
HamishDavisonIC_2-1631459826583.png395×768 18.1 KB

Then you simply want to change the .product:not(.product — no-media) .product__media-wrapper {
max-width: 64%;
width: calc(64% — 1rem / 2);
}

HamishDavisonIC_3-1631459826639.png
HamishDavisonIC_3-1631459826639.png800×536 92.4 KB

Change the percentage to whatever you want and you’re done

1 Like