Shopify Liquid Glitch: Collection Page Image Squishing & Layout Shift on Mobile (Need Help)

Armonia Gems — Thu, 04 Jun 2026 09:03:28 +0000

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.

Real Garnet Pendant Necklace – January Birthstone Magic (925 Silver)

Armonia Gems — Thu, 29 Jan 2026 11:06:41 +0000

January Born Ladies – This Garnet Pendant is Made Just for You!

AA+ Natural Garnet deep red fire
925 Sterling Silver prong setting
18" Adjustable Chain (16"+2" extender)

The Power of Garnet
January Birthstone = True Love + Loyalty
Confidence boost + Success magnet
Blocks negative energy

Perfect Gift For
Wife/GF anniversary surprise
January birthday special
Mom-Daughter elegant bond

"Every time she wears it, she'll be reminded of your love"

DEV Community: Armonia Gems

Shopify Liquid Glitch: Collection Page Image Squishing & Layout Shift on Mobile (Need Help)

Real Garnet Pendant Necklace – January Birthstone Magic (925 Silver)