E-Commerce Product Filters and Navigation Explained

E-commerce product filtering lets a shopper narrow a category by attributes: size, colour, brand, price, or stock. Sorting changes the order of the same list, for example by price or newest. Navigation is the category tree that decides which list they start from. Filters are not a substitute for categories. A shop with 2,000 SKUs and one page called “All products” will not be saved by a sidebar.

This page explains catalogue behaviour. It does not argue whether a business should open an online shop.

Categories first

Build a category hierarchy shoppers would say out loud: “office chairs,” not “SKU group B.” A product lives in the category a buyer would browse. Extra attributes (colour, material) belong in filters if they cut across categories.

Keep names consistent with the rest of the site’s information architecture. A header item “Furniture” that opens a page titled “Living solutions” makes people think the filter failed.

Filters that behave

• Show counts when you can keep them accurate. A count of zero should not be a click that leads to a silent empty page.
• Allow more than one value when that matches the attribute (two brands). Use a single choice when the attribute is exclusive.
• Show which filters are active, and offer “clear all.”
• Combine filters with AND unless you have a stated reason not to: brand A and in stock, not a surprise mix.
• When a combination has no products, say so and show how to remove the last filter. Do not show unrelated bestsellers without explaining the switch.
• Keep sort separate from filter. Changing sort must not wipe the size the shopper selected.

Price filters need an honest range. A slider that cannot reach the real maximum price is a defect.

URLs and shared lists

When filters change the list, reflect them in the query string if shoppers will share or bookmark the result. A filter that only lives in page memory disappears on refresh and cannot be handed to a colleague. Canonical and pagination rules should still point at a real category, not at every combination of colour and size, or you will publish thousands of thin URLs. Keep the indexable page as the category, and treat filter combinations as views of that category unless you have a deliberate landing page with its own copy.

Phones

Filters often hide behind a button on small screens. That button must show how many filters are on, open a panel that can be applied and closed, and not cover results with no way back. Test at a narrow width as you would for responsive layout. A desktop sidebar that simply disappears is an unfinished mobile catalogue.

A practical example

A uniform supplier uses categories for industry (hospitality, factory, clinic) and filters for size and colour. Selecting factory plus size XL updates the grid and lists both chips. Size XL in a colour they do not sew shows “No products match” and a control to remove colour. Sort by price keeps XL selected. On a phone, “Filters (2)” reopens the same choices. The team does not add a filter for an internal warehouse code.

Key takeaways

• Categories choose the starting set. Filters narrow it. Sort reorders it.
• Show active filters and a real empty state.
• Do not offer combinations that dead-end without an explanation.
• The phone filter panel must apply, display, and clear.

FAQ

How many filters are too many?

More than a shopper can understand at a glance. Start with the attributes that change a buying decision. Hide administrative fields.

Should out-of-stock products appear?

Decide and label it. Hiding them avoids disappointment and hides demand. Showing them with an “out of stock” state is honest if people can still enquire. Do not mix the two without a visible control.

Is a search box a filter?

Search is another way in. Apply the same category and filters to search results if you can, and say when you did not, so zero results are understandable.