A Category Page That Sells

The page nobody designs

Homepages get argued over and product pages get written carefully. The category page in between is generated by the platform, accepts whatever defaults it came with, and is rarely looked at again.

It is also where a large share of visitors form their impression, because browsing customers arrive at it, scan it, and decide whether this shop is worth continuing with.

A poor category page loses people who were interested and never reached a product.

Browsing is a different activity from searching

Somebody who knows exactly what they want uses search. Somebody who does not is browsing, and browsing is a process of elimination.

They are not reading each item. They are scanning for a reason to rule most of them out, and the page either supports that or obstructs it.

Which means the useful question is not whether the page looks good, but whether somebody can eliminate two thirds of the options in fifteen seconds.

Put the deciding information on the card

Most category pages show a photograph and a name, and require a click to learn anything else.

That forces the visitor to open six products and come back six times, which is slow, and on a phone it is slow enough that people stop.

Each card should carry what somebody needs to eliminate an option.

• Price, always, including where it varies.
• A photograph that shows the actual item.
• The deciding attribute: size, capacity, power, material.
• Stock or lead time, where it varies.
• A name that distinguishes it from its neighbours.

The third item is the one usually missing, and it differs by category. What eliminates an option for a customer buying paint is not what eliminates one for a customer buying a pump.

Hidden prices cost more than they protect

A category page without prices asks somebody to open every product to find out whether anything is in their range.

Most will not. They will assume it is expensive and leave, which is the outcome the omission was meant to prevent.

Where price genuinely varies, show a range or a from figure with an honest indication of what moves it. Where price depends on a quote, say so on the card rather than leaving a blank.

The one thing that does not work is silence, because a visitor reads silence as bad news.

The default sort is a decision

Whatever order the platform uses by default is what most visitors will see, and it is frequently the least useful arrangement available.

Newest first is right for a shop where novelty matters and wrong for one where it does not. Alphabetical is almost never what anybody wants.

A reasonable default for most small shops is popularity or best-selling, because it puts the items most people choose in front of somebody who does not yet know what they want.

Offer price sorting as an option, and check that it works, since sorting by price is one of the most used controls in any shop and one of the most frequently broken.

Filters, only where they earn it

Filtering is enormously useful above a certain range size and clutter below it.

With fifteen items, filters are unnecessary and the space is better spent on larger cards.

With a hundred and fifty, one or two filters on the attributes people actually use will change how the page performs.

The mistake is offering eight filters because the platform supports them. Every filter that returns no results, or that nobody uses, is a control taking up space and suggesting the shop is more complicated than it is.

Look at which attributes customers ask about on the phone. Those are the filters worth having, and usually there are two.

A worked example

A tool supplier had category pages showing a photograph and a product name in a four-column grid, with no prices and no specifications.

Their analytics showed people opening a product, returning to the category, opening another, and leaving after the third.

They added price, the single most important specification for each category, and a stock indicator to every card, and reduced to three columns so the cards were larger on a phone.

They also added a two-sentence introduction at the top of each category explaining what the category was for and who it suited.

Product page views per session fell, which looked like a decline, and orders rose by about a third.

People were opening fewer products because they could now eliminate the wrong ones without clicking, which was the entire point.

Write something at the top

Two or three sentences, not a wall of text.

What is in this category, who it suits, and the one thing worth knowing before choosing.

It helps the customer who is not certain they are in the right place, and it gives the page something to be found for, since a page of product names and prices contains almost no text.

Where longer explanation genuinely helps, put a short version at the top and the rest at the bottom, below the products, where it does not push the items off the screen.

Make the whole card tappable

A small mechanical point that matters more on a phone than anywhere else.

If only the product name is a link, people tapping the photograph get nothing, and tapping the photograph is what most people do.

The entire card should be a target, with enough space between cards that a mis-tap does not open the wrong item.

Check this on a real phone rather than by making a desktop window narrow, since the two behave differently.

The counter-case

Dense information cards are not right for every shop.

Where the purchase is aesthetic, and the photograph is the product, a sparse grid of large images with minimal text is correct, because the customer is deciding on appearance rather than eliminating on specification.

Fashion, art, and craft goods frequently work this way, and cluttering those cards with attributes interrupts the only decision being made.

The distinction is what the customer is doing. Eliminating on specification needs data on the card. Responding to how something looks needs the image given room. Most shops know which they are, and a few are genuinely both, in which case the categories themselves can differ.

Fixing yours

1. Open a category page on a phone.
2. Try to eliminate two thirds of the items without clicking.
3. Add price to every card.
4. Add the one attribute that decides that category.
5. Set a sensible default sort and test price sorting.
6. Cut filters nobody uses, keep the two that matter.
7. Write two sentences at the top.

Step two takes a minute and tells you immediately whether the page is doing its job.

Hiding prices is covered in a shop site that hides the price.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.