26th February 2021

How to Design an E-Commerce 404 Page That Drives Revenue

Hannah Spelman

It takes time to design and build your website, develop your brand and drive traffic to your site. Something which can be commonly overlooked in this process, but which is just as important, is your 404 page. Most sites come with a ready-designed, standard 404 page that lacks any customisation. You can easily rely on this standard design as the page that your users will see - but should you? 

In this guide, we take a closer look at 404 pages and how you can utilise them to improve user experience and conversion rate. 

What are 404 pages? 

A 404  page refers to the error code which appears to site visitors and search engines when they land on a page that has been deleted or is not able to be accessed at that time. This can also happen when a user mistypes a URL or clicks on a broken link. In an ideal world, you wouldn’t want your site’s visitors to land on a 404 page as it means they haven’t been able to access what they were looking for. Search engines will also see these 404 pages and it can suggest that a site has a poor user experience. 

There are instances where a 404 page ought to be redirected, such as, if your site has 404 error pages because products have been moved into different categories. If this has resulted in changed URLs, then it’s important that instead of leaving 404 pages behind, you implement a 301 redirect to where the page now lives. This means you will avoid losing organic visibility and traffic for this particular product. 

Yet in a lot of cases on e-commerce sites, a 404 page isn’t always able to be redirected. If a product has permanently gone out of stock, then it would be appropriate to have a permanent 404 page, as this tells both users and search engines that this product is no longer available. However, despite a 404 page being essential in this instance, it still is not a great user experience and you are ultimately missing out on a sale.

This is where it is important to think about how you can make the negative experience of hitting a 404 page into something more positive for the user. 

Why make your 404 pages stand out? 

Put yourself in the shoes of a user, and picture this: a user has seen one of your site’s pages in Google’s search results. They then click on your page as it matches what they’re looking for, but, after they land on it they are then greeted with a 404 page. This means that they haven’t been able to find what they were looking for, whether it be a specific product, a product category or a blog post. 

This doesn’t equate to a positive e-commerce experience. 

As we have outlined, at times this is unavoidable and so it is worth considering what information is offered on your 404 pages. You should make sure you utilise these pages as much as you can to turn around this negative user experience.

Taking the time to create custom 404 pages  - which provide additional information and are branded - can be what turns the negative user experience into something more useful. Utilising your 404 pages in this way can save you from losing revenue and shows your customers that you care about their journey.

What should you include on a 404 page? 

The main thing to focus on with a custom 404 page is how you can help users find what they’re looking for. Make the page easy to use, understandable, and as helpful as possible. We would recommend considering the following features on a 404 page: 

1. Optimise your copy 

Hitting a 404 page is a frustrating experience for a user and can lead them to bounce off your site. One way to avoid this happening is to ensure that the 404 page has useful content on it, which explains why they have hit the page and encourages them to stay on the site.

The actual content is up to you and will boil down to brand voice and preference. Some brands will try to connect with their site’s visitors and empathise with their frustration, whilst others may favour a humorous take on the 404-page copy.

404-page-mike.png

404-page-owl.png

2. Link through to other products 

Once you have given context to why a user has hit a 404 page, we would recommend you then invite them to visit other pages on the site by including internal links. If a user lands on what was once a product page and is unable to find what they were looking for, this is an opportunity to invite them to visit similar products or show them the most popular products on your site. This will encourage them to click through to another page and make a sale, as opposed to bouncing. 

When creating internal links, take your time and pay attention to what it is you’re linking to. For example, if a user lands on your site looking to buy blue pillowcases but the product has gone, it is not helpful to link them through to purple duvet covers -make sure the related products are actually related. 

3. Include a clear, easy to navigate search box 

Make it as easy as possible for users to search on your site for something else. Having an easy-to-navigate search ensures that there is a large, visible search function present on the 404 page.

If a user has landed on a 404 page because they have typed the URL in wrong or clicked on a broken link, an auto-search feature would be particularly useful. This is where you redirect the user to a search results page that brings up relevant results to what they were looking for.

4. Consider users who weren't looking for a product - don't make the page too salesy 

Not all users who land on a 404 page will have been looking for a product. Users can land on 404 pages after typing in a URL wrong, or because an old URL is still appearing in search results. With this in mind, it’s important to make sure your 404 page isn’t too product-focused and also includes links to other helpful areas of the site, including the contact page, and how to get in touch with customer service, etc. Bang & Olufsen’s 404 page is a good example of this. 

It’s important to note that the approach for temporarily out-of-stock products is different. The options that may typically spring to mind when thinking about how to deal with this issue would be to either present a 404 page or implement a 302 (temporary) redirect to the top-level category. 

Neither of these is really a desirable option. If the product definitely is only going to be out of stock for a short period, then the best option is to keep the page live with a clear out of stock message. Alongside this, we would recommend implementing the following:

  • Product page schema markup to identify that the product is out of stock
  • Include a date when it is likely to come back into stock, if possible
  • Provide the option for a user to give their email address so they can be notified when the product is available to purchase
  • Link through to alternative products that are similar and available to buy now 

Summary 

In a perfect world, we wouldn’t want users to land on any 404 pages. But in reality, it happens and they are unavoidable. Pages move and products go out of stock, so as an e-commerce website owner it is important that you don’t ignore the unavoidable and utilise those 404 pages so that they can help drive further revenue.