How to make all the product images the same size

Store Design

Topic summary

Issue: Product images display at inconsistent sizes on collection/product pages.

Proposed Solutions:

Multiple users suggested adding CSS code to standardize image heights:

  • Target .grid-product__image-mask or .grid-product__image-mask .image-wrap classes
  • Add height: 220px or padding-bottom: 100% properties
  • Insert code in theme.scss.css or theme.css.liquid files via Online Store > Theme > Edit Code > Assets

Outcomes:

  • Original poster confirmed one solution worked successfully
  • Several other users report the fixes didn’t resolve their issues
  • Some users cannot locate the specified CSS files in their themes (particularly Ella and Craft themes)
  • One user notes the fix worked on desktop but failed on mobile devices
  • Alternative JavaScript solution shared via external link for equal-height elements

Current Status: Discussion remains open with unresolved cases. Theme-specific variations appear to affect which solutions work, and mobile responsiveness remains problematic for some implementations.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi all,

The images that are displayed in my product page are of different size. How do I make them the same size?

Chillsmart_0-1665994595751.png
Chillsmart_0-1665994595751.png1046×448 192 KB

Site url: thechillsmart.com

2

@Chillsmart you can try this code

Add this css at the bottom

Online Store ->Theme ->Edit code

Assets → theme.scss.css

.grid-product__image-mask {

height: 220px;

}

3

Hello @Chillsmart

Go to the oneline store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

.grid-product__image-mask .image-wrap {
    height: 220px !important;
}
4

It is still the same :confused:

5

Hi @Chillsmart

Follow these steps:

  1. Go to your themes page
  2. Click Edit Code
  3. Find the file named “theme.css.liquid” or “base.css”
  4. And paste the following code at the bottom of that file.
.image-wrap {
    padding-bottom: 100%;
}

Please let me know if it works.

6

Hello @Chillsmart

Try this -

Go to the online store > theme > Edit Code >Assets >theme.scss.css >add code in this file.

.grid-product__image-mask .image-wrap {
    padding-bottom: 100% !important;
}
7

It worked! Thanks!

2 Likes
8

Hi,

Is this possible to do with the Craft theme?

9

Mine is still the same :disappointed_face: I have boundless on if that helps

10

I have done with so many stores using the below code
https://doublemarvellous.com/blog/equal-heights-of-elements-with-vanilla-js-in-shopify/

11

Hello, I am having the same problem with the photos. I was trying to insert that code, but when I reach a certain point, I can’t find the “theme.scss.css”. Can you help me, please. I am attaching a pic so I can make sense. Thanks

Captura de ecrã 2023-09-29, às 19.01.30.png
Captura de ecrã 2023-09-29, às 19.01.30.png2880×1403 403 KB

12

Thanks for this, but I do not have that option. Here is a screen shot of what I see:

online store > theme > Edit Code >Assets >theme.js is the only option I see. My theme is Ella, if that helps.

Shopify Help - Photo resizing.png
Shopify Help - Photo resizing.png1518×772 50.4 KB

13

Hello Ella,

Thanks for your reply.

I was able to manage the problem with help from a friend.

But thanks!!

Ana

14

I meant to say I am actually having the same problem, lol! Any insights on how to update within the Ella theme?

15

Where do you post the code it says in the link? Thanks

16

Yes its in the link

17

Hello I have same problem, I added code it helped for computers but it didnt for mobile devices. Do you know why ?

.grid-product__image-mask .image-wrap { padding-bottom: 100% !important; }

18

Checking in for an Update: have you guys found any solution?

I have the same issues using Habitat

19

Hi, I tried this and it didn’t work unfortunately. Can you advise where I can find the line of code now to remove it? Thanks