Aspect ratio for product Images

Highlighted
Tourist
8 0 0

Hello Friends! How can I change aspect ratio for product images? (All Grids). Thanks for your help!
rssvintage.com

1.jpg

0 Likes
Highlighted

Hey @rssvintage,

You can set a height for all image, but some with large height will be cut.

To set a height, you use this code: (Paste it into theme.css.liquid)

.product-card__image-wrapper > div {
  height: 200px !important;
  padding-top: 0 !important;
  position: relative;
}
.product-card__image-wrapper > div > img {
  height: 100% !important;
  width: 100% !important; 
}

 The value 200px can be adjusted to your liking. 

I think you need to pay attention to the collection image size when you first create the collection.

If it works, please like and mark it as a solution.

P.S.: You should categorize your products and feature a broad range of product collection on the homepage, so that people know what types of product you are offering. You can check this article about what to be included in a good homepage.

- Tips to optimize website loadspeed: academy.pagefly.io/how-to-speed-up-website

- Do you need to customize your landing page, product page, blog, coming soon, FAQ, about us pages? Check out PageFly - Advanced Shopify Page Builder.
1 Like
Highlighted
Tourist
8 0 0

Thanks a lot! But now it looks like this: 

Screenshot at Sep 05 8-03-14 AM.png

 

Not exactly what I mean

0 Likes
Highlighted
Tourist
8 0 0

Please help. I still don't know how to resolve this

 

0 Likes