4 Prime Examples of Building the Perfect Filter for Ecommerce Product Listings

Jack Maden
Written by Jack Maden
December 29, 2020

Over the past decade, the retail industry has given way to the world of ecommerce, where shopping transactions take place on the internet rather than in brick-and-mortar stores. Last year, it was anticipated that roughly 12,000 retail stores would shut down, while online purchases were responsible for 10% of retail sales.

Ecommerce has received even more of a boost this year as the world adapted to the spread of COVID-19 and the lockdowns that accompanied it. Many shoppers couldn’t leave their homes to shop retail in person, which put a premium on online retail experiences as consumers adapted.

With such an emphasis on online shopping, it’s more important than ever that ecommerce businesses provide a positive user experience (UX) to set themselves apart from the competition. Part of this is offering product listing filters that help streamline and simplify the digital shopper experience.

Product filters help to organize information into digestible categories for shoppers. They can affect search engine optimization (SEO) and web performance. Only 16% of ecommerce sites provide effective product filters, so it’s a great way to set your business apart from the competition.

Ecommerce websites that employ perfect product filters can help build brand loyalty, drive sales, and boost ROI. For these reasons, it’s a must when optimizing digital experiences for your online consumers.

Why Product Filters are Beneficial

Ecommerce websites typically offer hundreds to thousands of products or services for consumers to wade through, yet shoppers rarely visit a website knowing exactly what they want.

Product filters help narrow down those offerings, revealing only the items that meet the shopper’s needs. When designed for optimization, filters can help save shoppers time and reduce frustration, resulting in an overall better UX.

When designing your product filters, you must consider what kinds of things potential customers would be searching for on your website. Filtering your products by price, color, and size can help categorize search results on your site. By creating a simpler shopping experience, filters can boost your conversion rate by 26%.

This also helps your SEO. When customers can shop your website with ease, Google rewards you with higher search rankings. You’ll increase visibility and broaden your reach, driving more traffic to your site and leading to a rise in sales.

Ultimately, product filters help simplify and personalize online shopping experiences which can improve website engagement and boost revenue. Product filters are essential to ecommerce success.

4 Examples of Perfect Ecommerce Product Filters

When optimizing your website, there are several ways to filter search results to provide a smoother UX. Here are 4 best practices for building the perfect filter for ecommerce product listings, alongside examples of each.

1. Filter by Category

Category-specific filters are among the most basic in product listings, yet 42% of major ecommerce stores don’t offer this filter option. Many customers visit your website with unfamiliarity about the products they’re searching for. They want to compare similar products to determine which one would best meet their needs.

Offering a filter by category allows shoppers to find a collection of items, then further search within that range of results. For instance, someone searching for boots can use gender, color, and size filters to narrow down the results to better identify a product they need.

When designing your category-specific filters, keep in mind that any product specification important enough to appear in the item description should also be offered as a filter. The description doesn’t just highlight features the shopper finds important—they influence the shopper’s desire to filter search results by those attributes. If a collection of towels features “Quick Dry,” shoppers are more likely to want to filter that listing by towels that offer that quality.

Macy’s ecommerce store capitalizes on this idea. They offer category-specific filters as well as the option to filter by features displayed in the item description. When a visitor shops their site for sheets, the description shows size, fabric, and thread count. There are also category filters for each of these attributes. In this way, Macy’s makes it easy for shoppers to compare products within a range of results by category.

2. Filter by Theme

When a shopper enters a brick-and-mortar store, they’re usually greeted by a salesperson who narrows their search by asking questions about the occasion or purpose of the item they’re seeking. Then, depending on the response, the associate can direct the shopper to the right department. Thematic filtering online serves the same purpose.

Whether in person or on the web, shoppers tend to browse by theme. It may be easy to locate a general item, for which there are hundreds of thousands of options available. Shoppers can narrow the scope of their results by searching for a theme within that subject, greatly reducing the number of listings to scroll through.

