Hey everyone,
I'm currently working on optimizing a Shopify store and ran into a weird layout shift / image aspect ratio issue on our main collection page that is driving me crazy.
The Setup & The Problem
The site is built on a customized Shopify theme, and I’ve been trying to clean up the product grid code. Everything looks completely fine on desktop, but the moment I test it on mobile viewports (specifically iOS Safari and Chrome mobile), the product images get severely squished horizontally.
It looks like the object-fit: cover; property isn't playing nice with the dynamic aspect ratio classes generated by Shopify's Liquid file.
You can check out the live collection grid here to see exactly what I mean by the layout rendering behavior: Ethiopian Opal
what I've Tried So Far
1.Hardcoding Aspect Ratios: I tried changing the padding-top trick (padding-top: 100%; position: absolute;) inside the product-card.liquid snippet. It fixes the square grid but cuts off the corners of the natural gemstone cabochons, which looks bad.
2.CSS Override: Added height: auto !important; width: 100% !important; to the custom CSS file, but it triggers a huge CLS (Cumulative Layout Shift) penalty on Google PageSpeed Insights because the wrapper doesn't know the image height before it loads.
The Question
How do you guys usually handle dynamic product image heights in Shopify Liquid grids without triggering CLS or causing image distortion on smaller mobile view?
Is there a specific JavaScript lazy-load wrapper or a standard flexbox utility class that I should use to force the mobile columns to stay uniform?
Any advice or code snippets would be highly appreciated! Thanks in advance.
Top comments (0)