Featured Collection Page Product Images Blurry (Dawn 9.0.0)

[WholesomeBoy]

Hey,

I've been having this issue with product images being blurry on the collection page. I have not been able to find a fix that works on where on here.

Website: Wholesome Boy

Examples:

 

Thanks,

Justin

[PageFly-Noah · Accepted solution]

Hi @WholesomeBoy 

This is Noah from PageFly - Shopify Page Builder App

You can check the image divide setting in the product card file of the dawn theme

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on product-cart and following this 

And then change these lines (there are a couple of them in that file:

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }

Basically, just change "divided_by: 4" to "divided_by: 1"

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[PageFly-Noah · Accepted solution]

Hi @WholesomeBoy 

This is Noah from PageFly - Shopify Page Builder App

You can check the image divide setting in the product card file of the dawn theme

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on product-cart and following this 

And then change these lines (there are a couple of them in that file:

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }

Basically, just change "divided_by: 4" to "divided_by: 1"

Hope this can help you solve the issue 

Best regards,

Noah | PageFly

[WholesomeBoy]

"product-cart" is not an option on Dawn 9.0.0

[WholesomeBoy · Accepted solution]

Anyone reading this thread, you must follow Noah's steps, but look for "card-product.liquid" instead.

[Danmuges]

I edited that line from 4 to 1 and my images are still blurry. Am i missing something?

[VZstudios]

Can Confirm. This works perfectly.

[nuwud]

This worked brilliantly. Thanks!!
I literally only ran a search in the card-product.liquid file for "divided" in my admin code editor, found the couple of instances dividing by four, changed the 4 to a 1 on each and voila!! Worked like a charm! No more blurry images on featured-collection section in Dawn 11.0.0!!

[nikkyb]

Did exactly the same ... it's like magic 🙂

[August2]

Hello, thank you very much. This worked for me as well. But the second picture when i hover over the product is still blurry. Do you know a way to fix that?

[theacspace]

Hi Noah,

This fixed my desktop view, thanks! I noticed on my mobile view that I'm running into the same issue with the images on the product page being blurry. Do you have a fix for this?

[Addedtimekits]

Thank you for the solution! I was wondering if you know how to improve the image quality for the main product page image?

[stryker_made]

You are amazing, thank you so much!! I tried so many other forums for this issue, and yours was the one that worked. RT what WholesomeBoy said below, instead of searching for "product-cart" in the Edit Code, look for "card-product.liquid" in the Snippits dropdown, and I believe I just had to change 2 lines of code.

[irene-vintage]

Hello @WholesomeBoy ,

You can try to follow these steps:

Go to Online Store -> Themes -> Actions -> Edit code 

Go to Assets folder -> collection-template.liquid file (or something name similar to this)

Look for this code

<img src="{{ product.featured_image.src | img_url: 'master' }}" alt="{{ product.featured_image.alt }}">

To display the image at its original resolution, modify the code to use the src attribute directly instead of using the img_url filter. Replace the existing code with the following:

<img src="{{ product.featured_image.src }}" alt="{{ product.featured_image.alt }}">

Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.