Re: Thumbnail Image Blur on Product Page - Dawn

Thumbnail Image Blur on Product Page - Dawn

pearlerwork
Shopify Partner
76 1 10

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!

 

Screenshot 2024-06-12 at 11.33.39 am.jpg

Replies 5 (5)

BSSCommerce-B2B
Shopify Partner
1969 564 566

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. 

BSSCommerceB2B_0-1718684219118.png

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! 

 

 

 

B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.


B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.


B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.


BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now

pearlerwork
Shopify Partner
76 1 10

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

EBOOST
Shopify Partner
1226 319 368

Hi @pearlerwork ,

May I suggest to update code these steps:

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

EBOOST_1-1672356985580.png
2. Assets/base.css
3. Add code below to end of file

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

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips
pearlerwork
Shopify Partner
76 1 10

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

EBOOST
Shopify Partner
1226 319 368

Hi, 

I saw it is working.

after apply CSS

EBOOST_0-1718762577958.png

 

before apply CSS

 

EBOOST_2-1718762674964.png

 

EBOOST_1-1718762592253.jpeg

 

 

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips