Help! Product page images too big - Boundless

[Surely]

My problem is that compared to my images i've used for my featured products on my home page which are perfect size, when you click on the product the image on the product page takes up the whole screen!

How do I go about keeping the same size on the home page but only changing the size of the image on the product page?

The theme i'm using is called Boundless and the website is www.surely.co.nz

[Micah_Knight]

Hi Surely Team,

Guru Micah here to help!

Looking into the image sizes for your Boundless theme, this is something that is definitely possible to change but will require quite the amount of coding to do so. Now, with any paid Shopify Plan you do get sixty minutes of design time meaning our Themes Team will help with approved theme changes. With that being said, this is something that will take more than the sixty minute allotment that our themes team would be able to support. For this reason I would suggest looking into the recommendations I will list below:

First off being that you can look into hiring someone like a Shopify Expert or a developer who would be able to help implement this image sizing change you are after.

Our other option is to look into would be possibly switching your theme. Now I know this sounds like it will be like starting over completely but that is not true! Now that you have designed your Boundless theme the images you used are now saved, same with the menus along with all of the collections/products. Meaning that you will just have to go into the new theme and connect them to the themes sections to get your desired design. Now, if you were to switch your theme we have a lot to choose from here on the Shopify Theme Store. I recommend the Brooklyn theme as it is quite close to the look and feel of the Boundless theme but the main difference is that the product page is now looking how you requested. I’ll also include this Brooklyn Theme “Cheat Sheet” with tons of tips and tricks on this theme to help make the transition easier if you decide to take this route.

Let me know if you have any questions or need help with implementing any of these changes!

Micah Knight

Customer Success Guru | Shopify

[worleystudios]

I'm having the same issues. I love Shopify and I'm sticking with it but it seems to me that the Boundless theme could be simply beautiful with a few tweaks. First, the product images being larger than the computer screen is ridiculous. Second, if the newsletter signup was on every section of the website, this theme could generate sales, meaning more money for Shopify and satisfied customers. Finally, if the collection images are all different shapes and sizes, then the view of that collection looks unruly. For the last, I'm sure there's an app for that but honestly, why upgrade to a different theme unless you're bringing in sales. 

[JTR]

The Shopify Expert says it will take more than sixty minutes but I'm pretty sure you can achieve this in less than 1 minute.

Go into theme file manager, select the folder "Assets" click "theme.scss.liquid" scroll to the bottom and add a note that says "Theme Changes" add ".product-single__photo {

max-width: 300px;

}"

That should make the image on the product page smaller, change the "px" to suit what you want, should mean that the image can shrink for smaller devices but can't go any larger than 300px.

[tae1169]

Hi, 

I'm new to Shopify.  I am working with the Motion theme and I'm trying to add photos taken with a DSLR camera.  I have spent hours going over YouTube videos on how to make them fit into my page but they are just HUGE no matter what I do in Lightroom or Photoshop.  (If it's a picture of my model I only see a portion of her leg, not the whole image.)  Any advice would be greatly appreciated.

Thanks,

T

[JTR]

crop all your images to 1201px width and 1800px height, always a good idea to start with the correct image sizes so that all your products on your collection pages look the same, as long as you have 1800px height you could have higher width as it should display centered, that would allow you to use the same image for wider format use as well, but to keep it simple I'd just make all your model images 1201px by 1800px

[BadYoke]

Im sorry to annoy you but, is this modification able to further mods such a zoom if hovering mouse? If so, i'd like to know exactly where to paste that code because the theme.scss.liquid asset is crazy big, and I want to modify this asap. If you help me do this Im gonna pray to every god for you, cause its driving me nuts lol

---

@JTR wrote:

The Shopify Expert says it will take more than sixty minutes but I'm pretty sure you can achieve this in less than 1 minute.

Go into theme file manager, select the folder "Assets" click "theme.scss.liquid" scroll to the bottom and add a note that says "Theme Changes" add ".product-single__photo {

max-width: 300px;

}"

