SessionCam News, Views and Updates

SessionCam Insights: Recommendations for product listing pages

SessionCam Insights: Recommendations For Product Listing Pages

SessionCam Insights: Recommendations for product listing pages

Optimizing product listing pages is a challenge for digital teams working on e-commerce websites.

From the data we collect, we know that these types of pages prove to be a regular point of struggle for many website visitors. 

Using our unique Customer Struggle Score metric, which automatically detects and measures user struggle on a scale of 0 (no struggle) to 5 (high struggle), we see an average score of 2.7 for product listing pages.  

Such a high score means there are great opportunities to improve. Reducing struggle will improve user experience as well as conversion.

To help you do this, we wanted to share our recommendations and tips for optimizing product listing pages.

Show products above the fold

Displaying products above the fold lets visitors see them and encourages them to scroll down to explore more.

Websites that do show products above the fold on their listing pages achieve an average scroll depth of 82%. This compares with an average scroll depth of just 72% for websites that don’t.

In terms of layout, on a desktop, the most popular and successful approach to use is a 3 – 4 column design.

4-column product listing on desktop.
A great example of a 4-column desktop design for a product listing page.

On mobile, it is a 1 – 2 column approach. These design choices keep more products visible above the fold.

2-column product listing page on mobile.
A good example of a 2-column product listing for a mobile website.

Displaying more products

As customers scroll down the listing page, it’s important to consider how you will show them more products when they get to the bottom. 

Based on our data, our advice is that the best approach to use is to progressively introduce additional products to the page or use a “load more” button. 

Load more products example image.

This generates much less customer struggle than using a “next page” approach and lets the customer remain on the same page without having to reload.

An extra tip here is to provide an easy mechanic for letting visitors click back to the top of the page as this reduces struggle too.

Call to Actions (CTAs) within page

Adding a “Buy Now” or “Quick View” CTA on a product listing page is a simple but very effective feature to include. 

It allows visitors to look more closely at the product and easily add it to their shopping cart.

Often this can be implemented in a very subtle way such as a simple icon. Or, perhaps even shown when the visitor hovers over the product block. 

Argos product listing page showing a CTA.
An “Add to Trolley” CTA from a product listing page on the Argos website.

We recommend doing this as it makes a massive difference of over 24% on page exit rate in comparison to sites that don’t use CTAs within their listing pages.

Filtering & Sorting 

Visitors need a way of filtering and sorting listing pages so they can narrow the results to the products they are most interested in but what’s the best way of implementing this?

On desktop, we can see that side bar filters create higher levels of user interaction than the alternative of drop down or expandable filters. Average interaction with a side bar is 11% compared to 3% for other methods because visitors can instantly see and access the filtering options as a single click solution.

House of Fraser desktop filtering on a product listing page.
House of Fraser show how to deliver filtering on desktop.

The challenges of working within the limitations of mobile devices means that using expandable filters that, when clicked, fill the entire viewport is the most successful approach to implement.

House of Fraser mobile filtering on a product listing page.
House of Fraser also provide a great example of filtering on mobile.

Our product listing page recommendations

Having shared our research for product listing pages, our recommendations are:

  • Ensure products are clearly visible above the fold
  • Use a 3 – 4 column approach for desktop websites and 1 – 2 columns for mobile 
  • Progressively load more products or use a “Load More” button to keep visitors on the page
  • Include “Buy Now” and “Quick View” CTAs for listed products
  • Use side bars for product filtering on desktop and expandable filters on mobile.

Back To Top