Category Page UX: Filters, Sorting and Product Grids
In this article10 sections
Good category page UX helps a shopper move from "I need a sofa" to "this is the sofa" with as little effort as possible. That means filters that match how people choose, a sensible default order, product cards that show the right information at a glance, a layout that works with one thumb on a phone, and a way to see more products without losing their place. Category pages carry much of a store's browsing traffic, so small improvements here affect a large share of your visitors and often lift sales across the whole range.
Key takeaways
- Offer filters based on how customers choose, such as size, colour, price, material or compatibility, not on internal data fields.
- Show the most useful filters first and the number of matching products for each option.
- Default to an order that puts popular, in-stock products at the top.
- Design product cards that answer the first questions: what it is, what it costs, how it is rated and which options exist.
- Test the whole page on a phone; filters and grids often fail there first.
What shoppers do on category pages
Shoppers arrive on a category page from the menu, from search engines or from adverts. Most are not yet sure which product they want. They are comparing, narrowing down and looking for reasons to choose. A typical sequence looks like this:
- Scan the first few rows to judge the range and price level.
- Apply one or two filters to cut the list to something manageable.
- Change the sort order, often by price or popularity.
- Open a few products in turn, then come back to compare.
- Either choose, refine further or leave.
Every step can fail. If the first rows look irrelevant, they leave. If filters are missing or confusing, the list stays overwhelming. If coming back from a product resets the filters, they lose patience. Good category design supports each step, so the shopper keeps narrowing until they find something they want to buy.
Filters that match how people choose
Choose filters from the customer's point of view
Filters should reflect the questions shoppers ask when choosing. For clothing, that might be size, colour, fit and price. For laptops, screen size, memory and battery life. For furniture, dimensions, material and delivery time. Look at site search queries, customer service questions and competitor stores to find the attributes that matter.
Usability research from the Nielsen Norman Group explains the difference between simple filters and facets, and why facets that describe several product properties help shoppers narrow large ranges.
Show counts and hide dead ends
Show how many products match each option, and hide or disable options that would return nothing in the current selection. A shopper who ticks a filter and gets an empty page feels the store has wasted their time.
Order filters by usefulness
Put the most-used filters at the top, expanded, and less common ones lower down, collapsed. For long lists, such as brands, show the most popular options first, with a "show more" link and a search box.
Make applied filters obvious
Show selected filters as removable chips above the products, with a "clear all" option. Shoppers should always see why they are looking at the current list.
Keep product data consistent
Filters only work if product attributes are filled in accurately and consistently. A colour filter fails when half the products say "navy" and the other half "dark blue". Good filters start with good product data, so agree naming rules and check them whenever new products are added.
Sorting and the default order
Most shoppers never change the sort order, so the default matters enormously. A good default:
- Puts popular and well-reviewed products near the top.
- Keeps out-of-stock products lower down or hides them.
- Balances best sellers with new arrivals and seasonal items.
- Avoids filling the first rows with near-identical variants.
Review the default order regularly. A product that sold well last season may now be holding a top spot it no longer deserves, while a strong new arrival sits on page three. Many platforms let you combine automatic rules, such as recent sales and stock, with manual pins for products you want to promote.
Offer a small set of clear sort options: recommended, best selling, newest, price low to high and price high to low. Ratings can be useful too, if most products have reviews. Remember the sort choice when the shopper returns from a product page.
Product cards that answer the first questions
A product card is a small advert for the product page. It should give enough information to decide whether to click.
| Element | Why it matters |
|---|---|
| Clear image, same style across the range | Makes comparison easy |
| Product name that says what it is | Avoids codes and vague names |
| Price, including any sale price | The first filter in many shoppers' minds |
| Rating and number of reviews | Quick social proof |
| Available options, such as colour swatches | Shows the range without opening the page |
| Key differentiator, such as size or capacity | Separates similar products |
| Stock or delivery message where relevant | Sets expectations early |
Keep cards clean. Too many badges, labels and buttons make the grid noisy and harder to scan. A second image on hover can help on desktop; on phones, keep interaction simple.
Category page UX on mobile
Category pages often work well on desktop and poorly on phones. Common problems include filters hidden behind an unclear icon, filter panels that reload the page after every tap, and grids with tiny text.
- Visible filter and sort buttons at the top, kept in view as the shopper scrolls.
- A full-screen filter panel with large tap targets and a fixed button showing the number of results, such as "Show 48 products".
- Two products per row for most catalogues, with readable names and prices.
- Fast loading, with images sized for phones and lazy-loading below the first rows.
Our list of mobile UX mistakes covers more of the problems that hurt mobile browsing.
Pagination, infinite scroll and "load more"
Large categories need a way to show more products. Each approach has trade-offs:
- Pagination gives clear positions and works well with search engines, but adds clicks.
- Infinite scroll feels smooth, but can make it hard to reach the footer and to return to the same place after viewing a product.
- A "load more" button is a popular middle ground: shoppers control when more products appear, and the page can still have crawlable links for search engines.
Whatever you choose, preserve the shopper's position, filters and sort order when they come back from a product page. Losing their place is one of the most frustrating category page experiences. For the search side of pagination, see our guide to category page SEO.
Helping shoppers who are still unsure
Some shoppers do not know which filters to choose. Help them with:
- Short buying guidance at the top or bottom of the category.
- Subcategory links with images, such as "Corner sofas" or "Sofa beds".
- Comparison features for technical products.
- Highlighted collections, such as best sellers or staff picks.
Site search should work well from category pages too. Our guide to ecommerce site search explains how search and filters work together.
Common category page mistakes
When we review stores, the same category problems appear again and again. Each one is easy to fix once you see it:
- A banner that fills the first screen. Large promotional images push products below the fold, especially on phones. Keep banners slim, or move them into the grid as a single tile.
- Filters named after internal fields. Labels such as "Attribute set" or "Product type code" mean nothing to shoppers. Use plain words customers would say.
- Every variant as a separate product. Showing ten colours of the same shirt as ten cards crowds out the rest of the range. Show one card with colour swatches instead.
- Inconsistent images. Mixed backgrounds, angles and crops make products hard to compare. A consistent photography style makes the whole grid easier to scan.
- Prices that hide the real cost. "From" prices that apply only to a rare option, or prices without tax where shoppers expect it, create disappointment later.
- Losing the shopper's place. Returning from a product page to the top of an unfiltered list is one of the most common reasons shoppers give up.
- Slow filter updates. Filters that take seconds to respond feel broken. Fast responses keep people exploring.
Measuring how category pages perform
Category pages sit in the middle of the shopping journey, so measure how well they pass shoppers forward rather than only how many sales they "own".
- Click-through to product pages: the share of category visits that lead to at least one product view.
- Exit rate: a high rate on an important category suggests the range, layout or filters are not helping.
- Filter usage: which filters people use, which they ignore and which lead to empty results.
- Sort usage: if many shoppers immediately sort by price, your default order may not match what they want.
- Scroll depth: how far shoppers get before clicking or leaving.
- Mobile versus desktop: large differences point to mobile layout problems.
Pick one or two important categories, make a change, and compare these measures over a few weeks. Small, tested improvements to your busiest categories usually beat a full redesign done all at once.
Frequently asked questions
How many filters should a category have?
As many as shoppers genuinely use, shown in order of usefulness. Five to eight well-chosen filters often beat twenty, many of which nobody uses.
Should out-of-stock products appear in categories?
Usually lower down or hidden, unless they are coming back soon and you offer alerts. A first screen full of unavailable products is discouraging.
Is infinite scroll bad for SEO?
It can be if products are only reachable by scrolling. Combine it with crawlable pagination links so search engines can reach every product.
How do I know which filters to add?
Look at site search terms, customer questions and how shoppers use existing filters in analytics. The attributes people mention most are your strongest filter candidates.
Want to see where shoppers get stuck on your category pages? Ask us for a UX review, or see how our e-commerce design team builds category pages that help people choose.
Want an expert to look at your store?
Tell us what you are working on. A senior e-commerce consultant will reply within one working day with honest, practical advice. No obligation and no sales script.
- Reply within one working day
- Advice even if we are not the right fit
- Your details are never shared