Contact

Back to Insights

eCommerce Product Filters: How to Build Better Category Page Filtering

, , ,

Product filters are one of the most important product discovery tools on an eCommerce website.

They are also surprisingly easy to get wrong.

A retailer with 2,000 products in a category may technically have excellent products, competitive pricing and strong availability. But if a customer cannot quickly reduce those 2,000 products to the 12 that meet their requirements, much of that catalogue becomes difficult to shop.

The opposite problem is equally common.

Some retailers expose almost every available product attribute as a filter, creating enormous filter menus filled with options customers don’t understand or care about.

Great filtering sits somewhere between these extremes.

The objective is not to provide the maximum number of filters.

It is to provide the smallest set of filters that allows a customer to confidently narrow the catalogue to the products most relevant to them.

Getting this right requires a combination of UX, product data, merchandising, platform architecture and technical SEO.

Why Product Filtering Matters

Imagine an electrical retailer selling 800 televisions.

A customer may already know they want:

Without filtering, they have to manually inspect hundreds of products.

With effective filtering, six decisions can reduce the catalogue to perhaps ten relevant options.

That is the real purpose of filtering.

Filters convert a large catalogue into a manageable buying decision.

The more complex the catalogue, the more valuable this becomes.

Filtering is particularly important for retailers selling products with meaningful technical or compatibility attributes, including:

For these retailers, filters aren’t simply navigation.

They are part of the sales experience.

Start With the Customer’s Buying Decision

One of the biggest mistakes retailers make is starting with their product database.

They ask:

What attributes do we have?

A better question is:

How does a customer decide which product to buy?

Those are very different questions.

Your ERP might contain attributes such as:

These may be operationally important.

They may be completely meaningless to customers.

Instead, consider the questions a salesperson would ask someone walking into a physical store.

For a television:

For work boots:

For automotive:

Those questions often provide the blueprint for your filters.

Not Every Attribute Should Become a Filter

A product may contain 50 attributes.

That doesn’t mean the category page needs 50 filters.

Every filter creates cognitive load.

Ask three questions before exposing an attribute.

1. Does the Customer Understand It?

If customers don’t understand the terminology, the filter may create confusion rather than helping.

2. Does It Meaningfully Reduce the Product Set?

Consider a category containing 100 products where 98 share the same attribute.

Filtering by that attribute adds very little value.

3. Does It Influence the Buying Decision?

This is the most important question.

Would a customer genuinely eliminate products because of this attribute?

If yes, it is probably a useful filter.

If not, it may belong in the product specifications rather than category navigation.

Filters Should Be Category-Specific

Another common mistake is creating one global filter configuration and applying it everywhere.

Different products require different buying decisions.

A fashion category might need:

A power tools category might need:

A refrigerator category might need:

The filtering experience should reflect the category.

This requires good product taxonomy and attribute architecture underneath the website.

Put the Most Valuable Filters First

Filter order matters.

Customers shouldn’t have to scroll through ten secondary filters to reach the one they use most.

For many retailers, common high-priority filters include:

But the correct order depends on the product.

For automotive parts, vehicle compatibility might be more important than brand.

For workwear, gender and size might come first.

For furniture, dimensions could be critical.

Use analytics, customer research and internal sales knowledge to determine which filters matter most.

Consider the Customer’s Language

Your internal product terminology may not match the customer’s terminology.

For example, an ERP might classify something as:

Closure Type: BOA

Customers may think:

Fastening: Dial

Or your product database might contain:

Upper Material: Full Grain Leather

while customers are simply looking for:

Material: Leather

Filter labels should use terminology customers understand.

Good product data architecture separates the technical source data from how that information is presented to customers.

Don’t Show Filters With No Results

Nothing is more frustrating than selecting a filter only to discover that it produces zero products.

Where possible, filter options should respond dynamically to the current product set.

Adobe Commerce, for example, allows attributes in its standard layered navigation to be configured as Filterable (with results), which omits attribute values that would return zero matching products. Adobe also supports displaying product counts beside filter values.

This is generally a much better customer experience.

Instead of:

Colour

Black (42)
Blue (17)
Green (0)
Purple (0)
Yellow (0)

you can simply present:

Colour

Black (42)
Blue (17)

The interface becomes cleaner and every available option is useful.

Product Counts Can Help Customers Make Decisions

Displaying counts beside filter values can be surprisingly useful.

For example:

Brand

This helps customers understand the catalogue before selecting an option.

It also prevents the frustrating experience of choosing a filter only to discover one product remains.

Adobe Commerce supports product counts within layered navigation as a native configuration option.

Multi-Select Filters Are Often Essential