That should make the image on the product page smaller, change the "px" to suit what you want, should mean that the image can shrink for smaller devices but can't go any larger than 300px.

---

[Spectruminal12]

Did anybody found a solution for the large product images?

I have tried to code, but nothing happend


___________

[BadYoke]

There is only one thing you can do and that is adding this css at the end of file
Online Store⇾ Themes⇾ Edit code⇾ Assets⇾ theme.scss.liquid

@media screen and (min-width: 680px) {
.grid__item {width: 45%;
float: left;
}
.fastcheckout_buy_button.btn.btn--add-to-cart {min-width: 100%;
}
  

 This is going to change EVERY SINGLE IMAGE ON YOUR PAGE to a standard size, and you won’t be able to resize them anymore. Someone from Shopify partners gave me that, and he said he could change it but it would take him 3 hours and cost me 15u$d, so I didn't do it.

Also, there is a guy in other post that says:

Go into theme file manager, select the folder "Assets" click "theme.scss.liquid" scroll to the bottom and add a note that says "Theme Changes" add ".product-single__photo {

max-width: 300px;

}"

That should make the image on the product page smaller, change the "px" to suit what you want, should mean that the image can shrink for smaller devices but can't go any larger than 300px.

But I could not make those changes.

I hope you find a solution or have the money to hire the expert, I just used another theme. Debut is underestimated to be honest.

[Spectruminal12]

Thanks for reply.

I found this to change the image:
It under the same asset file -->  theme.scss.liquid


if you change the widht from 100% to something else, the image gets smaller, but now I have the problem of having to much space between the image and the buy options 😕

[Snowness]

I know this is an old issue, but I wanted to post a mostly working solution for the Boundless theme oversized product photo issue, as this is ranked high on google when searching this issue;

.product__photo{

    @include media-query($medium-up) {
      width:540px;
      height:540px;
      position: relative;
      left: calc(50% - 270px);
    }
}

Paste this at the very end of the theme.scss.liquid file.

DISCLAIMER: This only works for product pages with ONE image. As a work-around, I just upload the other images as part of the product description. I don't believe anything else is changed from this code, but it's easy enough to undo if it breaks your website layout. (Just delete the added lines at the end of the theme.scss.liquid file)

Hope this saves everyone some time! Took me well over an hour to figure this out.

[FlowersForHer]

Upon going through countless articles, and solutions, your's is the ONLY one that worked!!! Thank You!!!

[TNBC]

Hi all,

The previous solution is indeed the correct one to get the image size correct, but as indicated it worked mostly and you still remained with some issues regarding the padding (sometimes the text is still too low).

I solved it by

1) disabling the setting of padding-top in product-template.liquid

2) Updating the above piece of code using the media query to set the padding-top in css instead

so;

To remove the padding-top in product-template.liquid you want to search for

style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;

In this piece of the code of product-template.liquid and remove it. Be careful to take the quotes "" along.

