Make Product Images Smaller Within Container Square

How can I make the product images smaller within the container without resizing every image.

I’ve attached an image of how it currently looks, and how I want it to look.

Please share Store URL and password as well.

https://b87cba-47.myshopify.com/

password: stowla

Hi @Mg71

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

product-grid-item-image.product-grid-item__image-wrapper img {
    transform: scale(0.7);
}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

That didn’t work. The images were still cropped and when you hover its a box within a box.

Hi @Mg71

May I know the page link you are checking there? We checked it on Collection page earlier.

Before:

After:

Hello @Mg71 ,

I noticed you’re using cropped images in your store. I tried designing the product as per your screenshot, and it’s almost done, but the issue is that the image is cropped. You’ll need to replace it with the original image. Also, using background-free images will give you more flexibility for customization.

Let me know if you need assistance!