[How-to] Guide To Building A Top eCommerce Category Page For Conversions

The primary goal of a category page is to help visitors find the right product with filters and sorting options that narrow down a usually long list of products.

The category page is the physical store equivalent of your visitors inspecting products that belong to a specific aisle. It’s no other than a bridge between your homepage and your product pages.

But in the digital world, the category page is the step where visitors are making up their minds if the products they see are worth being inspected more in detail.

If a product seems relevant, then they will go visit its product page.

If not, visitors will keep browsing, refine their choice, or downright leave for another category page.

Which is why a category page is so important for product discovery and requires some specific features to empower visitors to quickly assess products and refine the selection of product displayed if needed, namely:

1. Product cards – to display essential information about each product
2. Filtering and sorting options – to narrow down a potentially huge initial product range

The implementation of these core category page features is paramount and can “make or break” the whole product discovery process.

Of course, that’s only the visible tip of the iceberg. Let’s dive in (pun intended) and see how you can build a “best-in-class” eCommerce category page.

What to expect in this article

1. Use a list view for technical products and a grid view for visual products
2. Always indicate the number of products at the top of the page
3. Add breadcrumbs at the top of your product listing pages
4. Use a ‘Load more’ button, not pagination or ‘infinite scrolling’
5. Display a reasonable amount of products by default
6. Always include the most essential information on product cards
7. Use the hover (on Desktop) and active (on Mobile) states to show a different product angle
8. Update the product card information based on the filters visitors are using
9. Highlight differently product cards of products that are currently in the visitor’s cart
10. How to implement filters
11. How to implement sorting options
12. Consider making filters and sorting options sticky

Use a list view for technical products and a grid view for visual products

The first thing to consider when designing a product listing page is the layout you are going to use to display your products effectively so that visitors can easily skim through them, yet have just enough information about them.

You have 2 options to choose from: use a list view or use a grid view. Don’t worry too much about it though, we will see together that each of these views has their own use cases.

The list view

Using a list view on your category page (also called product listing page) is better suited for technical products as they require to display more information than visual products.

Since there can be many technical products to choose from on a product listing page, having some important information about the product before having to investigate the product page is crucial. Indeed, you wouldn’t want to lose your time clicking back and forth on each product page to see the specifics you are interested in.

If a visitor wants to buy a new computer, he will certainly consider the screen size, the RAM, the processor, how much storage it has and so on. The way the computer looks matters too, but a mere picture will surely not convey enough information to make an informed buying decision.

By conveying that “essential” information straight on the category page, visitors can quickly analyze and compare products without going down the rabbit hole, which would be reading a product page, memorizing its content, moving to another product page, memorizing its content while simultaneously comparing with the previous product… You can see it’s not exactly the definition of efficient product exploration.

What you can start doing now:

Make a list of all the product information you think would be beneficial to inform visitors of your products. Select each piece of information carefully as we want it to be scalable, which means that each product card should have the same information types displayed. Of course, the information for each row can and will surely differ but stick to the same type of information (e.g. 1st row: Stock/Out of stock, 2nd row: Shipping: (how many days), 3rd row: reviews, 4th row: screen size, 5th: RAM etc…).

The grid view

On the other hand, using a grid view is ideal for visual products as this view emphasizes product thumbnails, which is vital since visual products are mainly judged on how they look. Some information needs to be displayed under the product thumbnail too (we will see which ones in this article) but the visual aspect of the product is here more important.

While you can only show a single product per row with a list view, a grid view allows you to display a lot more products per row. It will mostly depend on the visitor’s screen size but we recommend showing at least 2 products per row (even on Mobile) and up to 4 or 5 on Desktop screens.

The more products you can fit in a row, the more of an overview of the product selection you can give to your visitors on the product listing page. Nonetheless, fitting many products in a row doesn’t mean sacrificing the size of your product thumbnail. If they are too small and the products are difficult to see it would simply defeat the whole purpose of a category page.

You need to find a balance between the product thumbnail size and how many products you are going to fit per row.

What you can start doing now:

Fit at least 2 products per row on Mobile and 3 products per row on Desktop. Make sure your product thumbnails are big enough so that the products can be seen comfortably (meaning without having to squint too hard to see details on the picture).´

Always indicate the number of products at the top of the page

Landing on a category page without knowing how many products there are can be daunting for your visitors. If the selection of products seems endless as too many options are presented it can discourage them to explore the content of the page. Which we (obviously) want to avoid.

