Product Shelf: pick a size and add to cart, right from the grid

Until now, a shopper looking at a grid of your products had to open the product page to choose between a 250 ml and a 1 litre. Product Shelf puts that choice on the card: a size dropdown, the price following the pick, and an Add to cart button that opens your theme's own cart drawer.

It sits in Add section → Modulo: Product Shelf.

Every card the same height

This is the part that took the longest to get right. On most product grids a one-line title and a three-line title produce different card heights, so the buttons end up at different heights across the row and the whole thing looks crooked.

Here the buy row is part of the card's structure rather than something sitting underneath it. Every row reserves its space whether or not it has anything in it, so a long title, a missing rating, a discount or a sold-out variant all produce an identical card. The Add to cart buttons line up into one unbroken band across the row.

What's on the card

• Size or variant dropdown, with sold-out options greyed out and unselectable
• Star ratings read from your review app, and hidden automatically if nothing in the grid has one
• Badges from real data only: sold out, a tag you have put on the product, or the discount worked out from your Compare-at price. Nothing invented
• A subtitle line from your product type, vendor, or a metafield

Tabs, if you want them

Add Tab blocks and each one gets its own collection or hand-picked products, so one section can cover Ghee, Oils and Flours. Add none and it renders as a plain grid with no tabs at all.

The details

Grid or carousel, 2 to 5 columns, 1 or 2 on mobile, square, portrait or landscape images, and every button label editable for any language. The buy row is a real product form, so it still works for shoppers whose browser has JavaScript disabled.

Built after a merchant wrote in asking for exactly this. If something you need is missing from Modulo, tell us in the chat at the bottom right and it may well end up here.