% if product.images.size > 0 %}
      <div class="product__photo grid__item {{ grid_item_width }}">
        {% for image in product.images %}
          {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
          <div data-image-id="{{ image.id }}" class="product__photo--single product__photo--variant-wrapper
          {% if product.images.size > 1 and section.settings.skip_first_product_image %}
            fade-in
            {% if forloop.first == true %} hide{% endif %}
            {% if forloop.index != 2 %} hide{% endif %}
          {% else %}
            {% unless featured_image == image %} hide{% endunless %}
          {% endif %}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
            <img class="product__photo--variant lazyload"
              src="{{ image | img_url: '300x' }}"
              data-src="{{ img_url }}"
              data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ image.aspect_ratio }}"
              data-sizes="auto"
              alt="{{ image.alt | escape }}">
          </div>
        {% endfor %}

        <noscript>
          <img class="product__photo--variant" src="{{ first_image | img_url: '1024x1024' }}" alt="{{ image.alt | escape }}">
        </noscript>
      </div>

      {% comment %}
        Counting images shown on the page
      {% endcomment %}
      {% assign index = 1 %}

      {% comment %}
        If we have portrait images, we show two per row, so let's get a second image.
        That image will be moved down below the description on mobile, hence why we'll use
        `small--hide`. The image moved down is stored in the variable `duplicate_image`.
      {% endcomment %}

      {% if is_portrait_image %}
        {% for image in product.images %}
          {% unless image == first_image %}
            {% unless section.settings.skip_first_product_image and image == product.featured_image %}
              <div class="product__photo grid__item small--hide {{ grid_item_width }}">
                <noscript>
                  <img src="{{ image | img_url: '2048x2048' }}" alt="{{ image.alt | escape }}">
                </noscript>
                {% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
                <div class="product__photo--single" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
                  <img class="lazyload"
                    src="{{ image | img_url: '300x' }}"
                    data-src="{{ img_url }}"
                    data-widths="[360, 540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
                    data-aspectratio="{{ image.aspect_ratio }}"
                    data-sizes="auto"
                    alt="{{ image.alt | escape }}">
                </div>
              </div>
              {% assign index = index | plus: 1 %}
              {% assign index_offset = forloop.index %}
              {% assign duplicate_image = image %}
              {% break %}
            {% endunless %}
          {% endunless %}
        {% endfor %}
      {% endif %}

    {% endif %}

Then you update theme.scss.liquid in the following way;

/*================ Product images ================*/
.product__photo {
  position: relative;
}

.product__photo--single {
  position: relative;
  padding-top: 100%;

  img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
  }
  
  @include media-query($medium-up) {
    width:540px;
    height:540px;
    position: relative;
    left: calc(50% - 270px);
    padding-top: 600px;
  }

  .no-js & {
    @extend .visually-hidden;
  }
}


/*================ Product form ================*/

[TNBC]

Can't seem to edit, but there was a mistake in the previous post. 

Bottomline is that for product image's it makes more sense to have the height dictate the width of the image. So this is the final code that makes it all run smoothly given that you took out the padding of product-template.liquid.

img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    width: auto;
    z-index: 1;
    height: 100%;
    max-height: 540px;
  }
  
  @include media-query($medium-up) {
    width:540px;
    height:540px;
    position: relative;
    left: calc(50% - 270px);
    padding-top: 600px;
  }

[Jonathan_Pricha]

---

@TNBC wrote:

Can't seem to edit, but there was a mistake in the previous post. 

Bottomline is that for product image's it makes more sense to have the height dictate the width of the image. So this is the final code that makes it all run smoothly given that you took out the padding of product-template.liquid.

img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
    width: auto;
    z-index: 1;
    height: 100%;
    max-height: 540px;
  }
  
  @include media-query($medium-up) {
    width:540px;
    height:540px;
    position: relative;
    left: calc(50% - 270px);
    padding-top: 600px;
  }

---

CheveuxHeureux, thank you for posting a solution.  I was able to follow the steps of your earlier post but this follow up post lost me.  😞

I'm now unsure of what I'm NOT supposed to do from your earlier post LOL.

Anyway you could repost your step by step solution in full as if you never posted?  Maybe call it "FINAL POST" or something.  🙂

[saki12]

Thank you!!! It worked!  Now I have to center the buy options below the product.  Any suggestions?

[subliminalsf]

Hey, how would this work with 2 images for the product?

[TNBC]

Hey Everyone,

I continued working on this, as even the last suggestion was not a final solution. It made wide pictures look bad on the product page.

The solution I have is still not perfect, but it's close.  There's one known bug still: If you have a portrait image and you have more then 2 pictures on your product, the portrait image below the description will still add too much padding. I'll let you know if I find a fix.

To avoid confusion, I'll write down what you have to do assuming you are starting from a default Boundless theme. 

So,

What is the main problem? The theme sets pictures to maximum width, which is causing a ridiculous image size on a desktop or laptop.

Therefore we want to limit that. But when we do that, the padding is causing us issues. So we have to fix that as well.

