Product images are blurry on collection pages in Dawn theme

[kbroadhurst]

Hi, I’m having trouble with my website where my product image thumbnails are showing up blurry on the collection pages. The images are a good resolution, to the shopify guidelines and appear totally fine and crisp on the product pages themselves but on the collection listing page they’re blurry. The second image that shows on hover seems to be fine but the main image for every product is blurred.

Can somebody help with this please?

Website (links to a collection page) - https://katebroadhurst.com/collections/bestselling-art-prints

[Mustafa_Ali]

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
before the body ----->
if this code work please do not forget to like and mark it solution

[rajweb]

Hey @kbroadhurst ,

It looks like your collection page is serving low-resolution images, causing them to appear blurry. To fix this, you can adjust the image size in the theme code. In your product-card.liquid or similar file, update the image URL to a higher resolution, like this:

{{ product.featured_image | img_url: '800x' }}

Alternatively, use the full-size image:

{{ product.featured_image | img_url: 'master' }}

You may also want to use the srcset attribute for better responsiveness and higher quality on retina displays:

Let me know if you need help applying these changes! Please feel free to connect with me. Thanks!

Best,

Rajat

Shopify Expert

[Dotsquares]

Hi @kbroadhurst You can try following :-

1. Check for option “Image size” or “Image crop” and set it to “Natural” or “Large”

2. Locate your collection product grid file and find the code - {{ product.featured_image | image_url: ‘300x300’ }}

and replace it with {{ product.featured_image | image_url: ‘master’ }}

Let me know if this works for you.

[kbroadhurst]

Hi Rajat, thanks for your speedy reply. I have looked at the card-product.liquid file and there is a lot of code there, I’m not sure what to change. I’ve copied a bit of the code from this below. Would you possibly be able to have look and advise further? I also have a main-collection-product-grid.liquid file, not sure if I should be looking there too? I’m a bit lost!

{%- unless skip_styles -%}
{{ ‘component-rating.css’ | asset_url | stylesheet_tag }}
{{ ‘component-volume-pricing.css’ | asset_url | stylesheet_tag }}

{{ ‘component-price.css’ | asset_url | stylesheet_tag }}
{{ ‘quick-order-list.css’ | asset_url | stylesheet_tag }}
{{ ‘quantity-popover.css’ | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == ‘portrait’
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == ‘adapt’
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}

{%- if card_product.featured_media -%}

{% comment %}theme-check-disable ImgLazyLoading{% endcomment %} {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src=“{{ card_product.media[1] | image_url: width: 533 }}”
sizes=“(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)”
alt=“”
class=“motion-reduce”
loading=“lazy”
width=“{{ card_product.media[1].width }}”
height=“{{ card_product.media[1].height }}”

{%- endif -%}

{%- endif -%}

[rajweb]

Thanks for sharing the code, You’re super close — and you’re 100% looking in the right spot: that card-product.liquid snippet does control the image rendering on your collection page, and I can see the main image logic.

From the code you shared, this line is what determines the image that initially loads:

src="{{ card_product.featured_media | image_url: width: 533 }}"

That’s your culprit! It’s asking Shopify to serve an image resized to 533 pixels wide, which is just a bit too low — especially for retina/high-density screens, which is why it’s looking blurry.

Here’s What You Can Do to Fix It:

Change this line:

src="{{ card_product.featured_media | image_url: width: 533 }}"

To something sharper, like:

src="{{ card_product.featured_media | image_url: width: 800 }}"

Even better, update the srcset too for proper retina support:

srcset="
  {{ card_product.featured_media | image_url: width: 400 }} 400w,
  {{ card_product.featured_media | image_url: width: 800 }} 800w,
  {{ card_product.featured_media | image_url: width: 1200 }} 1200w
"
src="{{ card_product.featured_media | image_url: width: 800 }}"

And no need to touch main-collection-product-grid.liquid — the image is coming straight from this file you’re already in.

if you want help to implement this please feel free to reach out me.

[kbroadhurst]

Thank you! That has worked and the images look sharper now, hugely appreciated! But I’ve managed to break something else in the process. There should be a second image which shows on hover, this was working before but has stopped since I changed the code, maybe I accidentally deleted something I shouldn’t have? Do you have any idea where I should look and how I can get the second image to show on hover again?

[kbroadhurst]

Actually, don’t worry I managed to fix it! Thank you

[rajweb]

I’m really glad to hear you found a solution and everything is working now!

If you ever need any help with Shopify customizations or run into any issues in the future, please don’t hesitate to reach out—I’ll be happy to assist.

Wishing you continued success with your store!

Best regards,
Rajat

Shopify Expert

[emilymahy]

Hi,

I am having this same issue and have updated the code as suggested above but it hasn’t improved the quality of the displayed image. Here is the code I have updated

srcset="

              {%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 400 }} 400w,{%- endif -%}

              {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 800 }} 800w,{%- endif -%}

              {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 1200 }} 1200w,{%- endif -%}

              {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 1400 }} 1400w,{%- endif -%}

              {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 1800 }} 1800w,{%- endif -%}

              {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 2000 }} 2000w,{%- endif -%}

Plus this code line to 800

src=“{{ card_product.featured_media | image_url: width: 800 }}”

Can someone help me with this?

Link to blurry images on my site

CLASSIC Collection - Spring/Summer 25