Hi everyone,
I am designing my webshop. The images first appeared normally. Now they are blurry if i go to the collections. For example: https://uncutgemsnl.myshopify.com/products/3-stars-pink-tee
Could you please help me out?
website: https://uncutgemsnl.myshopify.com/
PW: shaupu
Thanks in advance!
Simple solution is to switch back Collection template “Product grid” section setting “mobile columns” back to 2.
The problem is that theme allows to change the number of products per row, but does not change the image size accordingly!
If you want to fix this, you’d need to edit the theme code (which will make it difficult to update to newer versions).
You need to edit snippets/product-card.liquid and find the line with “sizes” attribute (there are 3 of them, like https://github.com/Shopify/dawn/blob/main/snippets/card-product.liquid#L75 
(i’ve split the line into several to better expose the logic)
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)"
This line instructs browser what the product image width will be based on the window width.
So it expects:
4 images per line if window is wider than 990pixels
3 images per line if window is wider than 750pixels
and 2 images per line if less.
So in your case, it is wrong (it’s also wrong even if you set 2 columns on mobile, btw!!!)
For your settings this should be
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),
calc(100vw - 35px)"
Hi @uncutgemsnl
May I know if you still have this issue so far? When I intend to check your example page URL images, they seem to display finely and not blurry.
If you still have this issue or issue related, please share more details for my further check. Thank you!
