Fix Your Category Page

Fix your category pages by following the best practices in eCommerce, user experience, and design. This checklist uses battle-tested tactics and is backed up by over 100,000 hours of research from leading research companies, such as Baymard Institute, CXL, Google and dozens of blogs.

Boost revenue per user, profitability, customer experience
The proven way

What do you get, once you improve your Category page?

By improving your category page, you help to push more people towards your product pages - and greatly increase the likelihood of people adding items to the cart and ending up purchasing them. You improve the site’s usability, customer experience, and bottom-line profit.


→  Category  →  Product  →  Cart  →  Checkout  →  Confirmation  →


Make sure to get the page architecture in shape

See the checklist below, and try not to miss the critical aspects of a great user experience. Testing and going down to industry specifics, helps to improve it even more!

Make sure all images are of high quality, and clean, not cluttered

The first impression matters a lot, keep the attention of users by offering them appealing, high-quality visuals, and clear messaging.

Present precise delivery times and pricing, without the user needing to scroll

Do you ship to my country? How much does it cost? When do I get my package? Example: Free EU shipping within 3 days, Free EU delivery from 59€.

Have the following sections covered

The site-wide pre-header

A great place where to introduce information about delivery, returns, and unique selling points! Make sure the Return policy is clear, visible, and friendly.

The site header with branding, auto-suggest search, support contacts, and main navigation

Take a look at the examples by Wunderfront. For mobile, it is essential to keep the search input open, navigation, and cart quickly accessible, and branding concise. Try also bottom navigation on mobile! Be thumb-friendly and boost conversions!

The breadcrumbs

Show the hierarchy-based breadcrumbs in category product lists at the very top

The minified hero campaign banner(s) below the header, if the promotions are relevant for the category

If the campaign is relevant to the category, meaning applies to the category itself or some items inside it, feature the banner on the category page to draw more attention to your promotion.

The clear and informative category title and description

An absolute must, show the category title, description, media (optional), and total count of products in the category.

The sort-by and filters section

The category page and filters are like bread and butter. Be sure to read and acknowledge the very details of sorting and filters described in their own guide.

The product listing (grid, or list)

The key here is to make sure your product "card/container" contains the following: product media (on desktop, show the secondary image on hover), product name, price (and discounted price if any, show savings too!), category belonging (if presented off the category page), size, color options, tags, price per unit if applicable, reviews rating and the count of reviews. Ideally, have add to wishlist, and add the item to cart too - if applicable (example: food, hygiene, cosmetics, repeatably purchased items, etc). Always provide comparison features for spec-driven products, such as electronics. Also, consider having a Quick View function for visually driven products!

The top brands (if you sell many of them)

Help people to dive right into their favorite brands and reach desired products faster. Remember, people might be brand advocates.

The pagination and load more

Present a simple pagination, showing the start of pages and the end of the pages, and enable users to choose a specific page to navigate to. As a more than good alternative, present a "Load More" option, and show the current scope, how many items are shown, and how many are loaded more. Also, show user's progress and always lead them back to their progress, while navigating back from the product page. Load more works best on mobile devices. If the user has already added an item to their cart, also show it on the product "card" on category pages, and elsewhere.

The recently viewed products

Help the returning visitors become visitors much faster, and also consider moving this section below the Hero campaign banners for returning users (on homepage)! This an amazing opportunity to take the user to the checkout!

The pre-footer: The bottom benefits

Visually and textually remind site-wide why shop with you. Keep it super short and have 3-5 benefits visualized and communicated.

The pre-footer: The payment options

Showcase different options people can use to pay, and bet big on buy now and pay later options. Make people trust you more, and help them get products faster and more conveniently.

The site footer with bottom navigation and trust marks

The site footer is like the air you breathe in, it has to exist. Showcase trust badges/marks, top navigation items, key categories, contact pages, FAQ, About us pages, social links - and all the terms and privacy pages. And do not forget the delivery information and return handling pages! You can also use the area to acquire leads and make people subscribe to your newsletter, but there are better ways.

The bonus checklist

Show additional product info on hover for the desktop experience

For example, on desktop devices, if a user hovers over the product card, showcase up to 3 key benefits of the products, as well as a supporting product image.

Help people to quickly identify brands by showing them on top of product titles or prominently in filters if the brand is highly valuable for the users

Consumers want comfort, happiness, and satisfaction in their lives, and they get it partly through the products they buy. Very often, banded clothes are marketed as better quality and more value for the dollar spent, with an added sense of prestige. And this is precisely what you need to show to the users in brand-driven cases.

Have an intermediary category page if you have a more complex category structure or a high volume of products

An intermediary category page is, in short, summing up the best-selling items in this category and also featuring subcategories and even brands. As an example, imagine you click on Women's Fashion. Now what should follow is that you see a page not with all the products but instead with a simple representation of all the categories in Women's Fashion and featured products and brands. You can extend the idea by allowing users to show by price or season.

Showcase/inject a "Why choose us" section after displaying 10-12 products on your category pages for new visitors, and continue the product listing after the section injection

This helps people who land straight on the category pages quickly get why your brand and shop are just so amazing for them.

The “please avoid” checklist

Avoid auto-rotating banners

It is a proven conversion killer and causes banner blindness. Please, avoid it.

Avoid too many ads and banners

Help people stay focused and lead their attention. Do not add banners for everything and for everybody. It is proven to work against sales.

Avoid poor page speed

One two three four five six .... Bye-bye. Speed equals money in your pocket. Remember that, keep your Google page speed index above 90 on desktop and above 70 on mobile.

Avoid poor design, bad use of colors, and low contrast

It has been proven with research, that every 1 USD you invest in design and user experience improvements brings back 100 USD on average ( Do not underestimate design, first impressions, and color psychology. Keep navigation and call to action of high contrast.

Avoid overpaying - use tools, themes, and plugins to make it happen! Go no-code or low-code!

There is the easy way and there is the hard way. Work smarter, not harder, unleash the power of software, and just buy affordable plugins, themes, or tools, to make it happen.

Avoid reinventing the wheel

Instead, use plugins, and ready-made software to cover these core guidelines.

Showing products only inside their packaging

In short, it can discourage people to enter your product page as they might not get what the product is.

Avoid infinite scroll and endless scrolling

An absolute show-stopper and a heavy-weight champion in poor usability and experience. Avoid it!

Avoid showing ultra-tall product images on mobile devices

They should not exceed half of the viewport, or screen, never in portrait mode. Keep this in mind for better usability.

Avoid subdivided product lists, do not separate them

A product listing should indicate products on a singular level, so don't create visually separated blocks on the category listing page.

Avoid alphabetical sorting

Ask yourself if an alphabetically sorted category page represents a personalized shopping experience, and who can it actually help?

Avoid showing more than 4-5 items in a row on desktop

The more products people need to horizontally view, the less focused they will be. Do not try to use all the space there is, better help users focus and keep it maximum of 4-5 items in a row.

Avoid multiple paths to the product, and Quick view function in some cases

The user should be able to access the product, just by tapping on the "product card", do not create many ways to enter the product, keep it simple!

Avoid showing out of stock and better show when it is back in stock

When the item is out of stock, show when you expect to have it back in stock. And do not fool users by showing the item is in stock on the category page and then showing it is actually not on the product page.

What next?

Fuel your eCommerce site with more growth.