Customers don’t always want exactly one value.

They may want:

Brand

☑ Makita
☑ Milwaukee
☑ DeWalt

Or:

Screen Size

☑ 55 inch
☑ 65 inch
☑ 75 inch

A strong filtering system should therefore consider whether multiple values within the same attribute can be selected.

Adobe’s newer facet capabilities support multiple selections within a facet as well as combinations across different facets.

The underlying logic also needs to be intuitive.

Selecting:

Brand = Makita + Milwaukee

usually means:

Makita OR Milwaukee

While selecting:

Brand = Makita

and:

Voltage = 18V

usually means:

Makita AND 18V

Getting this logic wrong can make filters feel unpredictable.

Price Filters Need Special Treatment

Price is one of the most common filters but shouldn’t automatically be implemented using arbitrary ranges.

A retailer might offer:

But if 90% of the catalogue sits between $300 and $400, those ranges aren’t particularly useful.

Price ranges should reflect the actual distribution and buying behaviour within the category.

Adobe Commerce supports automatic price ranges, equalised product-count ranges and manually configured price intervals within its standard layered navigation.

For some categories, a slider may work well.

For others, clearly defined price bands may be easier to use.

Again, the objective is not technical sophistication.

It is helping the customer narrow the decision.

Visual Filters Can Be Better Than Text

Some attributes are inherently visual.

Colour is the obvious example.

Instead of:

Black
Blue
Red

colour swatches can make selection significantly faster.

Other filters might benefit from icons, thumbnails or other visual treatments.

But don’t add visual elements simply because they look attractive.

A filter should become easier to understand, not more decorative.

Mobile Filtering Requires Its Own UX

Filtering becomes especially important on mobile because customers can see fewer products at once.

At the same time, there is less space available for the filter interface.

A common approach is:

Filter

↓

Full-screen or slide-out filter panel

↓

Customer selects attributes

↓

Show 24 Products

This last action can be particularly useful.

Rather than repeatedly closing the filter panel to see whether the selection worked, the customer immediately understands the impact:

Show 24 Products

If another selection reduces that to:

Show 3 Products

they can adjust before returning to the product listing.

Make Applied Filters Obvious

Once filters have been selected, customers need to understand why they are seeing the current product set.

Display active filters clearly.

For example:

65 inch × OLED × LG × Under $3,000 ×

Clear All

Each filter should be removable independently.

This becomes particularly important when customers have selected several filters and suddenly see very few products.

Don’t make them reopen the filter interface and hunt for the setting they need to change.

Filters Should Update Quickly

The best-designed filter interface will still perform badly if every interaction takes several seconds.

Customers expect filtering to feel immediate.

That means considering:

For very large catalogues, filtering architecture can become a genuine technical consideration rather than simply a front-end feature.

The SEO Problem With Product Filters

This is where filtering becomes much more complicated.

Suppose you have:

/mens-shoes/

Then a customer selects:

Colour: Black

The website creates:

/mens-shoes?colour=black

Then:

Size: 10

becomes:

/mens-shoes?colour=black&size=10

Then:

Brand: Nike

becomes:

/mens-shoes?colour=black&size=10&brand=nike

Every combination can potentially create another URL.

If you have 10 filters with multiple values, the number of possible URL combinations can become enormous.

Google specifically warns that faceted navigation can generate near-infinite URL spaces, causing unnecessary crawling and potentially slowing the discovery of important pages.

This means filtering architecture should never be designed purely as a UX decision.

It needs an SEO strategy.

Should Filtered Pages Have SEO-Friendly URLs?

Sometimes.

This is where a sophisticated implementation differs from simply making every filter indexable.

Suppose customers regularly search Google for:

Black men’s running shoes

You might decide that this combination deserves a dedicated landing page:

/mens-running-shoes/black/

with:

That can make sense.

But consider:

Black men’s size 10 Nike running shoes under $180 in stock

Creating a permanent SEO landing page for every possible combination would create an enormous number of low-value pages.

The key is deciding which filtered combinations represent genuine search demand.

Don’t Turn Every Filter Into an SEO Landing Page

This is perhaps the most important SEO principle in faceted navigation.

There is a huge difference between:

Useful category expansion

and:

Index bloat.

Filters such as:

Brand = Makita

within:

Cordless Drills

might represent genuine search intent:

Makita cordless drills

That could justify a dedicated indexable URL.

But:

Makita + 18V + Brushless + In Stock + $300–$450

may simply be a useful customer filter.

It doesn’t necessarily deserve a search landing page.

Treat these two use cases differently.

A Hybrid URL Strategy Is Often Best

For sophisticated retailers, we often prefer a hybrid approach to category filters For example:

