A large product catalog needs more than a smaller view of the inventory. It needs ways to narrow the choices around the questions a customer is actually trying to answer.
For a fictional furniture store, those questions might concern dimensions, materials, seating capacity and availability. Internal product codes may help the warehouse considerably more than they help someone furnishing a dining room.
Good filters connect those two worlds. They make the relevant attributes available, show what has been selected and let the person refine a choice without repeatedly starting over.
That last part matters. A shopping assistant who forgets the conversation every time you inspect a chair would be quite tiring company. A website can achieve much the same effect by losing filters when someone returns from a product page.
Start with the decisions that eliminate unsuitable options. For our sample catalog, a useful set of questions could be:
- Will the item fit the available space?
- Does it provide the required capacity or function?
- Is the preferred material or finish available?
- Can it be obtained within the relevant time frame?
- Is its price within the customer’s intended range?
These are examples, not a universal filter specification. Different categories need different attributes, and the catalog data must be consistent enough to support them.
A filter for width is only useful if products have comparable measurements. A finish filter becomes confusing when the same material appears under several near-identical labels.
Clean the underlying data alongside the interface. Otherwise the customer may eliminate a suitable product because its attribute was missing or entered differently.
From catalogue to checkout, here’s how we build ecommerce.
Keep the chosen view visible and recoverable
Show applied filters in a recognizable form and let people remove them individually. Provide a clear way to reset the selection when they want a broader view.
A result count can help explain the effect of narrowing the list. If a combination returns nothing, show that state clearly and offer a useful way to relax the selection. A blank grid is not an explanation, even if the empty space is beautifully aligned.
On mobile, the filter controls may need a separate panel. Make the current selection and the action to apply it understandable. Returning to the products should not leave people wondering whether their changes took effect.
The layout should fit the number and complexity of the options. Baymard’s research on horizontal toolbars explains how hiding filter values and overflowing the available space can make some implementations difficult to explore.1
That doesn’t establish a universal winner between horizontal and sidebar layouts. Our catalog needs the arrangement that exposes its important choices without overwhelming the product view.
If this was useful, try A showroom website still has a customer journey to finish.
Also preserve the journey between the list and product detail. Keep the relevant filters, sort choice and position where practical. Someone comparing three items shouldn’t have to rebuild the search after every closer look.
Baymard’s broader product-finding research provides useful evidence about these patterns.2 Any claim about improved conversion on a particular store still needs that store’s own measurements.
I would test the sample catalog with realistic requirements rather than asking someone to “try the filters.” Give them a space constraint and a product need, then watch whether they can form a useful shortlist.
A good filtering system helps people make a decision they understand. The catalog can remain large. The customer’s next step doesn’t have to be.