Category pages are an essential part of any ecommerce site. A well-designed category page will build engagement and drive conversions, encouraging visitors to click through to individual product pages and buy.

But at Growcode, we often find that category landing pages are underperforming on our clients’ sites.

Retailers tend to focus on optimizing checkout funnels, marginalizing their category pages in the process.

And this is a big mistake. Category pages are major contributors to your overall conversion rate.

The average US ecommerce conversion rate hovers at around 2.6%.

The average US ecommerce conversion rate hovers at around 2.6%. #ecommerce #EcommerceTips #EcommerceStats Click To Tweet

If you’re eager to boost the conversion rate for your ecommerce store, then I recommend you pay close attention to your category pages!
Conversion rate of online shoppers in the USConversion rates for this year hovered around 2.6%. Source.
In this article, we’re going to outline some simple optimization tips to get the most out of them, along with an array of practical category page examples.

What Is a Product Listing Category Page?

A product listing page or category page is a page that lists multiple products within a category, with each product represented by a photo, a price, and product name. These pages are usually linked to from the category navigation bar and include filter options.
Asos ecommerce category pageAn example of a category page from ASOS.

Why Are Product Listing (Category) Pages Important?

In terms of ecommerce site pages, category pages are among the most important. Customers with general buyer intent – who know they want a product but are unsure of the exact type or brand – use them to browse and evaluate items.

In terms of #ecommerce site pages, category pages are among the most important. Customers who know they want a product but are unsure of the exact type or brand - use them to browse and evaluate items. #EcommerceTips Click To Tweet

They also often act as important landing pages. If, for example, you’re promoting “new arrivals” in an email, visitors will land on a category landing page. Many search engine results – such as for general queries like “buy bikes” or “buy handbags” – are focused on category pages.

Category (Product Listing) Page Optimization Guide

Here’s a quick list of the questions you should ask to create the best experience on category pages so you can jump straight to your most urgent issue:

  1. Is the price for discounted products struck through and have you included the percentage of the discount?
  2. Do you use eye-catching colors (like bright red) for important elements like the sale price or the word “SALE”?
  3. Are product images visible above the fold and there is a clear, visible header with the category name?
  4. Are product pictures large enough (do you make the best use of space)?
  5. Are alternative product shots shown on hover?
  6. Have you included sub-category filters on your listing page?
  7. Can products be filtered by category-specific variables like size, color etc.?
  8. Do you have a comprehensive set of ascending/descending ranking options like price, popularity, relevance, and new arrivals?
  9. Do you include all the appropriate information?
  10. Do you show available sizes for categories like clothes?
  11. Do you show color options?
  12. Are you showing too many ads?
  13. Are unavailable products only shown towards the end of product page listings?

Ready to optimize? Let’s dive in.

1. Is the price for discounted products struck through and have you included the percentage of the discount?

Draw attention to discounts by striking through the old price and including it next to the new one. Also include the percentage of the discount, so that price reductions appear sizeable.
REI includes the difference between the previous price and the discounted one as a percentage, re-emphasizing the offer twice. Alongside the struck-through original one, REI includes the difference between the previous price and the discounted one as a percentage, re-emphasizing the offer twice.

2. Do you use eye-catching colors (like bright red) for important elements like the sale price or the word “SALE”?

Category pages can appear cluttered, so ensure that discounts stand out. Use eye-catching colors that aren’t overwhelmed by other elements on the page.
Highlighted sale prices with a red font on a product listing pageKohl’s highlight sale prices with a red font.

Want more insights like this?

Get weekly ecommerce tips, strategies and leading industry knowledge.
Delivered right into your inbox.

onI have read the privacy policy and I accept newsletter terms and conditions.

Please select this checkbox to continue

Woohoo! You’ve just signed up. Check your inbox to confirm the subscription.

3. Are product images visible above the fold and there is a clear, visible header with the category name?

Visitors use category pages to browse, so provide information that confirms they’re in the right place, like a category header. Also, make sure that products are already visible above the fold without the need to scroll down. You may try including best-selling products above the fold to reduce the bounce rate.
Sephora includes a category headline and showcases top-performing products above the fold. Sephora includes a category headline and showcases top-performing products above the fold. This might help reduce bounce rate and thus get you better positions in Google’s search results.

4. Are product pictures large enough (do you make the best use of space)?

