Set all product image sizes the same in Dawn Theme

Store Design
,

Topic summary

A Dawn theme user seeks to resize product images uniformly without cropping. Three solutions are proposed:

CSS-based approaches:

  • Fix aspect ratio using .card__inner:before with padding-bottom: 100% and object-fit: contain to create square images
  • Set fixed height (250px) on .card__inner with object-fit: contain
  • Code can be added to theme.liquid file above </body> tag or Theme Settings => Custom CSS

Alternative recommendation:

  • Use an auto image editing app from the Shopify App Store to bulk-resize images to square format via canvas enlargement
  • Cost: $20-$30 one-time, depending on product count
  • Avoids theme code modifications that complicate future updates

Key consideration: Editing theme code directly may create issues with theme updates. The aspect-ratio method produces a consistent grid layout across any theme.

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

Is there a way to resize all my images to the same size without cropping them? I am using the Dawn theme.

My website is www.kcstoybox.com

Thank you!

2

Hey @kcstoybox

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1730529517494.png
Moeed_0-1730529517494.png1170×770 639 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Yes, you can with CSS.

Rather than fixing the image height I’d recommend fixing aspect ratio.

.card__inner:before {
  padding-bottom: 100%; /* this is the height of images relative to their width */
}

.card__inner img {
  object-fit: contain !important;
  background-color: white !important;
}

You can paste this code into Theme Settings=>Custom CSS setting or into Custom CSS setting of collection grid section(s).

Editing your theme code will make updates to your theme much more troublesome.

But I’d rather say use an app (there is a whole spectrum of auto image editing apps in the app store) and let the app to make all your images (say) square by enlarging canvas.

Depending on the number of products/images, this may take $20-$30 once but then all your images will be square and produce a nice regular grid in any theme.

4

Hi @kcstoybox

You can add this code to the custom CSS field:

.card.card--standard.card--media .card__inner {
    height: 250px !important;
}
.card.card--standard.card--media .card__inner img {
    object-fit: contain !important;
}

You can change the height in the code if you want further modification.

DaisyVo_0-1730536558878.png
DaisyVo_0-1730536558878.png1351×614 414 KB

Hope this can help!

Best,

Daisy