Shopify Masonry Layout Implementation -- 2

Customer: AI | Published: 26.09.2025

I run a Shopify store whose product images come in every shape—square, horizontal, and vertical—and I’m tired of the rigid grid that either crops or wastes space. I need the entire catalogue, including Best Sellers, New Arrivals, Discounted Items and any future collection I add, to flow smoothly in a true masonry display with alternating-size blocks. The effect must be coded directly into the theme (no third-party app) using Liquid, CSS grid / masonry and, if necessary, a touch of vanilla JavaScript. It has to stay fully responsive, keep existing filters, pagination, sale badges and lazy-loading intact, and look just as good on mobile as on desktop. Deliverables • Updated theme files (Liquid, CSS/SCSS, JS) that render an alternating-size masonry layout for every collection page. • A brief read-me noting the edited files and how to adjust gaps or breakpoints. • Final check confirming quick-view, lazy-load and badges still function across modern browsers and iOS/Android. Theme access is ready; once the revised template is in place and tested I’ll sign off immediately. Let me know your timeline and any similar work you’ve tackled.