Changing size of product pictures

Highlighted
Excursionist
12 0 9

Hi, I'm wondering how to go about changing the size of pictures on the product page. I see there are just two choices of small or medium in the shopify theme "Supply". I want the actual product picture to be bigger on the page. Not a zoomed in picture, but the actual product container to be bigger. Do I need to change the liquid code to make this happen? Or is there an app for this? The pictures are just too small for my liking. I would really appreciate some help. Thanks!

be your brilliant self
0 Likes
Highlighted
Shopify Partner
90 0 5

Hello April,

It sounds like it would have to fixed with a little bit of code but would be difficult to explain. We would be able to do this for you for a very reasonable price.

Send me an email and I can give you a quote.

_____________________________________________________________________

Media In-Laws is a design company created to help new and small businesses in setting up or designing their websites. We provide search engine optimization, design, layout, custom coding, professional copywriting, blogging, and more. 

Visit our website at MediaInLaws.com or contact me at tyler@mediainlaws.com

Thanks,

Ronald "Tyler" Jordan

 

0 Likes
Highlighted
Excursionist
12 0 9

Hi Ronald,

Thank you for the response and for the information about the company.

 

Conclusion for other forum readers:

I ended up searching until I found this page which shows how which area to manipulate to change the code: https://ecommerce.shopify.com/c/ecommerce-design/t/product-image-size-supply-theme-273739

Specifically, what the poster "Alex" posted on that thread:

----------------

In product.liquid, you should find something like this:

  <div class="grid-item large--two-fifths">
    <div class="grid">
      ...
    </div>
  </div>

  <div class="grid-item large--three-fifths">
    <h2 itemprop="name">{{ product.title }}</h2>
    ...

You'll notice that the container for the product images takes up two-fifths of the width and the container for the product details takes up three-fifths of the width.  You can change the respective classes.  For example:

  <div class="grid-item large--two-thirds">
    <div class="grid">
      ...
    </div>
  </div>

  <div class="grid-item large--one-third">
    <h2 itemprop="name">{{ product.title }}</h2>
    ...

-------------

My husband learned a little bit about coding a while back so he helped me read the code. We were able to easily change it by changing the first grid-item number and the last grid-item number. The top grid-item we changed from two-fifths to one-half. The last grid-item went from three-fifths to one-half. This way I was able to make the product picture as big of a column as the right column on my page-- meaning that the product picture became just as big of a column as the section that includes title, price, variants, add to cart. So I ended up with a bigger picture and now it looks great!!

Just wanted to leave this information here in case someone else also desperately wants to change the product picture size but wants to keep their theme. You can change it, but unfortunately you have to change a little of the code. It's actually easy once you know WHERE to change it. It works!!! :)

be your brilliant self
8 Likes
Highlighted
New Member
1 0 0

This helped me out very much.  thank you!!!

0 Likes
New Member
1 0 0

That's it. Thanks a bunch.

0 Likes