When I import my custom theme, the image quality looks bad on the collection pages, the same image look shigh quality when I use a shopify theme, how do I fix this error
Topic summary
Issue: A custom theme import causes poor image quality on collection pages, while Shopify’s default themes display the same images in high quality.
Root Cause: The theme was modified from a width-limited collection grid to a full-bleed layout without updating image dimensions. Originally, the theme had a 1200px page width limit, so it requested appropriately sized images (e.g., 300px for 4-per-row products). After removing this limit, images stretch to larger sizes (e.g., 500px on 2000px screens) but the theme still requests the smaller 300px files, resulting in pixelation.
Solution: Modify the card-product.liquid file in three locations (line 75 in Dawn theme v15.2.0). Replace the existing code with:
sizes="(min-width: 990px) calc(100vw / 4), calc(100vw / 2)"
This instructs the theme to load images at half the window width for screens under 990px, and quarter width for larger screens, ensuring proper image quality across all viewport sizes.
Status: Resolved with specific code fix provided.
You need to see how image elements are rendered there.
If it’s completely custom, then the theme dev should have taken care about proper image sizing, if it’s a heavily modified theme, then people often change from width-limited collection grid to a full-bleed one without changing the image dimensions.
Anyways, need to see the theme preview (at least) and a Liquid code to suggest anything more concrete.
That was spot-on though:
A bit of explanation:
originally, the theme has a “page width” which limits width for most sections. By default it’s 1200px.
So the theme code “knows” that if the browser is wider than 1200px and there are 4 products shown per row, each product image would be no wider than 300px (it’s a bit more complex than that, but).
Your page width limit is removed, so when your screen is, say 2000px wide, the image will be stretched to 500px, but the theme does not “know” this and still requests a 300px-wide image file.
You need to find this code – there are 3 places in this file, change all of them:
and replace the code on this line with this:
sizes="(min-width: 990px) calc(100vw / 4), calc(100vw / 2)"
This, basically, instructs the theme to load files which are half of the window width if window is less than 990px wide and quarter of the window width – if the window is wider than that.
if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it