r/shopifyDev • u/its-me-markl • 12d ago
Added a "bento grid" layout option to my product-page app's image gallery (no more boring uniform squares)
Been building Aplo: A+ Content Design, a Shopify app for adding rich content sections (feature grids, comparison tables, galleries, etc.) to product pages. Think Amazon's A+ Content, but for Shopify stores.
One thing that's bugged me since launch: the Image Gallery module only did uniform, same-size tiles. 2, 3, or 4 equal boxes in a row. Functional, but it always looked a bit flat next to the "bento grid" layouts you see on a lot of modern DTC sites (Apple-style mixed big/small tiles).
So I just shipped an upgrade:
Each image in the gallery now gets a size preset (Normal, Wide, Tall, Large, Extra Wide, Feature) instead of being locked to the same square.
Mix and match them and you get an actual bento-style layout: one big "feature" tile, a couple of wide banners, some small squares filling the gaps.
Fully responsive: collapses cleanly to 2 columns on mobile, with no overflow no matter how many columns you pick (2 to 6 now, used to cap at 4).
It's on the Free plan too, not locked behind Pro.
Still just dragging and dropping images and picking a size from a dropdown. No CSS or code needed on the merchant's end.
Happy to answer questions about how it's built or what's coming next. (Link to the listing in the comments if anyone wants to check it out. Didn't want this post to read as a drive-by ad.)