When Target’s website users search “Baby Clothes,” they receive 1535 results. However, by allowing shoppers to filter by “Type,” they can find a much more focused listing of 59 pajama sets.

On average, people stay on a website for fifteen seconds. If they can’t find what they’re looking for by then, they abandon their search, and you’ve lost a potential customer. Thematic shopping helps people hone in on the item they need much more efficiently.

Without thematic filters, shoppers may not be able to locate what they’re looking for. They may erroneously conclude that the site doesn’t carry what they need. Or, even worse, they may become too frustrated with the time commitment of navigating so many search results. By incorporating thematic filters, you increase success rates for both your shoppers and your business.

3. Allow Multiple Filters of the Same Type

Since the purpose of product filters is to provide a more focused shopping experience for web users, why not allow people to narrow their results as much as possible? When designing your filter values, avoid making them mutually exclusive. Instead, provide the opportunity for shoppers to select multiple filter values of the same filter type.

If a shopper can only filter by one value at a time, they’re not receiving the most relevant options for their needs. What’s worse, their shopping experience is not streamlined. They have to review the results for the first filter and then go back into the system and filter by another value. As they review the second set of results, they must recall the products they saw in the previous listings. It’s inconvenient, inefficient, and frustrating.

Regardless, 32% of ecommerce sites don’t offer shoppers the option to select multiple filters of the same type. This leads to unhappy customers, site abandonment, and, unfortunately, negative reviews. Avoid all of this by allowing customers to select multiple filters at once to ensure they’re receiving the most relevant and meaningful results.

The Bass Pro Shops website caters to the requirements of their shoppers by offering this feature. If someone is searching their site for backpacking tents, they can filter by sleeping capacity. Shoppers can simultaneously select the one-person and two-person values. This narrows the scope of their results yet still provides options that meet their specific needs.

4. Display Currently-Applied Filters in Multiple Positions

Once a user has applied filters to their search, it’s important that they can reference them at a glance and be reminded of which ones are currently in use. Display currently-applied filters in multiple positions on the webpage to help minimize confusion and prevent possible user error.

In addition to the sidebar where customers originally selected their filters, display a summary of in-use filters elsewhere on the page. This can serve as a resource to ensure shoppers make the right selections throughout their online customer journey. When creating an applied filter design, it’s essential that this tool be user-friendly.

This can be achieved through the following:

  • Obvious positioning: A listing of currently-applied filters should be displayed clearly and prominently on the page. Typically, they appear across the top of the search results.
  • Adjustable filters: Make it easy for users to add and remove filters they’ve applied in case they change their mind.
  • Clear context: When a shopper adds new filter values, it helps to provide context for them as they make their purchase decisions.

42% of ecommerce sites display applied filters in only one position on a page. A site that presents applied filters in the sidebar, as well as a summary across the product list, can enhance the user experience and boost customer satisfaction.

Kohl’s online shoppers can easily see what filters they’re currently using and can simply uncheck boxes to remove filters and change their search results. This provides a more tailored experience and helps boost customer satisfaction.

Uncover Retail Industry Benchmarks in Decibel’s Digital Experience Report

With a growing emphasis on ecommerce shopping, it’s more important than ever to make sure you’re optimizing your website for a positive digital experience. Building the most effective filters for product listings can help improve customer relations, drive sales, and boost your ROI. Decibel’s latest report reveals current trends in digital experiences. It also provides insight into how your ecommerce business can improve website optimization through carefully strategized and effectively implemented product filters.

See what strategies your ecommerce business can employ to build the perfect product filters and more. Download your copy of Decibel’s Digital Experience & Conversion: Industry Benchmarks for 2021 report.

Topics: Conversion Optimization, Ecommerce, Personalization, User experience
Back to Blog Home
Get Started

Ready to discover your Digital Experience Score?

Request a demo to speak to a Decibel expert and see DXS® on your website or app today.

Request Demo