Best Practices & Optimisations for eCommerce Product Listing Pages

If you have read our article on creating an ecommerce roadmap, you’ll recognise that listings pages are a key step in the customer journey on an ecommerce website. How important it is to you will depend on the volume of products you have and how many different ways there are of filtering them - in other words, how they are categorised. This piece will not cover how to optimally order products in categories (we will cover navigation and information hierarchy later in this series). Additionally, this piece assumes that you have gone through the process of analysing the steps within the customer journey and identified listings pages as an opportunity. We’re only going to talk about category and sub-category listings pages - internal search and how to improve that will be covered later.

How do I measure performance on my listings pages?

The purpose of a product listing page (PLP) is to show customers products related to the category they’ve navigated to, so that they can click through to product description pages (PDPs). This is called the listing page to product page rate, and is the core metric that you are trying to improve. When you examine this at a listing page by listing page rate, you will find that there is a distribution of performances - some categories will do better than others.

However, this doesn’t tell you much about which elements of the page are working and which are not. To do this, you need to have event tracking set up. This can be a fairly lengthy process, depending on how you choose to setup the events - you can also use this very useful Chrome extension from Elevar to create events simply by clicking on elements of the front-end of your site. So for example, you can obtain the click through rate by product listing position, or use of filters, navigation and so forth. Once you have done this for your listings page template, it should cover you for all listings pages, providing the nomenclature is set up so it takes values from the context of the page. Google has a pretty good guide to setting this up - it’s worth reading and implementing site-wide if you haven’t already done so. Some of the enhanced eCommerce reports also helps with this to a certain extent, but you can’t get the same level on insight into the specific products etc. You can also use a solution like Hotjar to monitor specific clicks on filters etc, which can be useful.

The events route gives you a way of accurately tracking which parts of the page are being interacted with, which means that you can see the effects of changes as you make them. Because listings pages are pretty complex in terms of possible interaction (as opposed to, say, a product page which has a more limited number of outcomes), it’s important to take a granular view of any tests that you run.

There are also a number of tools that provide insights into what customers are doing on your page, such as Crazy Egg, Click Heat or HotJar (there are a lot out there so it’s worth doing some research to find the right one for your budget and requirements).

This kind of analysis can be supplemented by direct user testing. Once you have an idea of which aspects of a page are causing issues, you can observe panels of people as they try to complete certain tasks on a website. This can be very informative - because you and your team are so used to seeing and using your website, it’s likely that you are blind to the parts that hinder or prevent customers from doing what they need to do. It’s important to run these tests with a wide variety of people and make sure they use both mobile and desktop versions of your site.

How do I improve performance of my listings pages?

A typical user interface development cycle will go something like this:

Research -> Hypothesis -> Testing -> Analysis -> Reject or Accept Changes

We’ve looked at the measurement and research part above - so how do you go about making improvements?

There are generally two things  you can do on a page - change or remove an existing feature, or add a new one.

It’s harder to identify when to add a new feature, as you won’t have any interaction data on it. However, you can generate hypotheses from customer feedback (eg, “I wish I could see the best products first” might lead you to want to test the addition of product star ratings in the listings), or you can infer from behaviour (eg, customers clicking through to a product and then back when they see that you don’t have their size may lead you to want to test a size filter on the listings page).

You are also helped out by there being a limited number of features that are typically found on a listings page.

Merchandising / featured product modules

These are generally found at the top and/or bottom of listings pages, and are an opportunity to highlight promotions, offers, new products, etc. You may choose to test the sizing and placement of these - they can certainly be effective, but there can be a cost in terms of pushing products down the page. If you do run tests on these modules, it’s well worth splitting out results on mobile and desktop - this may be an instance in which you have a feature on one device type but not on the other.

Suggested product modules, such as ‘customers also viewed’, are generally automated to a set of rules. This is a great opportunity for testing out the effects of personalisation on your website - most platforms will accept modules that highlight products based on customer information such as past purchases or website behaviour. Because these are algorithmically-based, you can test both the effectiveness of the module itself (i.e. how many people go on to purchase and how much they spend) and of the overall effect on page views.