Category pages are all about images. Ideally, you should provide the maximum number of images per row without sacrificing on quality and size. Are features clearly visible? Three to four images per row is a good category page best practice to follow (on mobile it’s two – find out how to design the best mobile product detail page).

Category pages are all about images. Ideally, you should provide the maximum number of images per row without sacrificing on quality and size. #ecommerce #optimization Click To Tweet
Category listing design with big, descriptive product photosUrban Outfitters shows large, detailed pictures of products. Product listing design is neat, not cluttered and four products per row are presented in a great way.

5. Are alternative product shots shown on hover?

Reduce friction by showing alternative product shots whenever a visitor hovers over an image. A potential customer may engage with a second image if they are not convinced by the first.

Asos shows a different silhouette of one product. So a potential customer may engage with a second image if they are not convinced by the first.

6. Have you included sub-category filters on your listing page?

Amazon includes this feature on all of their listing pages, whether it’s a category page or a search results page. It helps visitors that are browsing to narrow down their search.
Advanced products categories in Etsy storeIn this example, while looking for pillows we get more than 800.000 results! Such detailed categories help visitors that are browsing to narrow down their search.

7. Can products be filtered by category-specific variables like size, color etc.?

Many visitors will go to category pages to browse but with requirements for certain features like size, color, price, brand etc. Include these filters at the top of the page or in the sidebar.
Advanced filters on the Asos product listing pageASOS includes an array of filters on its category landing pages.

8. Do you have a comprehensive set of ascending/descending ranking options like price, popularity, relevance, and new arrivals?

Along with filters, it’s important to allow visitors to rank products by a number of variables, like price, relevance, new arrivals etc. Doing so builds engagement by adding variety to the browsing experience, while also catering to visitors that have feature requirements in mind but for whom filters are too specific.
Advanced filters, customers ratings, new arrivals on a product listing pageCrutchfield has an option to sort by a number of options, such as “Price: Low to High”.

9. Do you include all the appropriate information?

There are five pieces of information it’s absolutely essential to include on your listing page. At Growcode, we’ve found the conversion consequences of not including just one can be significant.

These pieces of information are:

  • Name
  • Photo
  • Price
  • Strike-out price
  • Badges (new, bestseller, sale etc.)

All the necessary information included under products on GAP product listingGap provides multiple pieces of information without cluttering the page.

10. Do you show available sizes for categories like clothes?

Telling visitors that a product is out-of-stock on the product page as opposed to the category page can result in them leaving the site without considering other options. If possible, include stock information beneath category page images.

Zalando shows available sizes just right on the product page listing so a user can check immediately if it’s possible for him to buy a particular product.

11. Do you show color options?

When including information about colors, or providing filter options, on the category page, ensure that you’re only showing images (small blocks of color) rather than text.
Available colors of clothes shown on Adidas online store product listingAdidas is spot on with its color options, showing small color squares. It adds to the overall ease of the category page experience.

12. Are you showing too many ads?

Generally speaking, less is more. You want the focus to be on the products themselves rather than other promotions, offers, related products etc.
Zappos on their product listing focuses on the products themselves rather than other promotions, offers, related products. Zappos wants you to buy shoes…nothing else. The product listing page layout is purely product-focused. Hint: take a look at how they listed selected (and popular) filters just above product list.

13. Are unavailable products only shown towards the end of product page listings? Or are they even not listed there?

There’s little point showcasing unavailable products at the top of the page. It is likely to ruin the product listing page user experience (UX) for many visitors and negatively impact conversions. Show unavailable products near the bottom of the page, if at all.
Available products and sizes in Nordstrom ecommerceNordstrom shows only available products of particular sizes.

Conclusion

At its heart, category page optimization is a simple process. It involves adding and tweaking small elements of your category page design and testing to see if the changes positively impact overall conversions.

The real key is to commit to consistent and long-term testing. This checklist is a fantastic starting point. It will help you overcome many of the common issues faced by online retailers in regards to product listing pages and boost your conversions. But ultimately, it’s up to you to drive improvements over the long-term.

BTW get the 115-Point Ecommerce Optimization Checklist and skyrocket your conversion rate!

Drawing on eight years of experience, we gathered all our top insights into one book: The Ecommerce Optimization Checklist of a 7+ Figure Online Store. If you want to increase the performance of all your pages – from the homepage to checkout, grab your copy here:
Ecommerce optimization checklist


Growcode Ecommerce Blog / Ecommerce Optimization / 13 Conversion-Centered Tips for Category (Product Listing) Page

Leave your comment