How can i make the thumbnails in a pdp all the same size

Store Design
,
1

I am trying to make all the thumbnails be consistently the same size, but i have not been able to yet. I use the symmetry theme.

How can i accomplish this without hardcoding?

Example:

image
image830×416 50.3 KB

2

Without hard coding you need to make sure your image are of the same dimensions.

3

And with hardcoding? Is there a good way to go about it without having to resize every image one by one?

I wanted to achieve something like this:

image
image1072×216 50.9 KB

4

Yes you can give all the images a certain width and height with css.

5

That’s theme dependant. Some themes have setting to control this.

You can add CSS to make all images fit into, say, square space.
Then you need to decide where you want them to crop or scale down to fit.

Share a preview link to the theme you’re working on.

6

@AlmaVida Is it resolved? If you need it, we can help you out with it. The problem is giving fixed width and height may disturb the image’s aspect ratio. If all images are of equal width and height, yes, you can define the fixed width and keep the height auto. Make sure to add a separate custom css and also be careful with the templates where you are doing it.

Thank you

8

Hi @AlmaVida

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

9

@AlmaVida,

You don’t need hardcoding just force a fixed aspect ratio for thumbnails using theme settings or minimal CSS.

Best (Theme-safe) option

Online Store → Themes → Customize → Product page

  • Set Media aspect ratio to Square (1:1)
    or Portrait (if you prefer taller thumbnails)

If images still vary (safe CSS fix)

Add this to Theme settings → Custom CSS:

.product__media-thumbnail img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

(Use 3 / 4 instead of 1 / 1 if you want portrait thumbnails.)

Why this works

  • Keeps all thumbnails identical size
  • No hardcoded widths/heights
  • Fully responsive
  • Works with mixed image dimensions

Upload consistent ratio images (square or portrait) going forward — CSS can align, but clean images give the best result.