Product Card Images in Featured Product - Image Size Issue

Store Design

Topic summary

A user is experiencing image sizing issues with product cards on their homepage using the Dawn theme. Product images appear cut off and inconsistent in size.

Initial Solution Attempted:

  • CSS code was provided to add to theme.liquid before the </head> tag
  • This fixed the cropping but resulted in non-uniform card sizes

Second Solution:

  • Additional CSS code was shared with a screenshot demonstration
  • However, this caused images to appear stretched with distorted aspect ratios

Root Cause Identified:
The fundamental issue stems from inconsistent source image dimensions (varying between small, wide, and square formats).

Trade-off Explained:

  • Maintaining aspect ratio = different-sized cards
  • Uniform card sizes = stretched/distorted images
  • Recommended solution: Standardize all product images to the same aspect ratio (e.g., 1:1 square) at the source level

The discussion remains open as the user seeks a solution that maintains both uniform cards and proper aspect ratios.

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

Hello,

On the home page on site url - treebletoys.com , we have product cards which have product images in different sizes, they are cut in the current view, please help resize them so that they fit properly irrespective of size in the product cards, we use dawn theme.

2

Hi @Treebletoys
To fix the issue with the image add the below code to theme.liquid

Goto current theme → edit code → find theme.liquid → add below code before
1 Like
3

Thanks @Huptech-Web , but the product card sizes are not uniform with the above fix. Is there a better alternative ? -Thanks

4

Hi @Treebletoys
If you add this code then, the image will look like this ( Check screenshot )

HuptechWeb_0-1742562486024.png
HuptechWeb_0-1742562486024.png1887×865 290 KB

1 Like
5

Thanks so much - @Huptech-Web . Sorry, am being a little finicky but if you notice the image is stretched & looks the aspect ratio is lost.

Any suggestion for same ?

6

Hi @Treebletoys
For a proper aspect ratio, you have to make the image the same, like 1:1, so it will show properly.

Currently, some images are small some are wide, and some are square. If we show the full image without losing the aspect ratio then the images will look different sized and if we lose the aspect ratio it will show stretched.