Solved

Dawn - Image resolution blurry in product grid view

witherspoony
Tourist
5 0 5

Hi, I have changed my product grid to 1 column of products and the product image (portfolio-product.liquid) appears blurry now. All images are uploaded in high res and look great on the product page.

For example https://studioschaumloeffel.com/collections/portfolio-2022?page=3

 

Product:

Screenshot 2022-07-18 at 14.59.35.png

Product grid view blurry:

Screenshot 2022-07-18 at 14.36.48.pngScreenshot 2022-07-18 at 14.12.50.png Could someone help please? Many thanks already, Silvi

Accepted Solution (1)

Reena_Soni
Shopify Partner
137 24 31

This is an accepted solution.

Hi @witherspoony,

 

Go to online store > Actions > Edit code 

Search for snippet > card-product.liquid

 

find "sizes=" lines and replace first part of them with this (see screenshot):

 

 

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px, (min-width: 990px) calc((100vw - 130px) / 1), (min-width: 750px) calc((100vw - 120px) / 1), calc((100vw - 35px) / 1)"

 

 

This should fix blurry product images.

 

you just need to replace divide by 4 to 1 https://prnt.sc/feKxPfKbD5Q6 as shown in screenshot.

 

If helpful then please Like and Accept Solution.

 

 

 


Chat on WhatsApp

Need a developer? Hire me at reena@downtowncommerce.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications Into Shopify Theme.
If I helped you out, mark it as the solution and drop me a thumbs up! | Shopify Partner | Do not hesitate to contact me via Message.

View solution in original post

Replies 3 (3)

Reena_Soni
Shopify Partner
137 24 31

This is an accepted solution.

Hi @witherspoony,

 

Go to online store > Actions > Edit code 

Search for snippet > card-product.liquid

 

find "sizes=" lines and replace first part of them with this (see screenshot):

 

 

sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 1 }}px, (min-width: 990px) calc((100vw - 130px) / 1), (min-width: 750px) calc((100vw - 120px) / 1), calc((100vw - 35px) / 1)"

 

 

This should fix blurry product images.

 

you just need to replace divide by 4 to 1 https://prnt.sc/feKxPfKbD5Q6 as shown in screenshot.

 

If helpful then please Like and Accept Solution.

 

 

 


Chat on WhatsApp

Need a developer? Hire me at reena@downtowncommerce.com
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications Into Shopify Theme.
If I helped you out, mark it as the solution and drop me a thumbs up! | Shopify Partner | Do not hesitate to contact me via Message.
witherspoony
Tourist
5 0 5

Amazing! Yes that worked. Had to replace two "sizes=" lines with your code and the products now show in High res. Thanks so much! 

bigmountainsguy
Tourist
4 1 0

Hi - this worked for photos that are in portrait orientation, but photos in landscape orientation are still blurry. Any advice?

 

URL: https://shop.bigmountainsguy.com/collections/all-prints