If instead, you indicate straight away how many products there are at the top of the category page then your visitors will be able to precisely quantify if the page is worth exploring.

Indeed, if you saw “4,506 products found” at the top of a product listing page you’d surely use the filters and sorting options at your disposal to narrow down this huge list of products. Also, visitors would know instantly if they should maybe visit another category or subcategory page. Too many results signify we are at the top of the category hierarchy, while a limited amount of results usually means we either are at the bottom of the category hierarchy or used several filters.

What you can start doing now:

Simply indicate at the top of your category page how many products they are to be seen. Visitors will know quickly whether they are in the right place or if they need to refine their product exploration.

Add breadcrumbs

Breadcrumbs help visitors locate themselves on the website and see how deep they are in the category hierarchy.

If there aren’t any breadcrumbs on the product listing page then your visitors will be unable to know where they are in the category hierarchy and move up or down that same hierarchy.

More than just letting visitors know where they are, breadcrumbs are also clickable. Which is very practical for people who want to quickly navigate to parent or child categories.

It becomes all the more relevant to add breadcrumbs on the Mobile version of your category page as the limited screen size makes it harder to have an overview of where we are located on the website hierarchy and move to another category.

What you can start doing now:

Implement breadcrumbs on all of your category pages to:

• Inform your visitors where they are on your website
• Let them access parent and child categories in a single click

Also, make sure your breadcrumbs are visible enough. Breadcrumbs play an important role in navigation and having them in font size 10 won’t help much. Give them the attention they deserve and your site organization will become a lot clearer for your visitors.

Use a ‘Load more’ button, no pagination or ‘infinite scrolling’

On eCommerce websites, there are generally three ways to see more products on the category page:

1. Clicking on a pagination button to reach another page full of products.
2. Have the products displayed indefinitely through the “infinite scrolling” method, which will automatically load more products as we reach the bottom of the product listing page.
3. Have a ‘Load more’ button that visitors can click to reveal more products of the category page they are exploring.

The implementation we recommend for your product listing page is the ‘Load more’ button as it helps visitors evaluate how many products they have already seen, how many more they can see while being able to compare products without having to click to another page. Your visitors also have full control over the number of products they want to see.

The main pitfall of a pagination system is that visitors won’t generally be inclined to explore past the first page as loading a whole new page of products is quite slow. Comparing products across different pages within the same category also becomes incredibly difficult.

When it comes to ‘infinite scrolling’ the main problem is that products will load indefinitely as visitors scroll down. Visitors can’t keep track of the amount of product they have already seen and are quickly overwhelmed by the sheer amount of product displayed.

What you can start doing now

Add a ‘Load more’ button on your category pages as it gives more control to your visitors and makes their lives easier comparing products on the same page. When it comes to its implementation you should clearly indicate how many products have been seen so far and how many more products will show if they click the ‘Load more’ button.

Display a reasonable amount of products by default

The number of products you will show on a product listing page will depend on the industry you are in as well as the layout you are using (grid or list view).

A rule of thumb is to show enough to give a good overview of what the category has, but not too much either as it could overwhelm visitors. If you show too many products at once then comparing them won’t be simple, but if you show too little then your visitors would have to repeatedly use the ‘load more’ button which slows down the product exploration process.

What you can start doing now:

Finding the right amount of products to display on Desktop and on Mobile is all about balance. There aren’t any definitive rules but a good starting point is to display at least 30 products on Desktop and at least 10 on Mobile as the viewport is limited and therefore requires more scrolling. Also, it would help if you experimented as using a list or grid view can alter these rough numbers.

Always include the most essential information on product cards

In a grid view system a product card is usually made up of 2 elements:

1. A product thumbnail, also known as the product image.
2. A product information box that sits just below the image with information such as the price, a (very) short description and reviews.

The product information shown on the product card is what will help visitors quickly assess products and decide if it’s worth visiting their respective product pages.

Among all the potential information items that could be displayed on a product card, some appear very useful:

• The product name
• The price (and ‘price per unit’ if products are sold in various quantities)
• The number of reviews as well as the overall rating
• Color variations (using dynamic clickable swatches)
• The expected delivery date
• Product availability (‘In stock’ and ‘Only [number] remaining/left’ formats)

Keep in mind that product cards won’t generally be large enough to fit all of these information pieces listed above, except if you are using a list view system, so you need to carefully evaluate what information should be displayed on the product card.

