Ecommerce category pages: what shoppers need before they open a product

The same page is called a collection page on Shopify and a product list in research papers. This guide covers all of them, and works on any platform.

Say you sell backpacks. A shopper wants a waterproof pack of around 25 liters for commuting by bike. They land on your “Backpacks” page from a search.

They see eighty cards. Each has a grey photograph, a name like “Trail Pack 2”, and a price. There is no capacity, nothing about waterproofing, and no way to narrow the list except a sort by price. They open three products, find that one is 40 liters and another is not waterproof, and go back to a search results page where a competitor’s list shows the size on every card.

Nothing on your page was broken. The page simply asked the shopper to do the sorting that the shop could have done for them.

They scan and compare. Baymard Institute, which tests ecommerce sites with real shoppers, says it directly: users scan and compare products, so lists need enough visual and written information, and enough filtering, for them to evaluate options without opening each product page.

It is also a page many shops get wrong. In Baymard’s product list benchmark (more than 170 leading US and European sites, published August 2024 and updated September 2025), 58% of desktop sites and 78% of mobile sites performed at a “poor” to “mediocre” level. Your competitors’ pages are probably not great either, which makes a clear one worth the effort.

Baymard names five attributes shoppers use to scan a list: price, product title or type, a thumbnail, the average user rating with the number of ratings, and the product variations. It also reports that 50% of the sites in its benchmark did not display adequate list item attributes (published May 2023).

Beyond those five, Baymard says each category has its own attributes, such as dimensions, capacities, or what a product is suited for. Choosing them is the real work of this page, and the shop owner is the best person to do it. Ask: when a customer is choosing between two products in this category, what do they ask? Whatever the answer is should appear on the card.

Backpacks: capacity, waterproofing, laptop size.

Olive oil: size, origin, harvest.

Industrial pumps: flow rate, connection size, power.

Dresses: length, fabric, sizes in stock.

Three more details help.

More than one photo. Baymard’s benchmark found that 80% of sites did not provide three or more thumbnails in lists. A second view on hover or swipe lets a shopper check the back, the inside or the scale without leaving the page.

Variations combined. Baymard reports that 42% of sites do not combine the variations of a product into one list item, which fills the list with near duplicates and makes it hard to tell how many different products exist. Show one card for “Trail Pack 2” with color swatches, not six cards.

Only real ratings. Show the rating and the count when you have real reviews. A card with no reviews should show none, not a row of empty stars.

Filters are how a shopper cuts eighty products to six. Baymard lists five filter types it considers essential where they apply: price, user rating, color, size and brand. It adds that those five allow “the vast majority of users” to reach a subset that matches their interest. The benchmark found that around half of sites did not offer all five.

On top of those, every category needs its own filters, and these are the same attributes as on the cards. If a shopper can see “25 L” on a card, they should be able to filter by it. That works only if the attribute is entered for every product, in the same format. A catalog where one product says “25 L”, another says “25 liters” and a third has no capacity cannot be filtered. Settling this is part of the requirements for an ecommerce site, before the shop is built.

For sorting, Baymard names four types: price, user rating, best selling and newest. Its benchmark found that 69% of sites did not offer all four.

Two small habits remove confusion. Show which filters are applied, with a visible way to remove each one. And never leave a shopper on an empty result: say what to loosen, and offer a way back.

A category heading should name the contents plainly (“Waterproof backpacks”), and a short introduction should help someone choose between the main options. Keep it to a few sentences above the products, or below them if the products should come first. It helps shoppers and gives search engines a clear subject, though writing it to please search engines alone produces text no one reads.

If the category is broad, a shopper who is unsure what to buy needs guidance before a list of two hundred items. Baymard describes an “intermediary category page”: a landing page showing thumbnails and descriptions of subcategories, guides and related content. It says this helps shoppers who are “as yet unclear about what product to buy”. Baymard reports 13% of sites in its benchmark did not provide one.

Most category pages are designed on a desktop and then squeezed. On a phone, filters usually sit behind a button, so check that the button is easy to find and that the applied filters are visible after closing it. Cards should show the same deciding facts, at a size that reads without zooming. Our guide to mobile design decisions covers the wider questions.

A page of two hundred products needs a plan. Pagination, a “load more” button and infinite scroll all work for shoppers. Google’s documentation recommends giving each page its own address, for example with a ?page=n parameter, and linking pages together with normal <a href> links so search engines can find the later products. Infinite scroll often depends on scripts alone, which makes that harder, so ask whoever builds the shop how it will handle it. The search side of this is covered in our ecommerce SEO checklist.

Saltmarsh Larder is an invented specialty food shop we designed to show how we work. It is an original concept, not a client project, and it has no sales. One of its three decisions concerns this page: every product card shows its size, and every product page opens on its origin, because origin is why a cook buys from a specialist and size is the comparison they would otherwise make by clicking back and forth. For a fuller shop, see our original concept Larchmark Outfitters.

It will not rescue products that are priced above the market or poorly photographed. It will not help if the page never ranks or never gets traffic. And it cannot compensate for a product page that fails to answer the next question, which our guide to ecommerce product pages covers. Improvements to a list help shoppers choose faster. They do not choose for them.

If your collection pages lose shoppers, our ecommerce website service describes how we plan categories, attributes and filters before design. Next, read why shoppers leave later in the journey in checkout and abandoned carts.

When you want to talk about your own shop, you can discuss your project. More guides are in the Learn library.

1. Baymard Institute, Product List UX Best Practices 2025 (benchmark results: poor to mediocre share, thumbnails, filter and sorting types, variations; essential filter and sorting types; scanning and comparing): https://baymard.com/blog/current-state-product-list-and-filtering

2. Baymard Institute, Product Listing UX: What Information to Display in Product Listings (50% Get It Wrong): https://baymard.com/blog/product-listing-information

3. Baymard Institute, Consider Providing “Intermediary Category Pages” (13% Don’t): https://baymard.com/blog/ecommerce-sub-category-pages

4. Google Search Central, Pagination, incremental page loading and their impact on Google Search: https://developers.google.com/search/docs/specialty/ecommerce/pagination-and-incremental-page-loading

5. Google Search Central, Help Google understand your ecommerce site structure: https://developers.google.com/search/docs/specialty/ecommerce/help-google-understand-your-ecommerce-site-structure