How to change product image dimensions to rectangle in the debut theme?

Solved
New Member
4 0 0

Hi There!

 

I'm changing my theme over to the Debut theme and noticed product images display at a  1:1 ratio.  My product images are rectangular (to suit books) so my product images end up looking too narrow and the description text underneath overhangs the photo. 

 

I was wondering if I can change this in the css or a liquid file so my products displaying on the home page, collection pages and product page also display as a rectangle. 

 

Thank you in advance

Kim :)

 

0 Likes
Trailblazer
548 134 176

Hi, @kim42 ,

This is Evita from On The Map.

 

Can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Hi Evita, 
my url is thankubody.com  (but this is my current theme which handles the rectangle images okay)

I'm working on a draft theme (the Debut theme) and am planning on switching over to.

 

I've added a screenshot that shows how the rectangular images are handled in the Debut theme. 
Kim 

 

screen shot - debut theme images.png

0 Likes
Highlighted
Trailblazer
548 134 176

I need to see your draft theme, you will need to add a few codes of CSS, it looks like there's a padding that you need to remove. Do you know how to get a class of the images?

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
4 0 0

Hi, 

 

I've deployed the Debut theme now so that you'll be able see the problem.  The product images on the home page, product pages and product collection pages all shrink the rectangle image into a 1:1 ratio leaving blank gaps on each side.  I was hoping I could fix this so that they display as a rectangle and fill the without the side gaps. 

 

I hope this helps. 

Thanks again

Kim :)

 

https://thankubody.com

0 Likes

Success.

Trailblazer
548 134 176

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.grid-view-item__image-wrapper {
    max-width: 100%!important;
}
.grid-view-item__image-wrapper .grid-view-item__image {
    max-height: 100%!important;
    max-width: 100%!important;
}
On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
New Member
4 0 0

Thank you so much!!!

That worked perfectly! Much better. :)

0 Likes