Step 1: Take the setting of padding out of the product-template.liquid. It's the root of all evil.

You do that by going to Themes -> Edit Code -> Sections -> product-template.liquid. In that code, you look for the following code and remove it. 

style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"

Just do Ctrl+F (which starts a search function) paste that line of code in the search bar and replace it with whitespace.

2. Adjust the theme CSS to maximize the width on big screens but also take care of the padding as it is no longer in the Shopify code.

Go to Assets->theme.scss.liquid and update it in the following way:

Then you update theme.scss.liquid in the following way;

/*================ Product images ================*/
.product__photo {
  position: relative;
}

.product__photo--single {
  position: relative;
  padding-top: 100%;

  img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
   	width: auto;
    z-index: 1;
    height: 100%;
    max-height: 540px;
  }
  
  @include media-query($medium-up) {
    width:auto;
    height:540px;
    padding-top: 600px;
  }

  .no-js & {
    @extend .visually-hidden;
  }
}


/*================ Product form ================*/

There, that should do it. 

Extra: There's only so much you can do from the code. Boundless is a great theme, but you should use it properly and read it's instructions (which I admittedly also didn't do at the start). Here are some tips and tricks.

• Read the instructions of the theme here, it talks about ideal photo size and stuff; https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless
• Don't mix Tall/square with Wide per product or collection view. The boundless theme has a setting for it and expects all photo's to be the same type.
• Consider using the 'skip first product image' function. This means that the first product image shows only on collection pages, and not on product pages.  This way you can ensure that the same type of photo (tall/square vs wide) as the first product image is seen in the collection view and they all fit nicely together. 
• Square Photos work best. It's also the format you'll use for Instagram, so consider making all of your content squares. (Which is not possible in our case, I hope it is for you).
• Make a list of examples pages where you use tall/square and wide pictures, this always you to quickly validate if everything is working as expected.
• Make sure your content works for mobile, I'm maintaining my webshop on my laptop, it's easy to forget most of your users browse your webshop through mobile.
• Use the same resolution, so don't have a 300x500 and a 400x500, they're two portrait photo's but will still look weird in featured collections.
• Always set a collection Image (This way it's not taking the image of the first product in your collection).

Challenges

- if the collection images are differentiating between tall/square and wide, then the view of that collection looks unruly. 

--> Consider not showing the first product image on the product page, and therefore using the same type of photo (tall/square vs wide) as the first product image so in collection view they all look nice.

Final note

• If this helped you, give our website a visit and spread the love for our store. You can find us at shop.cheveuxheureux.com. Everything you see is built on Boundless. We've also integrated with Acuityschedling for consultancy services, Hubspot for customer journey tracking, Loyalty Lion for Loyalty and Stamped.IO for reviews. 
• I'm a technology entrepreneur and happy to share the stuff I needed to figure out for our store so others can grow.  When I find the time (which you see can take a while) I share this on the forums. If you're really in a pickle or want to copy some of the stuff we did, meaning you can't wait until I show up on the forum again, I'm open to short term paid assignments to give you a speed boost. To be clear, no obligations, I offer this as one entrepreneur to the other and try to not be another expensive consultant. I'm no official Shopify expert. Drop me an email at cederik[at]cheveuxheureux.com in case you're interested.

Kind Regards,

Cederik

[TNBC]

A final update to the css so wide images look nice, added overflow behavior.

/*================ Product images ================*/
.product__photo {
  position: relative;
}

.product__photo--single {
  position: relative;
  overflow: hidden;
  padding-top: 100%;

  img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, 0);
   	height: 100%;
    width: auto;
    z-index: 1;
    max-width: 1080px;
  }
  
  @include media-query($medium-up) {
    width:auto;
    height:540px;
    padding-top: 600px;
  }

  .no-js & {
    @extend .visually-hidden;
  }
}


/*================ Product form ================*/

[Tamara8264]

I was searching for a resolution to this exact same request in the community. Any chance you found out how to fix this??? *Fingers crossed