Product listings / cards

The key part of a product listings page is, of course, the product listings. Within this, you can control the ordering of the products (and options to re-order) and how the products are presented on the page (image, price, number of columns).

Typically, a product listings page will present products in a default order and then give customers the option to sort them differently - e.g. by price (high or low), recency, discount (rate or absolute) or rating. This is useful for you too - the frequency and performance of these ordering types can give you an idea of how you want to weight your default ordering.

It’s helpful to assess more product metrics than just click through rate - this is an example of when it’s important to look at the monetary value of each interaction as well as just the volume. For example, if you only optimise for click through rate, you may find that more customers settle for cheaper products, leading to a lower AOV and a drop in profitability, even as you create more transactions.

Therefore, your weighting algorithm needs to include product margin and conversion rate as inputs alongside click through rate. This is sometimes referred to as ‘weighted click through rate’. This, again, is a great opportunity to integrate personalisation and machine learning. A platform like Episerver has a great interface to do this, but if your platform does not have this capability built in, a tool like Optimizely is very effective.

Within the product listings, you may also want to test image types (e.g. lifestyle vs product shot), stickers (eg, ‘sale’ or ‘low stock’) and how you present price.

Filters

Customers use filters to refine the view of products that you’ve presented. This is especially important if you present them with a long, multi-page list (for example, a large category such as ‘wine’ or ‘garden herbs’). However, you do not want to present the same set of filters for every category - some filters simply won’t make sense and others will be more important in certain categories. The list of filters also needs to be a manageable size for customers. Therefore, each category needs to have a set of assigned filters. If you operate a large, multi-category e-commerce site, this can appear a daunting task, but it’s made easier if you group categories - for example, all shoe categories would have a shared set of filters.

Setting up and maintaining filters needs to be a cross-disciplinary effort - there is no chance that filters will work effectively if product data is inconsistent or absent altogether. If you have a small site selling your own products, this should be fairly straightforward, but if you have a wide range of third-party products, then your buying team needs to be on board with acquiring and uploading that data. It’s not the most glamourous of jobs, but a vital one for an effective listings (and search) function.

It’s also worth reviewing your filter input and interaction - some work better as check boxes, radio buttons or sliders, and will differ in utility between desktop and mobile. It’s also worth considering whether the page automatically applies the filters each time a new one is added or whether it’s better to wait for customers to complete their selection. Again, the answer to this will differ depending on complexity, so it’s one to pay attention to during the customer testing phase.

Once you have created hypotheses and tested them out, you’ll be left with the choice of accepting or rejecting the changes. If you accept the changes and integrate them fully into the website, it’s useful to leave a small holdback audience who still see the original design over a longer period of time - customer behaviour can change as they get used to new versions of a website, and that can influence your view of results both positively or negatively.

Good examples of eCommerce category pages / PLPs

Burberry

Great drop-down filters that are easy to see, alternative image rollovers and good sized product photos make Burberry's PLPs stand out.

The Conran Shop

Comprehensive filtering on meaningful attributes. Availability of individual items is clearly shown, along with estimated dates for new stock, and colour options.

Everlane

Everlane works hard to present products in sensibly-curated groups within each category. Another feature we like a lot is the facility to see product photos with models of different sizes. Filters are generally kept simple, to include style, colour and size.

Aesop

Aesop's trademark minimalist product photography is evident on their PLP pages, with a clever rollover add to cart button that also reveals available sizes. We also like the two-line PLP description for each product which focuses on skin type and skin feel.

On Running

With filtering options shown on the left at all times, On Running has a strong PLP that includes colour options (with lightning fast alternative product photo loading), Quick Add functionality and merchandising badges (new color, waterproof, new generation, etc).

Iitala

Simple and straightforward product filtering, merchandising badges and quick add to cart all add up to produce a clean and effective PLP.