Placing a background image behind the product images

Solved
New Member
5 0 0

I am using free Venture theme on Shopify. My website is receving the product image data from a different website with a transparent background. I am trying to put a background image or a gradient color behind the transparent product image. I am a visual designer but there will be a huge number of products and several images for each product. Converting an image from png to jpeg with an visual software is an easy task but it will be a time consuming process in time. Placing the image with code will solve my problem permanently. Can any body help me with placing a image or a gradient behind the product images.

 

https://mottomfreedom.com/collections/less-is-more-skull-sweetshirt/products/skull-w-bl-sweatshirt-l...

0 Likes
Shopify Expert
185 0 15

Hi There,

 

You can use the CSS background color the main product image div. Instead of using an image as background you can do the gradient color using CSS it will help your store to load faster.

 

Note: Using too many images is not advisable.

 

Hope this helps!

 

 

 

 

0 Likes

Success.

Hello,

Here is a step-by-step instruction that can help you to add image or a gradient behind the product images.

Please, test changes in a theme copy first vs editing the live theme (unless you are really sure it will work). Duplicate the theme and test things in the copy.

Follow these steps:

1. From your Shopify admin, go to Online Store > Themes (In this example I have managed Venture theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
4. You should find the following lines in the file (the code is about 3913 line):

.product-single__photo {
  margin-bottom: $gutter-site;

  @include media-query($small) {
    max-height: 340px; // keep thumbnails below it visible on (most) small screens

    img {
      max-height: 340px;
    }
  }
}


Add background color (#fff - white, for example):

.product-single__photo {
  margin-bottom: $gutter-site;
  background-color: #fff;

  @include media-query($small) {
    max-height: 340px; // keep thumbnails below it visible on (most) small screens

    img {
      max-height: 340px;
    }
  }
}



or Add a gradient ("045 Loon Crest" from Webgradients.com):

.product-single__photo {
  margin-bottom: $gutter-site;
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898;
background-blend-mode: multiply,multiply;

  @include media-query($small) {
    max-height: 340px; // keep thumbnails below it visible on (most) small screens

    img {
      max-height: 340px;
    }
  }
}


You can change a background color or a gradient to your liking.

Hope this helps you!

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
1 Like
New Member
5 0 0

You are a true expert @Arthur_Korniyen. Thank you very much for your clear answer.
It works but there is one more issue. When clicked on a product image, we see the product image much bigger. Can i use the same background gradient color there too?

0 Likes
Highlighted

Success.

To add the same background gradient color  to the product thumbnails you need to:

1. From your Shopify admin, go to Online Store > Themes (In this example I have managed Venture theme).
2. Choose "Edit code" from the "Actions" drop-down menu.
3. On the Edit HTML/CSS page, you can edit the Assets / theme.scss.liquid file.
4. You should find the following lines in the file (the code is about 3957 line):

 

.product-single__thumbnail {
  position: relative;
  display: block;
  height: $product-slider-image-height;
  padding: $product-slider-padding;
  max-width: 200px;
  margin: 0 auto;

  img {
    position: relative;
    top: 50%;
    @include transform(translateY(-50%));
    display: block;
    max-height: $product-slider-image-height - ($product-slider-padding * 2);
    margin: 0 auto;

    .no-csstransforms & {
      top: 0;
    }
  }

  .is-active &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid $color-accent;
  }
}


Add the same background gradient color:

.product-single__thumbnail {
  position: relative;
  display: block;
  height: $product-slider-image-height;
  padding: $product-slider-padding;
  max-width: 200px;
  margin: 0 auto;

  img {
    position: relative;
    top: 50%;
    @include transform(translateY(-50%));
    display: block;
    max-height: $product-slider-image-height - ($product-slider-padding * 2);
background: linear-gradient(to bottom, #828282 0%, #515151 100%),radial-gradient(at top center, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.01) 120%) #989898;
    margin: 0 auto;

    .no-csstransforms & {
      top: 0;
    }
  }

  .is-active &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 3px solid $color-accent;
  }
}



Should work in your case.

Best,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
5 0 0

Thanks again @Arthur_Korniyen, that was another problem :) but i think i am misunderstood. I was talking about the zoomed image. In product pages there is a big main product image (which we added background gradient with your 1st answer) and when we click to the main product image it covers all the screen. There the image background is still transparent. 

  I am not sure but it might be in product-template.liquid line 16-58. I am trying to add the same code that i used in the first answer, but couldn't succeed.

 

  <div class="grid product-single">
    <div class="grid__item {% if product.images.size > 1 %}medium-up--three-fifths{% else %}medium-up--one-half{% endif %}">
      <div class="photos">
        <div class="photos__item photos__item--main">
          {%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
          {%- for image in product.images -%}
            <div class="product-single__photo product__photo-container product__photo-container-{{ section.id }} js{% unless image == featured_image %} hide{% endunless %}"
                 id="ProductPhoto"
                 style="max-width: {% include 'image-width' with image: image, width: 480 %}px;"
                 data-image-id="{{ image.id }}">
              <a href="{{ image | img_url: '1024x1024' }}"
                 class="js-modal-open-product-modal product__photo-wrapper product__photo-wrapper-{{ section.id }}"
                 style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <img class="lazyload{% unless image == featured_image %} lazypreload{% endunless %}"
                  src="{{ image | img_url: '150x150' }}"
                  data-src="{{ img_url }}"
                  data-widths="[180, 240, 360, 480, 720, 960, 1080, 1296, 1512, 1728, 2048]"
                  data-aspectratio="{{ image.aspect_ratio }}"
                  data-sizes="auto"
                  alt="{{ image.alt | escape }}">
              </a>
            </div>
          {%- endfor -%}
          <noscript>
            <a href="{{ featured_image | img_url: '1024x1024' }}">
              <img src="{{ featured_image | img_url: product_image_size }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg-{{ section.id }}">
            </a>
          </noscript>
        </div>
        {% if product.images.size > 1 %}
          <div class="photos__item photos__item--thumbs">
            <div class="product-single__thumbnails product-single__thumbnails-{{ section.id }}{% unless product.images.size > 2 %} product-single__thumbnails--static{% endunless %}">
              {% for image in product.images %}
                <div class="product-single__thumbnail-item product-single__thumbnail-item-{{ section.id }}{% if image == featured_image %} is-active{% endif %}" data-image-id="{{ image.id }}">
                  <a href="{{ image.src | img_url: product_image_size }}" data-zoom="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail product-single__thumbnail-{{ section.id }}">
                    <img src="{{ image.src | img_url: '160x160' }}" alt="{{ image.alt | escape }}">
                  </a>
                </div>
              {% endfor %}
            </div>
          </div>
        {% endif %}
0 Likes

Success.

In most cases, as now, you need to correct not the HTML, but it is enough to add a couple of lines of CSS code.

To add the image background above the zoomed image, you need to add the background gradient into the following lines (Assets / theme.scss.liquid file - 4041):

.product-modal__image {
  display: block;
  position: relative;
  top: 50%;
  @include transform(translateY(-50%));
  display: block;
  max-height: 95%;
  max-width: 95%;
  margin: 0 auto;

  .no-csstransforms & {
    top: 2.5%;
  }
}


After

margin: 0 auto;



Add the background gradient and Save:

background: linear-gradient(to bottom, #828282 0%, #515151 100%),radial-gradient(at top center, rgba(0,0,0,0.01) 0%, rgba(0,0,0,0.01) 120%) #989898;



Regards,
Arthur

Shopify subject matter expert | Founder at GenovaWebArt | Full-services shopify agency | info@genovawebart.com
0 Likes
New Member
5 0 0

Thanks a lot @Arthur_Korniyen. You are the hero.
Best Wishes.

0 Likes
New Member
1 0 0

Thank you so much, you are the true expert Arthur_Korniyen.

0 Likes