Solved

blurry product description images

Fabian_weldon
Pathfinder
142 0 28

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 

Accepted Solutions (2)
PeanutButter
Shopify Partner
385 67 181

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

View solution in original post

PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

Hi, replace the code I send before for Assets/theme.scss.liquid with this:

/*******************************************************/
/*   Styles for advantages icons in product template   */
/*   by http://peanutbutter.es                         */
/*******************************************************/

.advantages {
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  @include at-query($min, 1000px) {
    justify-content: space-between;
    max-width: 380px;
    margin: auto;
  }
}

.advantages__item {
  margin-bottom: 20px;
  width: 50%;
  
  @include at-query($min, 500px) {
	width: 33.33%;
  }
  
  @include at-query($min, 600px) {
	width: 100%;
  }
  
  @include at-query($min, 850px) {
	width: 50%;
  }
  
  @include at-query($min, 1000px) {
	width: auto;
    padding: 0 8px;
  }
}
  
.advantages__icon {
  height: 35px;
  width: auto;
}

.advantages__text {
  font-family: $accentFontStack;
  font-size: 12px;
  display: block;
  color: #214159;
}

 

Replace the code from Sections/product-template.liquid with this:

            <div class="advantages">

                <div class="advantages__item">
                    <img class="advantages__icon"  src="{{ 'icon-warranty.svg' | asset_url }}" alt="Warranty Icon">
                    <span class="advantages__text">12 Month Warranty</span>
                </div>

                <div class="advantages__item">
                    <img class="advantages__icon" src="{{ 'icon-charity.svg' | asset_url }}" alt="Charity Icon">
                    <span class="advantages__text">5% To Charity</span>
                </div>

                <div class="advantages__item">
                    <img class="advantages__icon"  src="{{ 'icon-shipping.svg' | asset_url }}" alt="Free Shipping Icon">
                    <span class="advantages__text">Free UK Delivery</span>
                </div>

            </div>

 

Please remember to Like and Accept my answer if it solves your issue

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

View solution in original post

Replies 19 (19)

PeanutButter
Shopify Partner
385 67 181

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
Pathfinder
142 0 28
PeanutButter
Shopify Partner
385 67 181

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
Pathfinder
142 0 28

I have figured it out.

 

Thankyou so much for the advice

PeanutButter
Shopify Partner
385 67 181

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
Pathfinder
142 0 28

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

 

thanks

Fabian_weldon
Pathfinder
142 0 28

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

PeanutButter
Shopify Partner
385 67 181

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
Pathfinder
142 0 28

Hey thanks so much for the help.

 

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

PeanutButter
Shopify Partner
385 67 181

@Fabian_weldon currently converting your images.

In the meantime, can you please let me know what theme your are using?

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
PeanutButter
Shopify Partner
385 67 181

hi @Fabian_weldon, I sent you the icons by email.  Now, this would be the instructions:

1. Go to your Theme > Actions > Edit Code.  In the Assets folder upload your 3 icons by clicking in "Add a new asset"

2. Open file Sections > product-template.liquid, and around line 248, after the description, paste the following code:

            <div class="advantages">
                <div class="advantages__item">
                    <img class="advantages__icon" src="{{ 'icon-charity.svg' | asset_url }}" alt="Charity Icon">
                    <span class="advantages__text">5% To Charity</span>
                </div>

                <div class="advantages__item">
                    <img class="advantages__icon"  src="{{ 'icon-shipping.svg' | asset_url }}" alt="Free Shipping Icon">
                    <span class="advantages__text">Free UK Delivery</span>
                </div>

                <div class="advantages__item">
                    <img class="advantages__icon"  src="{{ 'icon-warranty.svg' | asset_url }}" alt="Warranty Icon">
                    <span class="advantages__text">12 Month Warranty</span>
                </div>
            </div>   

The result should be like this:

Screen Shot 2021-02-01 at 14.32.17.png

3. Open your Assets/theme.scss.liquid file and at the end of the file paste the following:

