How can I have all the products pictures the same size?

Store Design
1

Hi

How can I unify the size of the product on the product page? I’d like a rectangle longer on the y axis

It keeps moving when the customer select a product

simplicityclothing.ca

image.png
image.png697×610 232 KB

image.png
image.png724×735 384 KB

2

Hi @bobylands ,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

@media screen and (min-width: 750px) {
    .product-media-container {
        /* You can adjust this value according to your preference */
        height: 500px;
    }
    
    .product-media-container .product__media {
        /* This value has to match the above height */
        height: 500px;
    }    
}

Here is the result

BSSTekLabs_0-1722433673025.png
BSSTekLabs_0-1722433673025.png2879×1599 347 KB

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

3

I’m not sure why but it works with some product, and for some it doesnt :disappointed_face:

Do you know why?

4

Also, how can I change the picture on the right by hovering the mouse over the image on the left? thanks

5

Can you please provide us the URL of some products for which the code didn’t work?

6

https://simplicityclothing.ca/products/panda-t-shirt
https://simplicityclothing.ca/products/ramen-t-shirt?pr_prod_strat=e5_desc&pr_rec_id=5236dfb8c&pr_rec_pid=9741584171317&pr_ref_pid=9741528596789&pr_seq=uniform
and many more