Displaying products in a list can be a little tough. You don’t want to clutter a display with too many products but you also don’t want to have too few products since that increases the amount of scrolling and new page loads a customer has to suffer through. There is also the not-so-small problem of including enough information to drive interest in a product.

There are two general approaches:


Grid layout

Displaying your products in a grid is recommended for products whose sales are driven by visuals rather than technical specifications. Think of stuff like shoes, bags, clothes, or costume jewelry.


List layout

A list layout is recommended for spec-heavy products as you need to display a number of important specifications in order to drive any interest in the listed items. No one in their right mind is going to buy a DSLR camera, laptop, or refrigerator by just looking at a picture. 


View switching

If your products are in-between those two extremes (spec-driven and visual), you could give shoppers the option of switching the view between a grid and a list.


On desktop

On desktop (on a 22″ screen), it’s good to note that many of the big brands I looked at choose to display 4 or 5 products per row.


On mobile

On mobile, many opted for 2 products per row due to space limitations but there were a few exceptions who had one product per row which is still alright.


Consistent layout

Interestingly, B&H and Crutchfield have a consistent layout on both desktop and mobile, with 1 product per row on both devices. This is understandable as they sell spec-heavy products.