Studio theme - Product + Cart Page , make product images all square aspect 1:1

[Matty2019]

Hi,

Studio theme - Product + Cart Page , make product images all square aspect 1:1

Currently they are all different, and there is no option to force to make the image a aspect 1:1

the collection page is fine and is 1:1,

seatdripco.au

Thanks

[Dan-From-Ryviu]

Hi @Matty2019 

Please add this code at the bottom of your base.css file 

.product .product-media-container {
    --aspect-ratio: 1;
}
.product .product-media-container .product__media img {
    object-fit: contain;
}
.cart-items .cart-item__image {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

Here is the result

[B2Bridge · Accepted solution]

Hi @Matty2019  , you can follow these steps:

Step 1: Open Online Store -> Themes -> Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.product-media-container {
 min-width: 320px !important;
 height: 320px !important;
}
.product-media-container img.image-magnify-lightbox {
 max-height: 320px !important;
}
.cart-drawer .cart-item__image {
 max-width: 110px !important;
 max-height: 110px !important;
 object-fit: cover !important;
}

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you 😍