Type "jacket" into most fashion stores and you get several hundred results. Nobody scrolls through them. The shopper narrows down: their size, a color, a budget. If they can't get there in a few clicks, they rephrase the query, or they leave.

Filters are the second half of search. Yet they get far less attention than the engine's relevance: they are set up once, often straight from the list of available attributes, and never revisited. This article gathers the rules that matter, from the calculation logic down to the shopper's thumb on a phone.

Filter or facet: the difference

The two words are often used interchangeably. The distinction is still useful.

A filter narrows a list by a criterion: "price under $50", "in stock". It can exist independently of the results on screen.

A facet is a filter whose values are computed from the current results. On the query "trail running shoes", the Brand facet only offers the brands present in those results, each with its number of matching products. It describes what is on screen, and it changes with the query.

A facet answers "what is in these results?", whereas a fixed filter answers "what is in the store?". On a search results page, the first question is the one the shopper cares about.

Nine rules for filters that help people choose

1

Show facets that depend on the results

A panel that is identical on every search ends up offering irrelevant criteria. Facets should reflect the products returned by the query, and the criteria shown should make sense for the product family at hand.

Example
On "hiking backpack", offer capacity and weight. On "summer dress", length and fabric. Not the other way around.
Approach: compute each facet's values on the query results, and hide a facet when it has only one value: it doesn't help tell anything apart.
2

Show the number of products per value

The count next to each value tells the shopper what they will get before they click. Above all, it prevents the worst-case scenario: ticking an option and landing on an empty page.

Approach: show the count, recompute it on every selection, and never offer a value that leads to zero results in the current context.
3

Order facets and their values

The first two or three facets get most of the clicks. Category, size and price usually come before fabric or country of manufacture. Within a facet, the order depends on what the values are.

Example
Brands sorted by number of products. Sizes in their natural order (XS, S, M, L, XL), never alphabetically. Prices from lowest to highest.
Approach: put the facets your customers use most at the top (your browsing data will tell you which), collapse the others, and cap long lists at a few values with a "show more" link.
4

Group similar values together

A catalog fed by several suppliers piles up spelling variants. The shopper faces "Blue", "navy blue", "Navy" and "Marine" as if they were four different colors. The fix is value grouping, also called bucketing.

Example
Colors mapped to a dozen base shades. Shoe sizes harmonized on a single system. Price ranges that follow the catalog's actual distribution, rather than round brackets where a single range holds 80% of the products.
Approach: normalize values at the source, in the catalog, rather than in the display layer. A price slider complements predefined ranges well, it doesn't replace them.
5

OR within a facet, AND across facets

Ticking "red" then "blue" means "red or blue": the shopper is widening their choice. Then adding "size 8" means "and in size 8": they are narrowing it. Reversed logic produces results that look absurd, and an empty list as soon as a second color is ticked.

Approach: multiple checkboxes combined with OR within a facet, AND between facets. For single-choice facets (one category at a time, for example), use links or radio buttons so the behavior is clear.
6

Make selections visible and reversible

After three or four selections, shoppers don't always remember why they only see six products. Active filters should stay visible above the results, and each one should be removable without starting over.

Approach: one chip per active filter with a cross to remove it, and a "Reset" button to return to the full list.
7

Keep selections when sorting or navigating

Changing the sort order, loading the next page or coming back from a product page must not clear the filters. It is one of the most common frustrations: the shopper views an item, comes back, and finds the full list again.

Approach: apply sorting to the already-filtered results, and keep the filter state in the URL so it survives the back button and a shared link.
8

Rethink the panel for mobile

A sidebar has no place on a phone screen. The panel becomes a sheet that opens from an always-visible "Filters" button and closes onto the updated results. Checkboxes and chips must stay easy to tap: Apple's and Google's guidelines set a minimum touch target of 44 pt and 48 dp.

Approach: a button that shows the number of active filters, a bottom sheet, and a confirm button that states the outcome ("Show 37 products") to avoid reloading the list on every tick. More on this in our article on mobile search.
9

Don't forget accessibility

Filters built from plain clickable elements can't be used with a keyboard and say nothing to a screen reader. Color swatches without a name pose the same problem for color-blind shoppers.

Approach: real checkboxes and real buttons, a text label on every value (colors included), a visible keyboard focus, and an announcement of the new result count through an aria-live region after each selection.

Facets start in the product data

No interface makes up for an incomplete catalog. A Color facet is only reliable if every product has a color, in a consistent vocabulary. A product without the attribute disappears as soon as the shopper filters, even if it was a perfect match for their search.

If your catalog goes through Google Merchant Center, the color, size, material and product_type attributes are the ones that feed your facets. Our article Merchant Center and site search covers which ones count and how to audit them, and the one on product data covers value normalization.

A simple check: take your most-used facet and add up the counts of its values on a broad query. If the total is well below the number of results, part of the catalog is missing the attribute.

Measuring filter usage

Three indicators are enough to tell whether your filters are pulling their weight.

Usage rate. The share of searches followed by at least one filter. A very low rate on a large catalog often points to irrelevant or badly placed facets.

The facets actually clicked. They tell you which order to use, and which ones you can collapse or remove.

Dead ends. The filter combinations after which shoppers give up or start a new search. They reveal gaps in the catalog or badly grouped values.

This data can be collected with a dedicated event in Google Analytics 4. The extraction method is described in our guide to analyzing site search queries in GA4.

Facets computed on every search, no development needed

Vectail installs search powered by Google Vertex AI with category, brand and price filters, counts included. One line of code to add, no plugin.

Start for free - 14 days, no credit card

Our take

In the Vectail widget, the Category and Brand facets are computed by Google Vertex AI on the results of each query, with the number of products per value. Price is filtered by range. Several values of the same facet combine with OR, facets with each other with AND. Active filters appear as chips above the results, and on mobile the panel opens as a sheet from a button showing how many filters are selected. You choose which filters to display from the dashboard.

If you remember only one rule, make it the second: never let a shopper click an option that leads to an empty page. It is the easiest to check, and the one your customers notice first. Searches that still end on an empty page are a separate project, covered in our guide to zero-result pages.

Sources

  1. Touch targets: Apple Human Interface Guidelines (44 pt) and Google Material Design (48 dp).
Back to blog