Skip to content

Shopify Dude Fix

Why Are My Shopify Product Images Blurry on Collection Pages but Sharp on Product Pages?

A Shopify Fix Radar guide for product images that look sharp on the product page but blurry on collection grids, featured collections, or product cards.

Collection Pages Dawn Theme Fix Radar Images Liquid Optimize
Who this helps Store operators, admins, and automation builders
Format Fix
Last reviewed

Fix Radar

Difficulty: ★★★☆☆   Time to diagnose: 10–20 minutes

Usually caused by: small requested CDN image widths, incorrect srcset or sizes, CSS stretching, retina displays, small source images, or a customized product-card snippet.

Quick answer: If product images are sharp on the product page but blurry on collection pages, the original file is usually fine. The collection card is probably requesting a smaller Shopify CDN image and stretching it larger in the grid. Inspect the rendered image, compare natural width to displayed width times device pixel ratio, then adjust the Liquid image_url, image_tag widths, and sizes.

The real symptom

Merchants describe this almost the same way every time: “The product image is sharp on the product page but blurry on the collection page.” It may also show up in featured collections, product sliders, homepage product cards, or Dawn collection grids. The key clue is that the same product image looks good somewhere else.

Why this happens

Shopify stores the original product image, then serves transformed image URLs for the storefront. A Liquid snippet can request a 300px image, a 600px image, a 1200px image, or a responsive srcset. Blur happens when the browser receives an image smaller than the space it is asked to fill. On retina screens, the required pixel width can be roughly the rendered CSS width multiplied by device pixel ratio.

That means Shopify may be doing exactly what the theme asked. The theme asked the CDN for a small image, CSS stretched it, and the browser displayed a soft version.

Likely causes

  • The product-card snippet requests too small a width, such as image_url: width: 300.
  • The sizes attribute tells the browser the image will display smaller than it really does.
  • CSS changed the grid width without updating image sizes.
  • The source image is genuinely small and is being upscaled.
  • object-fit, crop settings, aspect-ratio boxes, or lazy placeholders are making the issue look like compression.
  • A theme update or tutorial changed card-product.liquid.

Confirmed Community fix

Shopify Community threads about blurry Dawn collection images go back years and still repeat today because the root issue is durable: product card image code often requests an image that is too small for the rendered grid. The fix is to inspect the collection card image URL and increase or correct the responsive image logic, not to re-upload every image blindly.

Exact admin path

Theme settings: Shopify admin → Online Store → Themes → Customize → open a Collection template or Home page featured collection → inspect image ratio, crop, and product-card settings.

Theme code: Online Store → Themes → three-dot menu → Duplicate → duplicated theme → Edit code. Start with snippets/card-product.liquid, snippets/product-card.liquid, sections/main-collection-product-grid.liquid, sections/featured-collection.liquid, and product-card CSS.

DevTools image test

Open the collection page, inspect the blurry image, and run this in the Console while the image is selected:

const img = $0;
({
  renderedWidth: img.clientWidth,
  renderedHeight: img.clientHeight,
  naturalWidth: img.naturalWidth,
  naturalHeight: img.naturalHeight,
  devicePixelRatio: window.devicePixelRatio,
  neededWidthForSharpness: Math.ceil(img.clientWidth * window.devicePixelRatio),
  src: img.currentSrc || img.src
});

If naturalWidth is smaller than renderedWidth × devicePixelRatio, the browser is displaying an image that is too small for the slot.

Liquid check

Look for image code like this in the product-card snippet:

{{ card_product.featured_media | image_url: width: 360 | image_tag }}

That may be too small for a wide card or retina display. A better pattern requests a larger maximum and gives the browser a useful width set:

{{ card_product.featured_media
  | image_url: width: 1200
  | image_tag:
    loading: 'lazy',
    widths: '360, 533, 720, 940, 1066, 1200',
    sizes: '(min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)'
}}

The exact values depend on theme grid, page width, column count, and gaps. Use DevTools to confirm.

Known fix

  • Increase the maximum image_url width for product cards.
  • Provide a better widths list for image_tag.
  • Correct the sizes attribute so the browser selects a large enough image.
  • Stop CSS from scaling tiny manufacturer images beyond their original size.
  • Replace genuinely small originals when necessary.

Common misunderstanding

“The image is high resolution in admin” is not the full test. The important question is which transformed CDN image the collection card requested and how large the browser displayed it. The product page and collection page often use different image URLs.

Before you edit code

Duplicate the theme and test one product with a very large original image. If large originals look sharp but small manufacturer images stay blurry, the source files are part of the issue. If every product is blurry only on collection cards, inspect the card snippet.

Do not do this

  • Do not re-upload every product image before checking the rendered CDN URL.
  • Do not fix blur with CSS filters.
  • Do not request 3000px product cards everywhere and hurt performance.
  • Do not ignore mobile retina screens.

How to test the fix

  1. Check a collection page on desktop.
  2. Check a featured collection on the homepage.
  3. Check a real mobile device.
  4. Run the DevTools natural-width test.
  5. Open Network → Img and confirm the requested image width increased without going absurdly large.

Sources

Keep going

More Shopify Answers

Browse the library