How to change main image display size on product pages

New Member
17 0 0

Hi there Shopify friends!

I would really like to change the default display size for images on my products pages. My theme has them taking up half the page width and it just washes out the page. Is there an easy way to do this?

Also, any advice on if you think it is a good idea would be appreciated, it really annoys me but maybe it's just me!

My site is www.ziptac.com.au

Thanks in advance for any help

0 Likes
Shopify Partner
284 1 27

Hi, Dewy!

I looked at your site.

Take for example this page (https://ziptac.com.au/collections/clothing/products/vintage-camo-t-shirt) - do you feel the Product image is too large here?

If you can edit your theme.scss - there is a CSS class "product-images", which has "width: 58.33333%". If you change that to let's say "30%", your product image block will get smaller.

Is that what you need?

Maris

Excelify.io | Bulk Import Export Update Migrate | https://excelify.io
0 Likes
New Member
17 0 0

Thanks Maris

Yes that is exactly what I need to do!

I checked in the theme.scss.liquid file but I cant find the part that you suggested. I could only find this

  img {
      display: block;
      max-width: 100%;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  

I tried changing those to 50% but it had no effect.

Let me know if im going about it all wrong or if there is somewhere else I should be looking. Thanks again for your help.

0 Likes
Shopify Partner
284 1 27

Hi!

Can't attach screenshot here, but if you open your theme css file, try searching for "product-images" or 58.33333%.

At least here, in the rendered css result file I can find that place: https://cdn.shopify.com/s/files/1/2170/7481/t/5/assets/theme.scss.css?7031341895025792413

You can play in Chrome browser by pressing right-click, Inspect Element, and then in HTML find that <div>, where the class is used, and change that width % parameter, to see instant result. (if you're into geeky stuff). ;)

Maris

Excelify.io | Bulk Import Export Update Migrate | https://excelify.io
0 Likes
New Member
17 0 0

Thanks, I can see what you mean in the file you attached. I cant find that in my theme.scss.liquid file. Is it maybe because I am looking at the liquid file and not HTML?

Would I maybe need to download the HTML file and re-upload it? I have only ever used the liquid editor using the Shopify interface.

Thanks

Dewy

0 Likes
New Member
17 0 0

Also I did actually get the image to become smaller by editing this part of the liquid file. Changing the width from 100% to 50%. But the problem is that the box enclosing the image stays the same size.

 .featured {
    a {
      display: block;
      background-color: $contentBoxBackgroundColor;
      {% if settings.primary_dropshadow %}
      box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
      {% endif %}
    }
    .productimage-limit {
      margin: 0 auto;
    }
    img {
      display: block;
      margin: 0 auto;
      width: 50%;
      height: auto;
    }

0 Likes
Shopify Partner
284 1 27

Dewy,

Good point - you should actually be able to find in your theme.scss.liquid the phrase "product-images". Since I don't have access to it, can only guess. But thiking about those 58.33333%, maybe there it's written as a formula, which results in .33333 - something divided by 3. :)

If you can send here the fragment of your theme.scss.liquid around the "product-images" word, then I could tell.

But don't download-upload HTML, that will not help.

Liquid generates that CSS, and it should stay that way.

Maris

Excelify.io | Bulk Import Export Update Migrate | https://excelify.io
0 Likes
Shopify Partner
284 1 27

Yes, you shouldn't edit just img properties - you should find that "product-images" class. I tried to make smaller, and the whole block became smaller.

 

Excelify.io | Bulk Import Export Update Migrate | https://excelify.io
0 Likes
New Member
17 0 0

Thanks, I have found that part and I will copy here. Is it the part that says full-width?

.product-images {
  &.thumbnails-placement-side {
    .images-container {
      @include grid();
    }
    .featured {
      @include grid-item(10);
      &.full-width {
        @include grid-item(12);
      }
    }
    .thumbnails {
      @include grid-item(2);
      li {
        margin-bottom: 12px;
         @include mediaQuery($max, $tablet) {
            margin-bottom: 0;
         }
      }
    }
    @include mediaQuery($max, 1000px) {
      .featured {
        @include grid-item(12);
      }
      .thumbnails {
        @include grid-item(12);
      }
      .thumbnails {
        margin-top: 10px;
        text-align: center;
        li {
          width: 20%;
          margin-right: 6px;
          margin-left: 6px;
          display: inline-block;
          vertical-align: top;
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
    @include mediaQuery($max, $mobile) {
      .thumbnails {
        margin-bottom: 10px;
      }
    }
  }
  &.thumbnails-placement-below {
    .featured {
      @include grid-item(12);
      @include clearfix();
    }
    .thumbnails {
      @include grid-item(12);
      margin-top: 20px;
      text-align: center;
      li {
        width: 20%;
        margin: 0 6px;
        display: inline-block;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .featured {
    a {
      display: block;
      background-color: $contentBoxBackgroundColor;
      {% if settings.primary_dropshadow %}
      box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
      {% endif %}
    }
    .productimage-limit {
      margin: 0 auto;
    }
    img {
      display: block;
      margin: 0 auto;
      width: 50%;
      height: auto;
    }
  }
  .thumbnails {

    a {
      display: block;
      border: 2px solid $primaryBackgroundColor;
      background-color: $contentBoxBackgroundColor;

      &:hover,
      &:focus {
        img {
          opacity: 0.8;
        }
        {% if settings.primary_dropshadow %}
        box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
        {% endif %}
      }
      &.active {
        border: 2px solid $primaryTextColor;
        {% if settings.primary_dropshadow %}
        box-shadow: none;
        {% endif %}
      }
    }

    img {
      display: block;
      max-width: 100%;
      width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }
}

0 Likes
New Member
17 0 0

I have been able to change the image size by changing this part of the code changing the featured width from 100% to 66%. From what I can tell it is, if thumbnails are below featured image display featured image at 66% size. It works but now I need to make the product description and heading box wider to fill the space between it and the images. Any idea where to start with this one?

  &.thumbnails-placement-below {
    .featured {
      @include grid-item(12);
      @include clearfix();
      width: 66%;
    }
    .thumbnails {
      @include grid-item(12);
      margin-top: 20px;
      text-align: left;
      li {
        width: 20%;
        margin: 0 6px;
        display: inline-block;
        &:last-child {
          margin-right: 0;
        }

Thanks

0 Likes