How can I unify my images on the product page?

[bobylands]

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

I tried this but it didnt work : 

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;
    }    
}

[BSS-TekLabs]

Hi @bobylands,

Sorry for the delay in replying to your other post. We have come up with a solution (a slight change to the CSS selector).

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 !important;
    }
    
    .product-media-container .product__media img {
        /* This value has to match the above height */
        height: 500px !important;
    }    
}

We hope this assists in resolving the issue.

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

[bobylands]

Hi!

it worked for some but left some images sliced in half (see image)

[BSS-TekLabs · Accepted solution]

Please replace the above code with this one

@media screen and (min-width: 750px) {
    .product-media-container,
    .product-media-container .product__media,
    .product-media-container .product__media img {
        /* You can adjust this value according to your preference */
        height: 500px !important;
    }
}

Here is the result

We hope this assists in resolving the issue.

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

[bobylands]

Thanks you very much it worked!

Also, how can I add small dot swatches right under each of my product on the collection page? I tried to look online but they all failed.

Thanks

[BSS-TekLabs]

Do you mean it looks like this, a color swatch for choosing a color variant?

[BSS-TekLabs]

Can you provide us which theme are you using?

[bobylands]

Dawn theme