blurry product description images

Fabian_weldon · ‎01-30-2021

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.

thanks in advance

PeanutButter · ‎01-30-2021

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:

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:

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 · ‎02-01-2021

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

blurry product description images

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links