Product grids and the table view#
Most shops need one grid that scans well and one view that compares well. These five cover both: image-led cards for browsing, and a table listing for catalogues where the buyer is reading numbers rather than looking at photographs.
The five product listing blocks#
- Product Listing Card 1: a deals grid with an add-to-cart action on each card. Free.
- Product Listing Card 2: a three-up grid carrying image, name and price only. Free, and the cleanest starting point.
- Product Listing Card 3: a grid with low-stock badges and a view-similar action.
- Product Listing Card 4: a carousel and grid combination across a longer set.
- Product Listing Card 5: the table-style listing with comparison and sorting.
Grid or table#
Grid when the picture sells the item, which covers most fashion, homeware and food. Table when the buyer is comparing specifications, which covers components, tools, tyres and anything with a model number. Product Card 5 is the table, and it wins outright in those categories because a grid forces somebody to open five tabs to do what a table does in one screen.
Details that keep a grid tidy#
- Titles clamp to a fixed number of lines, so one long name does not push a card taller than its neighbours
- Badges sit in a reserved slot, so a card with a sale badge is the same height as one without
- Struck original prices sit beside the current price rather than replacing it
- The whole card is the link target, not just the title, which matters most on touch
- Images hold a fixed aspect ratio, so a portrait photograph does not stretch the row
These sound small and they are the difference between a grid that looks designed and one that looks generated.
Add to cart from the grid#
Product Card 1 puts the action on the card. That works for repeat purchases and single-variant products, and it works badly for anything needing a size or a colour, because the choice then has to happen somewhere. For those, a quick view is the better pattern, and the product detail collection includes a quick view dialog built to open from a grid without losing the shopper place in the list.
Sorting, pagination and how many to show#
Show enough rows that scrolling feels productive and few enough that the page stays fast. Around twenty-four is the usual compromise. Prefer a load-more control over infinite scroll if the footer contains anything a customer needs, since infinite scroll makes a footer unreachable in practice.
What a product grid needs around it#
A filter bar or sidebar above or beside it, category blocks upstream when the catalogue is wide, and a cart downstream. Those four plus a checkout are a working storefront.