High-Value Filter Combinations

Create SEO-friendly, indexable landing pages.

For example:

/power-tools/drills/

These should behave like genuine category pages.

Customer-Utility Filters

Allow added filtering through parameters:

/power-tools/drills/?voltage=18v

Google recommends standard ?key=value query parameters where parameters are used and advises minimising alternative URLs that return the same or substantially similar content.

Low-Value or Nonsensical Combinations

Don’t encourage search engines to crawl them.

Google’s faceted navigation guidance specifically recommends controlling crawling when filtered URLs don’t need to appear in search results.

This gives customers flexible product discovery without allowing the filtering system to create millions of unnecessary search pages.

Canonical Tags Need Careful Thought

It is tempting to solve everything by canonicalising filtered pages back to the parent category.

For example:

/shoes?colour=black

canonical:

/shoes

That may be appropriate if the filtered page isn’t intended to rank independently.

But if you have deliberately created a high-value filtered landing page targeting:

Black Running Shoes

then canonicalising it to the generic shoes category defeats the purpose.

Canonical strategy therefore needs to follow the broader indexing strategy.

Google notes that canonicalisation can help consolidate signals from faceted URLs, although it may take time to affect crawling behaviour.

There shouldn’t be a blanket rule applied to every filtered URL without understanding its purpose.

URL Order Matters

If filter parameters can appear in arbitrary orders:

?brand=makita&voltage=18v

and:

?voltage=18v&brand=makita

you may accidentally create multiple URLs representing exactly the same product set.

Google recommends maintaining a consistent logical filter order when filters are encoded into URL paths, and its broader eCommerce URL guidance recommends minimising alternative URLs that return the same content.

A well-designed filtering system should normalise this behaviour.

What Should Happen When Filters Return Nothing?

From a UX perspective, the best solution is usually to prevent customers from selecting impossible combinations in the first place.

But URLs can still be manually generated, linked externally or requested by crawlers.

Google recommends returning an HTTP 404 when a faceted URL represents a combination with no results, rather than redirecting that URL to a generic page.

Again, this demonstrates why filtering requires input from both developers and technical SEO specialists.

Shopify Product Filtering

Shopify provides native storefront filtering through its Search & Discovery functionality.

For many retailers, the native capabilities provide a good starting point for common product attributes and category filtering.

But platform capability isn’t the same thing as filtering strategy.

The difficult questions remain:

For simpler Shopify catalogues, native filtering can be entirely appropriate.

For complex catalogues, the solution may require custom product data, theme development, Search & Discovery configuration or specialist search technology.

Adobe Commerce Product Filtering

Adobe Commerce has historically provided powerful layered navigation capabilities.

Attributes can be configured for layered navigation, including whether filters should display only values with matching products. Adobe also supports product counts, configurable price navigation and category-level layered navigation.

Adobe’s newer Live Search and facet capabilities extend this further with high-performance attribute-based filtering and multi-dimensional facets.

For large Adobe Commerce catalogues, this can become particularly powerful when paired with well-designed product attributes.

But again, the quality of the result depends heavily on the data underneath it.

Your Product Data Determines Your Filter Quality

This point cannot be overstated.

You cannot build exceptional filtering on poor product data.

Imagine one supplier describes colour as:

Navy

Another:

Dark Blue

Another:

NAV

Another:

Midnight

If customers should see all of these products under:

Blue

you need product data normalisation.

The same problem appears with:

This is why sophisticated filtering projects frequently become product data projects.

ERP, PIM and commerce data need to work together.

Consider Creating Customer-Friendly Filter Values

The language used in your product data may not always be the language customers use when shopping. Internal values such as “navy,” “midnight,” and “ocean” might all represent shades that shoppers simply think of as blue.

Where appropriate, group technical or brand-specific attributes under customer-friendly filter values. This makes filters easier to scan and prevents customers from having to select several nearly identical options.

For example:

You can preserve the original product attributes behind the scenes while presenting a simpler filtering system to customers. The goal is not to remove useful detail, but to translate catalogue data into language that supports faster decisions.

Show the Number of Matching Products

Displaying a product count beside each filter value can help customers understand what will happen before they make a selection.

For example:

These counts reduce uncertainty and help customers avoid filters that lead to very narrow or empty result sets. They are particularly useful when shoppers can combine several filters.

Counts should update as filters are applied. If a customer selects “Men’s,” for instance, the values and counts shown under size, colour, brand, and price should reflect the remaining men’s products—not the entire catalogue.

Avoid Filters That Lead to No Results

A filtering system should guide customers towards useful combinations rather than allowing them to reach a dead end.

