Ecommerce Product Filters: How to Design Filters That Help Customers Shop

Good ecommerce filters let shoppers narrow a list to the products that fit them, quickly and without dead ends. Offer the essentials, such as price, rating, colour, size and brand, plus the attributes that matter in each category, and explain unfamiliar ones. Show counts, and hide or disable values that would return nothing. Keep applied filters visible with one-tap removal and a clear-all option. On mobile, use a full-screen panel with an apply button that shows the result count. Keep filters when shoppers come back from a product page, and never make filters wait on a slow full-page reload.

A filter narrows a product list by a criterion. Faceted navigation is a system of filters built from product attributes, called facets, whose values can be combined and which update to reflect the products that remain. Sorting doesn't remove anything; it reorders the list.

Filters are one part of the listing page. The product listing page guide covers the page as a whole, including product cards, sorting and loading; this guide goes deep on filtering. The diagram above shows the loop: open filters, apply, see the applied summary and updated results, and adjust without starting over.

Baymard Institute identifies five filter types users expect across most ecommerce sites: price, user rating, colour, size and brand. Its benchmark found only 43% of sites offered all five, and 80% of mobile test users applied price filters regardless of product type (Baymard Institute, 2020). Add category-specific filters on top; see fashion filters for a worked vertical example and product sorting for the complementary control.

Baymard Institute identifies five essential filter types for most stores and reports how many sites still don't offer each: price (12% don't), user rating (53% don't), colour (10% don't), size (15% don't) and brand (27% don't). On top of these, each category needs filters for the attributes shoppers actually use to decide: fit and material for clothing, screen size and storage for electronics, dimensions for furniture, compatibility for parts and accessories.

Find those attributes in search logs, customer questions, reviews, support tickets and competitor stores, then check that your product data can support them.

Most filter problems start in the catalog. If some products lack a material value or colours are recorded as “Navy”, “Dark blue” and “Midnight”, filters return incomplete or confusing results. Normalize values into a controlled vocabulary for filtering while keeping descriptive names for product pages, fill gaps for high-traffic categories first, and make attribute completeness part of the product listing process.

Specialist attributes such as fabric weight, lens mount or thread count need explanation for many shoppers. Baymard's research on industry-specific filters found that most sites don't explain them. A short tooltip or inline hint next to the filter heading, or a link to a buying guide, lets shoppers use filters they would otherwise ignore or misuse.

Shoppers expect values within one filter to widen the result (black OR navy) and values across filters to narrow it (black AND size M). Allow multiple selections within a filter unless the values are mutually exclusive. Update the available values and counts in other filters to reflect the current selection, so shoppers can't build a combination that returns nothing.

Shoppers need to see which filters are active, especially after scrolling or returning to the list. Baymard reports that 28% of sites don't display an overview of applied filters at all. Show the selected values, not just a count, typically above the product list, with a remove control on each and a “Clear all” option. On mobile, a horizontally scrolling row of chips above the list works well as long as it's clear there are more.

A number next to each value (“Waterproof (24)”) tells shoppers what to expect before they click. Hide values that would return zero products, or show them disabled if their absence would confuse. If a combination does produce no results, explain which filters caused it and offer to remove the most restrictive one, rather than showing an empty grid.

The two common layouts are a left sidebar and a horizontal toolbar above the list. Sidebars suit many filters and spec-heavy categories; toolbars save space for image-led catalogs with fewer filters. Order filters by importance for each category, not alphabetically, and expand the most important ones by default. On desktop, updating results as each value is selected is a common pattern; if you do this, keep the page stable and don't jump the shopper back to the top.

On a phone, open filters from a clearly labelled “Filter” button near the top of the list, ideally sticky, in a full-screen or large panel. Batch selections and show the resulting count on the apply button (“Show 36 results”). After closing, keep applied filters visible above the list. Make controls large enough to tap reliably, and keep sort as a separate control so shoppers don't have to open the filter panel to change order. See mobile ecommerce UX.

When a shopper opens a product and presses back, their filters, sort order and scroll position should still be there. Losing them is one of the most frustrating listing-page failures. Store filter state in the URL so it survives back navigation, refreshes and sharing, and keep filters when shoppers paginate, load more or change the sort order.

Filters should respond quickly. Update results without a full page reload where possible, show a loading state on the list while results update, and keep filter counts in sync with results. Slow filtering discourages shoppers from refining at all. On the technical side, filter combinations can generate enormous numbers of URLs; decide which filtered pages should be crawlable as a separate SEO decision so it doesn't constrain the shopper experience.

Group each filter's options with a fieldset and legend or equivalent labelling, use real checkboxes and radio buttons, expose expanded and collapsed states on filter headings, and give colour swatches text names. When results update, announce the new result count as a status message so screen reader users know something changed. Make price sliders operable by keyboard, or pair them with input fields.

Filters turn a large catalog into a short, relevant list. Offer the essential and category-specific filters, back them with clean product data, choose appropriate controls, show counts and applied filters, design a proper mobile panel and keep filter state when shoppers move around. For the page they sit on, see the product listing page guide, and for the other main way shoppers narrow a catalog, see ecommerce search UX. To keep filters from creating SEO problems, see faceted navigation SEO.

For related guides, see marketplace search, filters, electronics filters and furniture filters and jewelry filters.