Moreover, if a single product thumbnail displays several products (in a pack, or with accessories included) then it should be extremely clear what is included in this pack from reading the product name and how much it will cost in total.

Another consideration is that the information type displayed on product cards from the same category must be similar, otherwise visitors won’t be able to compare ‘apples to apples’. For example, ‘Men’s shoes’ product cards should have the same information, and so should ‘Computer Hardware’ product cards. But it doesn’t mean ‘Men’s shoes’ and ‘Computer Hardware’ should have similar product cards (hint: they shouldn’t).

Finally, consider using legitimate scarcity and urgency – as Robert Cialdini theorized about – so visitors would be even more inclined to buy before the product, or the promotion tied with it, run out.

What you can start doing now:

Ensure consistent product information is displayed across products from the same category. At a minimum, you should have the product name, price, reviews, and color variations on every product card of a given product listing page.

If you are selling technical products and are using a list view then you must decide beforehand what general product information and product characteristics (discussed above in the first guideline of this article in the ‘List view’ section) are going to be displayed on product cards.

Spice up your product cards with distinctive labels such as ‘Only [number] left!’, ‘Staff pick’, ‘Popular/Hot’ or ‘Holiday Special’. Playing with ‘FOMO’ (Fear Of Missing Out) will help you generate more sales on specific items as no one likes missing a good deal.

Use the hover (on Desktop) and active (on Mobile) states to show a different product angle

As visitors are still evaluating products shown on the product listing page, you should take advantage of the hover state on Desktop to

1. Highlight your product under another angle
2. Possibly display additional information or elements on the product card

For example, you could reveal a few more product features that originally couldn’t be shown because of a lack of space on the product card such as color variations or shipping information. Also, an ‘Add to Cart’ button could appear when the product card hovers so that visitors wouldn’t have to go to the product page to do it. However, the latter point will mostly work with low-priced products, as visitors would still want to read a product page before buying a brand new iPhone for example.

By showing a product plainly and in-context, your visitors will be able to assess a product straight from the product listing page without visiting the product page. It saves them time and offers an overall better navigation experience.

What you can start doing now:

Ask a developer to help you support the hover and active states on your product listing page in a way that they focus on a particular product card will show an alternative view of the product. While it’s hard to implement on Mobile, it is achievable on Desktop and will help you show your products under a different light.

Update the product card information based on the filters visitors are using

Let’s imagine one of your visitors is using the ‘Red’ color filter in the ‘Dress’ category.

In this particular case what you should do is making sure product cards are updated to only show red dresses when the filter is applied. Dresses that are only available in red won’t have to change but dresses that are available in several colors and red being one of that color should be updated so that the product thumbnail shows the red variation of that dress.

Of course, how product thumbnails will be updated will naturally depend on the filters selected. But the more relevant the thumbnails are to the visitor’s query the more likely he/she is to explore products in the list.

What you can start doing now:

Match product thumbnails with the filters used by your visitors.

Highlight differently product cards of products that are currently in the visitor’s cart

If visitors keep browsing other products on the category page after adding one (or more) into their cart they might not remember which one was added. If they do remember what product was added but see the product card isn’t any different they could wrongfully assume the product hasn’t been added to their cart.

A way to clear any doubts is to simply highlight the product card with an overlay or a label reading ‘Added to Cart’, preferably in green and a checkmark.

It will help visitors remember which products on the product listing page are already in their cart and prevent them from revisiting the product pages unnecessarily.

What you can start doing now:

Update the product cards of items added to your visitors’ cart. It won’t affect your revenue but will make your category page more usable. Consider it a ‘nice-to-have’ feature that enhances the user experience.

How to implement filters

Filters are an integral part of a category page as they help visitors refine a potentially large amount of product down to a handful of them. Also, filters should be varied to accommodate many different research methods:

• By price
• By color
• By size
• By ‘New arrivals’
• By ‘Promotions’

And the list can go on and on depending on what you are selling on your website.

Offering many alternative filters will guide your visitors efficiently to a reduced number of products but there are a few rules to take into consideration on how to implement them.

Summarize all the filters currently applied at the top of the product listing page

An issue we see often on eCommerce category pages is the lack of a box that sums up what filters are currently applied. While it’s not too problematic to remember what filters have been selected when visitors are on small product catalogs, remembering everything past 5 applied filters can be daunting. By adding a dedicated box for applied filters visitors can add or reverse filters easily (without having to navigate to each individual filter in a sidebar for example).

Always display the total number of products available for each filter

