Filters are an indispensable part of the online shopping experience. A good selection of filters can narrow down the two thousand dresses in a clothing store to the 14 yellow size ten sundresses costing less than $50 that you’re interested in. But just having filters and applying them isn’t enough for a great user experience. You need to show your customers all the applied filters.

Why?

Displaying filters provides confirmation that filters have actually been applied. This can go a long way in reassuring your customers especially on mobile where filters are often hidden behind a link.
Displaying filters gives customers an idea of what they’re looking at. Customers often apply numerous filters and they don’t always remember them all.
Displaying filters allows customers to easily remove filters. Take the dress example above. A customer might not get any results searching for 50-dollar dresses (in a high end store for instance). Such a customer could deselect the price filter in order to see more results. If the applied filters aren’t clearly shown, this deselection process can be made unnecessarily hard.

Where should you display applied filters?

The best place to display applied filters is right above the product list. You could also display applied filters above the filtering sidebar on desktop. Due to vertical stacking, avoid displaying applied filters above the filtering sidebar if too many filters are applied since that has the effect of pushing the filtering sidebar down and out of view.

Applied filters should also be clearly indicated in their original position. This is often done by marking a checkbox.

Clearly indicate the existence of truncated filters

When many filters are applied on mobile, it becomes necessary to display them over multiple rows due to space limitations. The number of rows is often limited to two or three for both aesthetic and practical reasons.

As such, some filters tend to get truncated. Whenever this happens, make sure you clearly indicate the existence of additional filters by fading the last one, including a plus sign or a “See More” link that allows shoppers to expand the selection of displayed filters.