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

}