Product Image size supply theme

New Member
2 0 0

I'm using the supply theme and can't figure out how to increase the size of the product images. The customize them function only has drop down selections of small and medium. I assume I'll have to edit some CSS or something but I'm not sure where to locate that or what to change that to.  Can anyone provide any direction? 

Thanks!

-Aaron

0 Likes
Highlighted
Shopify Staff (Retired)
Shopify Staff (Retired)
290 0 158

Hey Aaron,

You can change the photo container size in the CSS, but you can also change line 12 of the product.liquid to say something other than 'large'.

There's a full list of our size names and parameters here: https://docs.shopify.com/themes/liquid-documentation/filters/url-filters#size-parameters

Hope that helps!

0 Likes
New Member
2 0 0

Thanks for the reply. I tried changing line 12 from large to grande, master, etc. but didn't see any change in the product image size. Maybe I'm doing it wrong or maybe the image is getting bigger but not the "container"? Basically I need the image to display and take up more of the page, not simply appear larger in the same sized container? Any thoughts? 

If I need to edit the CSS is there any place in particular that I would access that?

Thanks!

 

0 Likes
Astronaut
1890 0 380

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>
    ...

I hope this helps. 

4 Likes