Grid theme how to display images all same size inside collection

[urbantis]

I am working on this website

https://www.perfectpickboutique.com/

and I would like to make the images inside the collection that they display in the same size (without having to crop it manually). Is there a way to do this?

As you can see here

https://www.perfectpickboutique.com/collections/perfect-tees

all the images are showing in different size.

Thanks for your help

[eFoli-Marvic]

@urbantis

Add this code to your theme.css file.

Navigate to online store >> Click edit theme code.

Now find theme.css and paste the following code:

.product-list-item-thumbnail{height: 355px !important;}
.list-item-thumbnail img{height: 100% !important;}

[urbantis]

Thanks for your input, but this code it’s changing homepage collection images and overlapping the name of the product, please see before and after images attached. Any thoughts on how t make it in the collection pictures?

Thanks for your time.

[eFoli-Marvic]

Try this code

.template-collection .product-list-item-thumbnail{height: 355px !important;}
.template-collection .list-item-thumbnail img{height: 100% !important;}

[LitCommerce]

Hi @urbantis ,

I checked and with the current code, if I change the code, the image will be distorted. Refer

If you still want to change it, go to Assets > theme.css and paste this at the bottom of the file:

.product-list-item-thumbnail img {
    height: 100% !important;
}
.product-list-item-thumbnail {
    height: 350px !important;
}

Hope it helps!

[urbantis]

Hi, thanks for taking the time to answer. Now it is changing on the collections but it’s doing the same, the name is being overlapped, please see pic, and the container of the image is not being adjusted to all the same. Can you help?

Thanks

[LitCommerce]

Hi @urbantis ,

Have you tried my code? Please add it and keep the code as is, I will help you check it again

[urbantis]

brilliant! I did, thank you, I just marked as a solution.