For the same reason, visitors want to assess if a category is worth visiting by knowing how many products there are in it (see guideline 2. above in the article), visitors also want to know to which extent applying filters will narrow down the product selection. This is why you should ideally indicate between parentheses and next to each filter how many products belong to it between parentheses.

What’s more, depending on which filters have been already applied the number of products per filter (the one between parentheses) should automatically be updated.

How to implement sorting options

Unlike filters, sorting options do not alter the number of products that are going to be shown on a product listing page but the order in which they are going to appear.

People find sorting options useful as they help to judge products based on a single most important criterion in the visitor’s eye. In that sense, sorting options are complementary to filters to find the right product quicker.

Generally speaking, there are 3 elements to get right when implementing sorting options on your category page.

Use a dropdown at the top of the page to help visitors sort products

This one might look a little obvious but instead of using several links or horizontal tabs to show the different sorting options, show them in a dropdown. You could also experiment with the sorting option shown by default (for example, from most expensive to least expensive), analyzing which one increases your revenue the most.

What you can start doing now:

Insert a sorting dropdown on the top right-hand side of your category page, that’s where people are used to seeing it.

If relevant then implement more sorting options to the dropdown, based on important features found in products in a specific category

Visitors will usually be able to sort products by price, alphabetical order, or recency of release. It will make their lives easier if they can also sort by ascending/descending order of some products’ features that are specific to a particular category.

For example, if you are a fitness shop selling a variety of proteins your sorting dropdown could be enhanced with a specific sorting option to filter products based on the amount of protein they have (from ‘Low in protein’ to ‘High in protein’).

The main problem you might be facing is to adapt the sorting options to each product category you have, as being able to sort the protein amount would be of no use in the ‘Vitamins’ product category.

What you can start doing now:

At a minimum, visitors should be allowed to sort products in any category based on their price (Low to high and high to low), their recency (from the oldest to the newest and vice versa), customer ratings (1*, 2*, 3*, 4*, 5*) and best selling products.

Once you have these sorting options sorted out you can then go the extra mile and think about adding additional sorting options depending on the product category. Don’t overdo it though, as filters are also here to complement sorting options.

If visitors sort by ‘customer ratings’, then products with the most ratings that should appear first

Positive customer ratings are a clear sign of approval that visitors trust when examining different products. Potential customers won’t only look for positive reviews but ideally for many of them. The more reviews there are the better.

On a product listing page some products will have a higher overall grade but significantly fewer ratings than the most popular ones.

However, since visitors will trust products with many ratings a lot more than products with few, even if the overall grade is better, it’s preferable to show them first on the product listing page.

What you can start doing now:

You’ll need to ask a developer to tweak your sorting system so that it gives a higher coefficient to product exceeding a certain amount of reviews (for example 50 reviews) over the overall rating in absolute number.

The objective is to have products with a lot of customer reviews appear first on the category page, even if the overall rating is lower than a product having 2 ratings but a score of 5/5.

Consider making filters and sorting options sticky

In order to assist your visitors as they scroll down the product listing page one possible implementation that we have seen working well (especially on Mobile) is to make the filter and sorting options sticky at the top of the page so they are always in sight.

It also means people won’t have to scroll back up to access them, which is practical when the product list is quite vast.

If your filter options are on a left sidebar on Desktop, you can still consider making it sticky, but it will prevent you from showing an additional column of products.

Here the choice is yours, a sticky sidebar or a sticky bar at the top can both work equally well on Desktop.

Conclusion  

Your category page is critical to conversions as this is where visitors will explore your products.

At that stage, they have shown interest in at least one of your product categories hoping to find the product they need. As we saw, depending on what product you are selling the layout of your product listing page should change: a list view for technical products and a grid view for visual products.

Moreover, to empower your visitors you need to convey as much information as possible on each product card so they can compare them ‘apples to apples’. On top of that, you can and should enhance their browsing experience using the hover and active states to reveal additional product information or features.

The structure of your category page must let them know how many products there are, how many more are available (using a ‘Load more’ button) and where they are in the site hierarchy (breadcrumbs). Filtering and sorting options must be implemented a certain way In order to perfect the implementation of your product listing pages.

If you follow carefully every step listed above, your potential customers will have a much easier time navigating your site and seamlessly reach product pages, which after all is where transactions are initiated.

Now, it’s your turn to see where you are missing out and which areas of your category page can be improved based on these 12 guidelines.

Any questions or comments regarding the points highlighted above?