How to nail the eCommerce product page

An online product page is the make of break for customer engagement, as there is virtually no way the product can get into the basket without the customer responding to it. Despite the importance of this page, we frequently find that the product page represents the most frequent point of abandonment within the overall sales journey.

In our experience the biggest reasons for customers disengaging from an eCommerce product page are:

Take a look at this less-effective product page:

A fifth of retail space above the fold is used to offer similar products in which users may not be interested at this stage of their engagement. The result is that relevant product information is pushed below the fold where users are less likely to see it. There are also no obvious reviews or third-party endorsements. The result is a product page which is almost entirely transactional – why should the user buy this product?

So, what does good look like?

Product presentation

Merchandising is just as important online as it is ‘in store’. Products have to be presented effectively and that doesn’t just mean price. At this stage your engagement is still a sale conversation. The customer will still be looking to answer at least one of two questions, if not both:

Product headlines and descriptions must therefore focus on benefits in the key retail space on the page and offer features in the space reserved for ‘more information’. In a sales conversation it is possible to move between benefits and features in the interaction, responding to customer interest as it appears. On a website there isn’t this opportunity, so benefits have to come first – they are what the customer is most interested in. 

In addition, the customer needs reassurance that buying it from you is low risk so this is where you put any guarantees, price comparisons and ‘benefits’ of using your company, such as delivery conditions. The winners in eCommerce are those who persuade the customer that they offer the least risk of an unsatisfactory experience.

At this level you also need to deal with whether the item is in stock or not. If it isn’t and you are re-stocking, then give the customer the option of being contacted when it’s back in stock – and then remember to contact them when it is.

Finally, it needs a clear and straightforward call to action. Whether you are inviting the customer to buy or add to basket (and we’re not convinced we’ve seen any testing that proves the wording matters apart from it being clear) and whatever colour it is, (and again there is no one better colour, really) what is important is that it stands out clearly in the design.

Here’s an example of a poor call to action seen through a ‘Gaussian blur’ test. As can be seen, the call to actions are clear but there are more than one – so which is the primary “Add to basket” CTA? This is a great test you can apply to any website page to understand what stands out for the unfamiliar customer.

When presented effectively, a product page does not require all content to be above the fold but guides the user through a sales engagement providing product information, a reason to buy and the information required to do so. This page does all these things well, because it is a product page containing the information the user needs, presented in a way the user can engage with.


You can’t provide too much information. The key reasons for failure with information is that there is too little of what is important to the customer or it is presented poorly.

Assuming you’ve handled the product benefits at a headline level in the key retail space, the first priority is to ensure it is clear where more information can be found and associated with that information, is the continuing opportunity to buy through clear calls to action.

Check that you’ve covered what the customer wants to know and if you don’t know what they want to know, don’t ask your UX team, ask your customers. Set up an abandonment survey on your product pages and ask people why they left the page – you’ll soon find out what they were looking for that you failed to provide or make clear.

The degree to which you engage the customer with additional information will depend, broadly on three factors:

Here’s a simple example from international calling app ‘Worldchat’, who worked out that the one of the deciding factors on whether or not to download their app was whether the customer thought the rates for the country they wanted to call were competitive. The main rates are displayed automatically and there’s a simple enquiry function for customers looking for less common countries.

Here’s a good example of handling a familiar product with a set of newer features: John Lewis’ engagement with memory foam mattresses:

If you want to look at a good example in selling new technology, then look at the product page for Amazon’s Alexa.

Third-party endoresements

A significant way to reduce risk for the customer is to show them that others have bought your product and are entirely satisfied with it. Customer reviews are the primary vehicle used by eCommerce sites and they are increasingly common. You have to take the risk that some people may not like the product and that they may not like your service. Do so in the comforting knowledge that a good recovery from a poor experience is likely to be shared with far more people than one that was good first time around.

If you are going to use product reviews however, then take care how you then merchandise recommended or ‘bestselling’ product recommendations. Don’t push products that are poorly rated by customers, however much you want them out of the warehouse.

Customer feedback however isn’t the only endorsement. Third-party reviews from the media, product awards and ‘best seller’ claims (though these need to be credible) all help.

How best to judge page performance?

You should be looking at: