Tags: ux commerce concept

Category Page Design

Date: 2026-08-17


The page where most retail decisions are actually made. It handles more traffic than any individual product page, it’s the main SEO landing surface, and its default sort order shapes product mix more than any merchandising decision.


A category page presents a filtered set of products with the tools to narrow, sort and compare them. It’s simultaneously a navigation surface, a merchandising surface and a landing page.

The three jobs, which conflict

NAVIGATION      help them narrow to the
                right few
                → filters prominent, fast

MERCHANDISING   show what you want to sell
                → curated order, promoted
                  items

LANDING PAGE    rank and convert search
                traffic
                → content, relevance,
                  internal links

These compete for the same space. A page optimised purely for SEO buries the products; one optimised purely for browsing has no content to rank with. The resolution is usually: products first, supporting content below the fold.

The default sort is the biggest decision

PRICE ASCENDING     anchors everyone on the
                    cheapest, depresses mix
                    permanently — Anchoring

BEST SELLING        social proof, and
                    self-reinforcing
                    winners keep winning

RELEVANCE           needs a definition; often
                    means "whatever the
                    platform does"

NEWEST              only right for fashion
                    or seasonal ranges

CURATED             a merchandiser's order
                    — best where the range
                      is small

Price-ascending is the default on a surprising number of sites and almost nobody chose it. It’s a pricing decision made by a configuration screen — Basket Composition.

Best-selling is the strongest general default, with the caveat that it entrenches existing winners and buries new products, so new lines need a route in.

What each product card needs

ESSENTIAL
  image — the primary decision input
  name
  price, including any "from"
  availability

USUALLY WORTH IT
  rating + review count
    — Social Proof
  a key differentiator
    ("for sensitive skin")
  variant availability (sizes/colours)

RARELY WORTH IT
  full description
  multiple badges
  hover interactions on touch

Card density is a real trade. More per row means more options visible and less information each; fewer means richer cards and more scrolling. Mobile usually wants two columns, not one — one column makes comparison impossible and the page interminable.

Pagination, infinite scroll, or load more

PAGINATION       + shareable, crawlable,
                   a sense of extent
                 − interrupts browsing

INFINITE SCROLL  + fluid browsing
                 − no footer access
                 − position lost on back
                 − crawlers see page 1 only
                 − no sense of how much
                   there is

LOAD MORE        + fluid, keeps the footer
                 + position manageable
                 − still needs crawlable
                   pagination underneath

“Load more” with real paginated URLs underneath is the pragmatic answer — the interaction people prefer, with the crawlable structure SEO needs.

The back-button problem is the one that costs conversions. A visitor who opens a product, returns, and lands at the top of an unrestored list will usually leave rather than scroll again.

Content for search traffic

Category pages are typically the highest-value SEO landing pages, and the usual implementation harms the browsing experience:

BAD    600 words of keyword text above
       the products
GOOD   a short intro (1–2 sentences),
       products, then supporting content
       and links below

Nobody scrolls past text to reach products, and search engines are not requiring it to be first — Search Engine Optimisation.

Where it goes wrong

  • Out-of-stock items ranked normally. A page of unavailable products is a dead end — Stockouts and Availability
  • Filters hidden on mobile behind an unlabelled icon
  • No indication of set size. “Showing 24 of 312” is orientation
  • Inconsistent card heights from variable-length names, producing a ragged grid that’s hard to scan
  • The back button not restoring position, which is the single most common serious defect on category pages
  • Sort and filter resetting on navigation

Measuring it

  • Product click rate — from category to product
  • Scroll depth — is the range being seen at all
  • Filter and sort usage — Faceted Filtering
  • Exit rate — high, with high dwell, means they couldn’t decide — Choice Overload
  • Contribution per session — not conversion, because sort order changes mix

Judge sort-order changes on contribution per session, because a sort that surfaces cheaper products will raise conversion and lower margin — Contribution Margin.