How to get same image ratio in product card Impact theme

Store Design

Topic summary

  • Issue: Need consistent image ratios in product cards (Impact theme) to prevent layout shift while scrolling. Existing gallery mixes portrait close-ups and landscape mockups; OP accepts some cropping, may adjust focal points or replace images.

  • Advice: CSS-based scaling or forcing dimensions can degrade quality or crop poorly. Best practice is to standardize uploads to the same width and height across all products. Fixed width/height applied now may still look off for many images.

  • Mitigations/updates: OP plans to group portrait images together and group landscape images in product cards to reduce screen “jumping.” This is expected to improve CLS (Cumulative Layout Shift, a performance metric). Reply confirms that reducing layout shifts should slightly improve performance and Insights scores.

  • Status: No built-in Impact theme option identified; no definitive technical setting provided. Practical path is to standardize image dimensions and use grouping and focal-point tweaks as interim measures. Discussion remains open without a final resolution.

Summarized with AI on December 16. AI used: gpt-5.
3

thank you for your reply!

yes in many cases it will be really bad but I in some cases not - so it is to minimize the work. I’m migrating from squarespace, where this was an option and it is not awful how it is cut mostly. Also, on the collection pages I had the option to have images have the same image ratio and it looks fine.
I just saw that it might be helpful to group together the portrait images and before/after group landscape images in the product card, (when it is not possible to change the ratio of the image so much) - to avoid the jumping on the screen. Hope this helps on the cumulative layout shift rating also.