How to Design Ecommerce Category Pages That Rank and Sell
Category pages are usually the most valuable search pages a shop has. They are usually built as a bare grid of products. That gap is the whole of this guide.
Why Category Pages Matter More Than Product Pages
Somebody searching for a type of thing lands on a category. Somebody searching for a specific item lands on a product. There are considerably more people in the first group, because most shoppers do not yet know which item they want.
Three consequences follow. Together they make category pages the best return available in a shop.
They receive more of the demand. Searches describing a kind of product outnumber searches naming a particular one, so the pages answering those searches carry more of the traffic.
They receive it earlier. A visitor arriving on a product page has already chosen. A visitor arriving on a category page has not, which means the page can influence what they choose. That is a commercial opportunity a product page no longer has.
There are far fewer of them. A shop with three thousand products might have sixty categories. Writing something genuinely useful for sixty pages is achievable. Doing it for three thousand is not, which is why effort spent here goes further than the same effort spent anywhere else in the catalogue.
Set against that, the typical category page is a grid and a heading. The reason is simple enough: a grid of products looks complete the moment it exists, so nobody notices it was never finished.
What A Category Page Has To Do At Once
The difficulty of designing these pages is not that the job is hard. It is that there are three jobs and they want different things.
Earn a position for a category term. Which needs words, context and something that distinguishes this page from the same grid on four competing shops.
Help somebody browse. Which needs products visible, filters that work and a layout that can be scanned quickly.
Get somebody into a product. Which needs each item in the grid to carry enough information to be worth clicking.
The first wants content near the top. The second and third want products near the top. That tension is the perennial argument about these pages. It is usually resolved by whoever shouts loudest rather than by design.
There is a second tension underneath it, which is more useful to think about. A category page serves two different visitors at once. One knows exactly what they want and needs the grid immediately. The other does not know how to choose and needs guidance before the grid means anything. Serving only the first produces a page that ranks poorly and helps nobody decide. Serving only the second produces a page that irritates everybody who already knew.
Good category design is the resolution of those tensions rather than a compromise between them, which is what the next four blocks are about.
Where The Content Goes
Four arrangements are common. Each costs something. Knowing what it costs is how the argument gets settled without anybody shouting.
Everything above the grid. Serves the category term and pushes the products off the screen entirely, particularly on a phone. Rarely the right answer. It is also the arrangement search led builders reach for by default.
Everything below the grid. Products first, content available underneath. Common, reasonable and it carries a risk worth naming: content nobody has any reason to reach is content written for machines, which tends to read that way.
A short introduction above, the substance below. The arrangement that works most often. It costs discipline, because the introduction has to stay short while every stakeholder wants a sentence in it.
Content in an expandable panel. Compact and acceptable where the panel is genuinely usable. The cost is that anything collapsed reads as something the shop would rather you did not read.
The test that decides all of this is not about position. The introduction exists for the visitor who does not know how to choose. If it helps somebody choose, it has earned its place at the top of the page. If it restates the category name in three different ways, no position will save it. Moving it below the grid is not a fix but a burial.
Filters And Faceted Navigation
Filters let a shopper narrow a list by size, colour, brand, price or anything else. They are unambiguously good for customers. They are also the single largest structural problem in ecommerce. It is worth understanding why before a build rather than afterwards.
The problem, described. Take a category of four hundred products with filters for size, colour, brand and price band. A shopper can combine those in an enormous number of ways, because combinations multiply rather than add. If each combination produces its own web address, a shop with a few dozen categories can generate a quantity of addresses that dwarfs its actual catalogue.
Why that harms a shop. Not through any penalty. Through waste and dilution. Attention that should go to real category pages is spent on near identical variations, most containing few products and some containing none. Several of your own pages end up competing for the same terms. And genuinely important pages receive less attention than they should because it went somewhere else.
What has to be decided at build time. Which filtered views deserve to exist as pages in their own right, because they match how people actually search. Which should work perfectly well for a shopper without becoming pages. And how everything else is handled so it never becomes a page at all.
That is a decision rather than a configuration. It needs somebody who understands both the catalogue and the demand, sitting down before anything is built. Retrofitting it means changing addresses on a live shop, which is the expensive outcome described in how web design affects ecommerce SEO.
Pagination And Loading More Products
A category with two hundred products cannot show them all at once. How the rest are reached is a design decision with consequences in two directions.
Numbered pages. Every product is reachable by following a link, which means anything can find them without pressing anything. It costs a shopper extra clicks and it feels dated to some designers, which is not a commercial argument.
A load more button. Comfortable for shoppers and it introduces a discoverability question, since products that only appear after a button is pressed may not be reachable by something that does not press buttons.
Infinite scrolling. The most comfortable on a phone and the most awkward otherwise. It has the same discoverability question, it makes the footer difficult to reach and it loses somebody's place when they view a product and come back.
How to choose. Two questions settle it. Do products beyond the first view need to be independently reachable, which for most shops is yes. And how many items can a phone load comfortably before the page becomes slow, which is a real constraint rather than a theoretical one.
The arrangement that satisfies both is well established: a shopper experience that loads more products smoothly, sitting on top of an underlying set of numbered pages that anything can follow. Naming that as the requirement is a design decision. How it is implemented belongs to whoever builds it.
Sorting And Defaults
The default order of a category page is the most consequential decision on it that nobody makes deliberately. Most shoppers never change the sort order, so whatever the page opens with is what the great majority will see.
What each default communicates. Newest first suggests a shop with turnover. It will also show products with no track record. Price low to high attracts price sensitive shoppers and anchors expectations at the bottom of your range. Price high to low rarely helps anybody. Best selling is self reinforcing, since the things shown most sell most, which is usually acceptable and occasionally traps a catalogue in its own past. A manually chosen order gives complete control and requires somebody to maintain it.
Why this is commercial rather than technical. The default determines what gets seen, what gets seen determines what sells, then what sells determines what the data recommends. It is a loop. The opening position of that loop was set by somebody choosing a dropdown value.
The point worth taking from this block is that most shops have never made this decision. The order is whatever the platform did when the category was created, which means the single most influential piece of merchandising in the shop was settled by a default setting that nobody has looked at since.
It is also among the cheapest things to change, plus one of the few worth revisiting seasonally.
Linking Between Categories
Most shops connect categories in exactly two directions and neglect the two that matter.
What is usually present. Downward, from a parent category into its children. And upward, through breadcrumbs. Both arrive with the theme and both work adequately.
What is usually absent. Sideways, between categories that sit alongside each other. And across, between categories that are related in a customer's mind while sitting in different parts of the structure.
The sideways gap is the one that costs money. A shopper who has landed in the wrong category has to travel up the structure and back down again, which on a phone is several deliberate actions performed by somebody who is not committed to you. Many of them do not.
The across gap is subtler and frequently more valuable, because customer logic does not follow a catalogue tree. Somebody buying garden furniture may want covers, which live under storage. Somebody buying a printer wants cartridges, which live under consumables. Those relationships exist in the customer's head and almost never in the navigation.
What good looks like is not a row of unlabelled thumbnails at the bottom of the page. It is related categories named in words, positioned where a shopper would want them, with an indication of why they are being suggested. A line explaining that people buying this category usually need that one is worth more than any number of automatically generated tiles.
Common Mistakes
Each of these is visible on shops we are asked to look at. Each has a specific cost.
A grid with no words. Nothing distinguishes the page from the same products on four other shops. Nothing helps somebody who has not decided.
A wall of text nobody reads. The overcorrection. Nine hundred words above a grid, written for a machine, doing nothing for anybody and pushing the products out of sight.
Uncontrolled filter pages. Covered in block four. The most expensive item on this list and the least visible, because everything appears to work perfectly.
Categories created for products that do not exist. A structure built optimistically, leaving empty categories that promise something the shop does not stock. An empty category is worse than a missing one, since it converts a search into a disappointment.
The same content repeated across every category. One paragraph with the category name substituted in, applied sixty times. It fails at every job simultaneously: it does not help a shopper choose, it does not distinguish the page from anything and it makes sixty pages that resemble each other.
The pattern across all five is that a category page was treated as a container rather than as a page. Ongoing improvement of these pages once a shop is live belongs to our ecommerce SEO guides. Everything above is a decision taken during the build.
Filters decided
before the build.
Which filtered views become pages, which stay useful without becoming pages and how categories connect to each other are settled before anybody designs a grid, because retrofitting them means changing addresses on a live shop.
What a build covers:
Ongoing management afterwards sits inside our fixed monthly fee. Build work is quoted per project.
Twenty guides.
One subject.
This page covers category pages. The rest of the series covers product pages, where conversion is lost, what a build costs and why the search ceiling is set during the build.