/*******************************************************/
/*   Styles for advantages icons in product template   */
/*   by http://peanutbutter.es                         */
/*******************************************************/

.advantages {
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.advantages__item {
  margin-bottom: 20px;
  width: 50%;
  
  @include at-query($min, 500px) {
	width: 33.33%;
  }
  
  @include at-query($min, 600px) {
	width: 100%;
  }
  
  @include at-query($min, 850px) {
	width: 50%;
  }
  
  @include at-query($min, 1000px) {
	width: auto;
    padding: 0 8px;
  }
}
  
.advantages__icon {
  height: 35px;
  width: auto;
}

.advantages__text {
  font-family: $accentFontStack;
  font-size: 12px;
  display: block;
  color: #214159;
}

 

This should be the result in mobile:

Screen Shot 2021-02-01 at 14.29.51.png

(as you can see I placed them in 2 rows because they looked very small in 1 row)

And this is the result in desktop:

Screen Shot 2021-02-01 at 14.29.10.png

 Let me know if you have any problems or you want some styling change

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
Pathfinder
142 0 28

thanks so much for all the help. It has worked but is it possible to make it wider on desktop. Currently it fairly narrow:

 

Screenshot 2021-02-01 at 16.09.30.png

PeanutButter
Shopify Partner
385 67 181

Sure! Any other styling tweaks and I will deliver them together?

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
Pathfinder
142 0 28

thankyou,

would you be able to change the order so it goes warranty, charity, delivery

PeanutButter
Shopify Partner
385 67 181

This is an accepted solution.

Hi, replace the code I send before for Assets/theme.scss.liquid with this:

/*******************************************************/
/*   Styles for advantages icons in product template   */
/*   by http://peanutbutter.es                         */
/*******************************************************/

.advantages {
  padding: 40px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  @include at-query($min, 1000px) {
    justify-content: space-between;
    max-width: 380px;
    margin: auto;
  }
}

.advantages__item {
  margin-bottom: 20px;
  width: 50%;
  
  @include at-query($min, 500px) {
	width: 33.33%;
  }
  
  @include at-query($min, 600px) {
	width: 100%;
  }
  
  @include at-query($min, 850px) {
	width: 50%;
  }
  
  @include at-query($min, 1000px) {
	width: auto;
    padding: 0 8px;
  }
}
  
.advantages__icon {
  height: 35px;
  width: auto;
}

.advantages__text {
  font-family: $accentFontStack;
  font-size: 12px;
  display: block;
  color: #214159;
}

 

Replace the code from Sections/product-template.liquid with this:

            <div class="advantages">

                <div class="advantages__item">
                    <img class="advantages__icon"  src="{{ 'icon-warranty.svg' | asset_url }}" alt="Warranty Icon">
                    <span class="advantages__text">12 Month Warranty</span>
                </div>

                <div class="advantages__item">
                    <img class="advantages__icon" src="{{ 'icon-charity.svg' | asset_url }}" alt="Charity Icon">
                    <span class="advantages__text">5% To Charity</span>
                </div>

                <div class="advantages__item">
                    <img class="advantages__icon"  src="{{ 'icon-shipping.svg' | asset_url }}" alt="Free Shipping Icon">
                    <span class="advantages__text">Free UK Delivery</span>
                </div>

            </div>

 

Please remember to Like and Accept my answer if it solves your issue

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
Pathfinder
142 0 28

thanks so much for all the help.

I just changed the max width so it fully fits the product description.

is this ok? 

Screenshot 2021-02-01 at 21.58.28.png

PeanutButter
Shopify Partner
385 67 181

Sure, that is totally fine. Good luck with your store!

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
swpuser
Tourist
9 0 3

Please let me know if that is resolved as I have the same issue. Images on my site are not clear when uploaded to the product details. However, when I source image is very clear and in fact when I click on the image, in the product description it opens and very clear. But when we go to the site, the image is blurry and not clear and also condensed. Can someone help fix this?
site: www.shopwithpeace.com

rusinov
Excursionist
20 2 14

I have the same issue.

sapandbark.com