Thumbnail Image Blur on Product Page - Dawn

[pearlerwork]

URL: https://mount-zero-click-collect-market.myshopify.com/products/citrus-trio-100ml-lemon-lime-mandarin 

Password: Manzanilla22 

I'd love some help to figure out why these thumbnail images are so blurry. Thanks!

[BSSCommerce-B2B]

Hi @pearlerwork , 

I have checked your store,  these your thumbnail images have source with width = 84px. 

So when you add image to thumbnail will make it blurry. 

You can change size of image, and I think your issue will be resolved. 

Example with src of image: 

"https://mount-zero-click-collect-market.myshopify.com/cdn/shop/files/lemon_evoo_100ml_transparent.pn... 
You can try to change from "width=84"  to "width=200". 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[pearlerwork]

Thanks, @BSSCommerce-B2B I've tried this but unfortunately it doesn't look different? Please check if you can 🙂

[EBOOST]

Hi @pearlerwork ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Assets/base.css
3. Add code below to end of file

.thumbnail-list__item .thumbnail--narrow img {
    object-fit: scale-down;
}

[pearlerwork]

Thanks, @EBOOST - I've tried this but unfortunately it doesn't look different? Please check if you can 🙂

[EBOOST]

Hi, 

I saw it is working.

after apply CSS

before apply CSS