How can I unify my images on the product page?

Store Design

Topic summary

A user is experiencing inconsistent product image sizing on their product page—images shift and resize when customers select different variants. They want to standardize images to a rectangular format (taller on the y-axis).

Initial attempts failed, but a support team provided a CSS solution targeting .product-media-container with fixed height values (500px) using !important flags.

First solution partially worked but caused some images to appear cropped/sliced in half.

Revised CSS code was provided that targets the container, media element, and img tag simultaneously with consistent height values. This solution successfully resolved the sizing issue.

New request emerged: The user now wants to add small dot color swatches beneath each product on the collection page. They’re using the Dawn theme. The support team confirmed understanding (color variant swatches) and requested theme confirmation before providing guidance.

Status: Original image sizing issue resolved; new feature request (color swatches) is open and awaiting solution.

Summarized with AI on November 7. AI used: claude-sonnet-4-5-20250929.
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

image (2).png
image (2).png724×735 384 KB

image (1).png
image (1).png697×610 232 KB

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

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!

3

Hi!

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

image.png
image.png1530×671 83.3 KB

4

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

BSSTekLabs_0-1722664619632.png
BSSTekLabs_0-1722664619632.png2588×1253 303 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!

5

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

6

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

BSSTekLabs_0-1722665067640.png
BSSTekLabs_0-1722665067640.png2878×1604 698 KB

7

Can you provide us which theme are you using?

8

Dawn theme