Shopify Product Images Blurry on Collection Pages

The real symptom

Merchants often say “the uploaded images are high resolution,” “PDP images look fine,” or “the image becomes sharp when I zoom in.” That points to a theme/responsive-image issue, not necessarily bad photography or Shopify compression.

Likely causes

• The theme requests too small an image. Collection cards may load a 300–500px image even when the displayed card is much larger on desktop or retina screens.
• The sizes attribute is wrong. The browser chooses the image candidate based on layout hints. Bad hints can make it choose a blurry source.
• A theme multiplier reduces the image size. Some Dawn-era fixes changed image-size calculations that were causing small collection images.
• Crop or image ratio settings fight the source image. Theme card settings can crop, zoom, or stretch images in a way that looks soft.
• Legacy image code is still used. Older custom themes may still use old image filters or hardcoded CDN sizes.

Confirmed Community fix

Multiple Shopify Community threads point to collection-card theme code as the fix. Recent Dawn threads recommend checking image crop/size settings and serving higher-resolution responsive images. Older Dawn threads describe product images that are sharp on the product page but blurry in collection grids and featured collections. Shopify’s Liquid docs support this direction: image_url accepts width/height parameters, and image_tag generates image markup for the storefront.

Admin path

1. Go to Shopify Admin → Online Store → Themes.
2. Duplicate the live theme before editing.
3. Open Customize and check the collection or featured collection section settings.
4. Look for image ratio, crop, grid, and card image settings.
5. If settings do not fix it, open Actions → Edit code.
6. Search for card-product.liquid, product-card.liquid, product-grid-item.liquid, or the section rendering product cards.
7. Look for image_url, image_tag, img_url, srcset, sizes, or an image-size multiplier.
8. Preview changes on the duplicate theme before publishing.

Useful Liquid check

Modern Shopify image output usually looks more like this than a hardcoded tiny image:

{{ product.featured_image
  | image_url: width: 900
  | image_tag: loading: 'lazy' }}

The right width depends on the layout. Do not automatically use the largest possible image everywhere. Collection cards need a large enough image to look sharp, but oversized images can hurt performance.

DevTools test

Open DevTools → Elements and inspect the blurry image. Check the rendered display width and the actual image URL width. If the image is displayed around 500px wide but the URL is requesting a 200px or 300px asset, the browser is stretching it. Also check the Network tab to see which image candidate the browser actually downloaded.