Skip to content

Category page

| Article: 3 min read | Store pages

A category page is a page of an online store that gathers the products of one group (for example, "Sneakers" or "Refrigerators") and helps the shopper get to the right one. It is often confused with a product listing page: a category is an intermediate step with a description and subcategories, while a listing is the products themselves with filters.

In plain words

Shoppers rarely land straight on a product page. First they enter a section, see what is there and narrow down their choice. How clear this page is determines whether they reach the product page.

Nielsen Norman Group describes two models (NN/g):

  • Traditional category: an intermediate page with a description, a subcategory menu and promos. It suits complex products that need to be understood first (smartwatches, sports equipment) and large catalogs with many subcategories.
  • Hybrid: a product list with filters right away; a short description, subcategories or promos sit on the listing itself.

NN/g researchers also noticed that many sites are dropping separate category pages and merging them with the listing to cut the number of clicks (NN/g).

What should be on the page

According to NN/g (NN/g):

  • Subcategories separate from filters, usually above the list. This helps narrow the choice without overloading the shopper.
  • The minimum on a listing card: a short name with meaningful attributes, large photos that show the differences, signs of other colors or variants, the price.
  • Optionally: rating, "new" and "sale" labels, availability (for example, sizes in stock), quick view, a second photo on hover.
  • Clear category names in the main menu instead of a single "Catalog" item.
  • Hierarchy: a product or subcategory can sit in several sections, so the shopper finds it where they look.

Search should not lead to a promotional category: according to NN/g, when a person types a brand name, they want to see products (NN/g).

Long lists: pages or infinite scroll

NN/g advises choosing by catalog size (NN/g):

  • pagination for very large catalogs;
  • infinite loading for small ones (around 40 products per page), provided the filters are good;
  • a "Show more" button as a compromise: the site footer with delivery terms stays reachable.

Show the total number of products and how many are already open ("Showing 40 of 333"), and return the shopper to the same place in the list after they press "Back".

How different sources see it

Baymard evaluated product lists on 170+ sites: 58% of desktop and 78% of mobile sites score "mediocre" or worse. 42% of sites don't merge product variations (colors) into one list item (Baymard). This matches NN/g's advice to keep the variants of one product in one entry (NN/g). More about filters: catalog filters.

Common mistakes

  • A category with just a banner and no subcategories.
  • Photos that don't show the difference between products.
  • Every color as a separate product in the list.
  • Infinite scroll with no footer and no counter.
  • Losing the place in the list after returning from a product page.

FAQ

How is a category page different from a product listing page? A category is an intermediate page with a description and subcategories; a listing is the products themselves with filters and sorting. Many sites combine them.

Does a category page need text? NN/g recommends a brief description that can be skipped, not one that blocks the products (NN/g).

Pagination or infinite scroll? It depends on the number of products. Pagination for large catalogs; "Show more" loading or infinite scroll for small ones.

Sources

Want to check this on your store?

CRO / Conversion optimization

We find where the store loses buyers and test the changes that raise conversion.

About the service →

Share

Related

  • Product photos, video and AI generation

    | Article: 3 min read

    A product photo is the main way to show a shopper something they can't hold in their hands. AI generation helps create a background, an angle or an illustration, but it comes with clear rules: in Google Merchant Center such images must be labeled, and the EU…

  • Trust signals

    | Article: 3 min read

    Trust signals are elements of a site that help a shopper believe the store is real, honest and safe to pay: reviews, contacts, delivery and return terms, visual signs of protection on the card form, familiar payment methods.

  • Free shipping threshold

    | Article: 4 min read

    A free shipping threshold is a rule: shipping is free if the order total is at least a set amount (for example, from 1,500 UAH). For the store it is a way to raise the average order value, for the shopper an incentive to add one more item.

  • Online store catalog structure

    | Article: 6 min read

    Catalog structure is how products are arranged into categories, subcategories, filters and page URLs. It answers two questions: can a customer find what they need in a few clicks, and does a search engine understand which pages matter.