Disable or hide filter values that would return no products based on the customer’s current selections. If disabled values remain visible, make their unavailable state clear and ensure they cannot be selected.

When no products match, provide an easy way to recover. Show which filters are active, let the customer remove them individually, and include a prominent option to clear all filters. You may also suggest removing a particularly restrictive selection.

Make Applied Filters Easy to See and Remove

Customers should never have to remember which filters they have selected.

Display active filters above the product grid or in another highly visible location. Represent each one as a removable chip, such as:

Brand: Acme ×
Colour: Blue ×
Price: $50–$100 ×

Include a Clear all action when more than one filter is active. Removing a filter should update the product results immediately while preserving the customer’s other selections.

The page heading or results summary can also reflect the current state—for example, “24 blue running shoes”—provided this remains concise and easy to understand.

Support Multiple Selections Where They Make Sense

Many filters should allow customers to select more than one value. Someone shopping for clothing may want to see products available in black, blue, or grey, rather than repeating the search for each colour.

Checkboxes are generally appropriate for these filters because they communicate that multiple values can be combined. Radio buttons are better when only one selection is possible.

Be clear about how selections interact:

For example, choosing black or blue should show products in either colour. Adding size medium should then limit those results to black or blue products available in medium.

Choose the Right Control for Each Filter

Different product attributes require different interface controls.

Use:

Avoid making every filter look and behave the same. The control should match the type of decision the customer is making.

If you use swatches or icons, include accessible text labels. A colour sample alone may be difficult to interpret and may not be usable by customers with colour-vision deficiencies.

Prioritise the Most Useful Filters

Not every available product attribute deserves a prominent filter.

Place the filters that matter most to purchasing decisions near the top. These will vary by category. Size and fit may be critical for clothing, while screen size, storage, and processor type may be more important for laptops.

Use customer research, search data, sales data, and support enquiries to identify the attributes shoppers care about. You can also review frequently used filter combinations and the attributes customers mention in product reviews.

Less important filters can appear farther down the panel or inside a collapsed “More filters” section. This keeps the initial interface focused without removing advanced options.

Design Filtering for Mobile Devices

A desktop sidebar rarely translates well to a narrow screen. On mobile, filters are usually more effective inside a full-screen panel or bottom sheet opened by a clearly labelled Filter button.

The mobile experience should:

If filters update only after the customer taps an apply button, label that button with the result count where possible—for example, “Show 38 products.”

Avoid forcing the page to reload or jump back to the top after every selection.

Keep Filtering Fast

Filtering is an interactive task, so delays feel particularly disruptive. Results should update quickly and predictably.

Optimise both the frontend and the underlying product search system. Avoid downloading an entire catalogue to the browser when filters can be processed efficiently on the server or through a search index.

Helpful techniques include:

Do not remove the existing results immediately if replacement results take time to load. Keeping them visible with a loading indicator creates a smoother experience than showing a blank page.

Preserve Filters During Navigation

Customers often open a product, review it, and then return to the category page. Their filters, sort order, and scroll position should still be there.

Filter state should also be represented in the URL when practical. This offers several benefits:

Use clear, stable URL parameters and avoid creating unnecessary indexable variations that could cause search-engine duplication. Canonical tags, crawl controls, and an intentional faceted-navigation strategy may be needed for large catalogues.

Make Filters Accessible

Customers should be able to operate filters with a keyboard, screen reader, touch input, or other assistive technology.

Ensure that:

Where possible, favour native form controls. Custom checkboxes, sliders, and dropdowns require additional work to reproduce behaviour browsers already provide.

Test and Improve Filters Using Real Behaviour

A good filtering system should evolve with the catalogue and with customer expectations.

Track metrics such as:

Low usage does not automatically mean a filter is unnecessary. It may be difficult to find, poorly labelled, or placed in the wrong category. Combine analytics with usability testing and customer feedback before removing it.

Build Filters Around Customer Decisions

Effective category-page filtering is not simply a list of product attributes. It is a decision-making tool.

Start with clean product data, present attributes in customer-friendly language, prioritise the filters that matter to each category, and make selections easy to understand and reverse. The experience should remain fast, accessible, and predictable across desktop and mobile devices.

When filters reflect how customers actually shop, large catalogues feel smaller, relevant products become easier to find, and customers can move from browsing to purchasing with far less effort.

PREVIOUS ARTICLE

How to Build the Ultimate eCommerce Store Finder

For an eCommerce retailer with multiple physical locations, a store finder can be one of the most commercially valuable parts of the website. Yet many retailers treat it as little more than a map. Enter your postcode. Find the nearest pin. Get an address. That solves one problem, but it misses a much larger opportunity. […]