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:
Product grid view blurry:
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.
Amazing! Yes that worked. Had to replace two “sizes=” lines with your code and the products now show in High res. Thanks so much!
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