blurry product description images

Solved
Fabian_weldon
Explorer
111 0 25

I am trying to upload a banner of icons to my product description but when I upload an image it becomes incredibly blurry as seen below. The images I upload aren't blurry however.

Screenshot 2021-01-30 at 17.10.28.png

 

thanks in advance 

0 Likes
PeanutButter
Shopify Partner
330 66 137

hi, can you share the url to that product page to take a look?

thanks

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Fabian_weldon
Explorer
111 0 25
0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

hi @Fabian_weldon 

When inserting an image in the product description, check at the bottom of the Insert Image popup, there is a dropdown to select the image size your want to insert:

Screen Shot 2021-01-30 at 21.14.52.png

I believe you have selected the Large image size, which is 480px width.  You can select the 600px or 1024px sizes to get more resolution:

Screen Shot 2021-01-30 at 21.15.12.png

This said, if this image with your Value Proposition (12-month guarantee, 5% to charity, free uk delivery) is something you want to show in all your product pages, I think adding this to your product descriptions 1 by 1 is not the best solution.

A better solution if you want this in all products would be to upload this image to your theme assets folder (ideally as an svg vector image) and then adding this on the product-template.liquid section via code.  

I can guide you throw this second solution if you want.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Fabian_weldon
Explorer
111 0 25

I have figured it out.

 

Thankyou so much for the advice

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi @Fabian_weldon so you are on the right path but the icons in your svg image are not in vector formar but in bitmap (pixels).

Maybe because of this they are not rendered:

Screen Shot 2021-01-31 at 15.22.40.png

 

Also, I would create 3 images instead of 1 so that you can so then on 1 column in mobile and they do not look so small.

Let me know if you want a improved solution to what you know have and I will deliver it.

 

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Fabian_weldon
Explorer
111 0 25

That would be very helpful if you would be able to help me. How might I go about converting them?

 

thanks

0 Likes
Fabian_weldon
Explorer
111 0 25

I have managed to convert them so they appear properly using the vectoriser website.

How am I able to add them so they are in one row though as they currently appear on one column.

 

thanks

0 Likes
PeanutButter
Shopify Partner
330 66 137

Hi, I see they are on vectors now but I see they are not super smooth.  Could you send me the original icons and I will vectorize them for you?

After that I will provide the code to put them in one row.

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Fabian_weldon
Explorer
111 0 25

Hey thanks so much for the help.

 

I have just sent you the images via hello@peanutbutter.es.

0 Likes