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?

 

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.

Examples