How to Make 404 Error Pages an eCommerce Sales Leverage

Imagine the shoes of your dreams. You see them right on the screen and click on the link. But instead of a product page, there is a notification that the page doesn’t exist. It’s discouraging, isn’t it? Some brands automatically redirect users to the homepage if they open an unexisting page. Others prefer a separate landing point, i.e., a “Page Not Found” that’s often referred to as a 404 error page.

In fact, such “nonexistent” pages can bring a lot of value from the business perspective. A well-designed and properly customized 404 page may encourage visitors to stay on the site, subscribe to the email list, and even buy from you.

This article will discuss eight eCommerce examples with compelling 404 pages and tips to improve error pages for reaching higher conversions.

Why 404 Errors Occur and How It Affects Your Website

Servers interact with one another using various three-digit codes. These are HTTPS status codes. They transmit data from the user’s browser, telling what people try to access. This information goes to the server of the target website. If successful, users will receive the desired content and open the page.

A 404 error is one of such HTTPS status codes. It happens when the browser successfully connects to the destination server, but the requested information is unavailable. It results in an error message on users’ screens. Rather than seeing the needed content before their eyes, people have to guess what’s wrong.

You may build a flawless website, set up an eCommerce site search, and ensure visitors travel from point A to point B without any obstacles. What may lead anyone to the broken link, you think? Unfortunately, these are common situations, especially in eCommerce. Let’s look at the three typical reasons that you can apply to any resource:

1. Typos in URLs

These are mistakes web admins can’t control. They happen when users mistype the URL, omit a letter, add extra symbols, or make other mistakes when inserting the address in the search bar.

Even though you have no power to prevent it, you can determine what prospects can do on the page. Will they see a blank notice and hit the “Back” or “Close” button? Or will you engage and encourage them to click a call-to-action button, a navigation menu, or even a product catalog? The ability to retain visitors pays off. You can continue communicating with prospects and convert them into purchasers.

2. Absence of 301 Redirect After Changing the Page URL

A 301 redirect is another HTTP status code. It informs users and servers that the page URL has changed permanently. It’s like saying, “The chosen path isn’t available anymore, so you’ll go to another address.”

For example, the previous address was “blog.example.com” and transformed into “example.com/blog”. Apart from changing the URL, you may need to set up 301 redirects in the following cases:

• Moving from one domain to another;
• Merging two websites;
• Deleting pages;
• Going from HTTP to HTTPS or from non-WWW to WWW URLs;
• Removing duplicate pages.

301 redirects are important for SEO. They let you keep ranking for the needed keyword. They also preserve the backlinks from the previous page. As a result, you can attract traffic thanks to backlinks without losing potential customers on their way from other websites.

Why Online Stores Shouldn’t Ignore the 404 Page Issue

Ecommerce websites usually change their content as items may go out of stock or for other reasons. For example, you decided to remove a product from the catalogue.

Imagine you’ve attached the wrong link to other website pages. Now you have to go there and delete or replace it with a new one. It’s pretty challenging for a big retailer, right?

When these updates increase significantly, you may forget to deal with such pages and have numerous erroneous links in the store. But is having these links such a big deal? Overlooking a Page Not Found mistake is a serious problem. Here are statistics why:

• A 404 page will cause 77% of visitors to close the website rather than find a missing page.
• Only 21% of visitors will purchase from the store more than once after facing an unsatisfactory user experience.
• Getting a new customer is typically five times more expensive than keeping an existing one.

No one likes dead ends. How often did you want to continue browsing the website after facing a broken link? Such errors create an impression that the website lacks management and needs more attention to detail. It may be a frustrating experience for customers, leading to a high bounce rate. That’s where the first danger of neglecting 404 issues arises.

1. 404 Errors Lead to Skyrocketing Bounce Rates

A bounce rate is one of the crucial website metrics, illustrating how the page retains visitors. It’s a percentage of people who left the page after opening it and didn’t take further action compared to all visitors. A great number of such cases raise a red flag to major search engines. It tells them the website doesn’t meet the users’ expectations.

2. A High Bounce Rate Impacts the Website Position

Another reason to deal with 404 pages is the website’s position in search results (SERPs). Google considers a bounce rate one of the ranking factors. Why? Because it indicates that the website fails to return the relevant answer to users’ requests. So the worse this metric is, the lower the website appears in SERPs.

Another problem that influences Google’s ranking is not having your page correctly indexed. How? Google uses spiders to explore every website page. They collect important data to understand the website’s purpose, offers, and what it’s all about.

A broken link is a barrier for crawlers. They may stop indexing, meaning the website won’t achieve the needed positions. The lower your website in SERPs, the fewer visitors it will attract. Imagine how many people you could convert by dealing with dead ends. Dozens, if not hundreds.

What Should a Well-Optimized 404 Page Include?

Leaving a generic error page is a simple but faulty strategy. The custom design eliminates customer confusion, lets you express yourself, and increases the conversion rate. What else can you achieve by investing in a powerful error page?

You can interlink the page with other website content to boost your SEO. Well-built error pages present your users with useful links they wouldn’t have seen otherwise. Let’s analyze how to deal with the Page Not Found issue properly.

1. Include a Navigation Menu

Imagine an empty room with only one door as an exit. What do you expect people to do if not leave through this door without trying to access other “rooms” in the building? That’s what the 404 page looks like without navigation.

Navigation is the first essential part of the 404 Error page. A website map provides an overview of the company’s offers and lets people choose the page to open. It tells users where to go. Thus, they don’t feel stuck at a dead end.

Include a navigation menu in the header. It’s reasonable to show links to other website pages to help visitors find relevant information or return to the home page as a starting point.

Omitting a 404 page and immediately sending visitors to home or category pages is a big “no-no”. Why? An automatic redirect can create more confusion.

You should explain to visitors the reason for not opening the desired content. And the 404 page is a perfect place to do it. Keep it simple and apologize for the inconvenience rather than pretending nothing wrong happened.

2. Configure a Search Functionality

Website search isn’t as crucial as navigation on the 404 page. The thing is that you may not have this functionality at all. However, if you’ve configured an on-site search, add it to your error page. It will act as additional navigation to help users insert the desired keyword.

For example, they landed on the unexisting page when searching for a highly-demanded good. Let it be a dress. It went out of stock, so you deleted the page.

The search functionality will allow prospects to type in the “red dress” phrase and find similar items. It’s also beneficial for you due to the additional chance to display other products and increase sales.

Note that the website search should work properly and return the relevant results. One of the best practices is to employ autocomplete to finish the phrase for the user.

Another tip is to utilize artificial intelligence to comprehend mistakes. This functionality ensures people get at least something connected to their intent rather than a default message, such as “Sorry, couldn’t find anything”.

3. Display Recommendations and Hot Deals

Another way to boost sales on the error page is to show recommendations and hot deals. When people land on such a page, the last thing they want to do is to think.

It’s already an unpleasant issue when you can’t find the desired item. So make this task easier by providing relevant content or products from your assortment.

That’s where cross-selling comes to your aid. It’s a practice of offering customers products to meet their needs. Utilize information from previously viewed pages, bought items, or the initial intent to pick the best pages. Another source of insight is the data from existing customers with similar traits. 

If you don’t have data at all, display the most popular products or categories. Let it be season-specific goods.

Such offers generally drive many sales and are in peak demand during a particular period, so you can “guess” prospects might also like them. It also applies to other content, such as recommended blog articles, in case you want to direct traffic there.

4. Reduce Stress With a Little Bit of Fun

An error message indicates something wrong with the website. How do you reduce users’ frustration? Allow them to report issues by writing their complaints in a dedicated field.

Leaving a complaint brings people closer to resolving a problem. They let you know what’s wrong, and you receive a message to improve the website.

Humor is another effective way to connect with viewers and add a human touch. 404 error pages can be fairly annoying and unappealing for visitors to encounter.

Luckily, by making your 404 error page exciting and entertaining, you may influence a visitor’s decision to stay on your website or leave it. Include a funny image and engaging text to make users comfortable.

5. Add Interactive Elements and CTAs

404 pages are all about creativity. They don’t have another purpose rather than informing people about some issue, so you have room to implement various features. A case in point is videos.

They are one of the most engaging content. Why? Visitors don’t have to read large blocks of text. They can watch a video to get an idea of your business or even learn something if it’s an educational copy. You can present your products or conduct an interview with an expert. Practice various types of content to keep your audience glued to their screens.

Consider adding a call to action (CTA). A CTA is a button or a link describing to users what happens after clicking on it. For example, you can create a “Go to Home Page” button and take users to the corresponding place. Other actions to encourage visitors to take are as follows:

• Become a subscriber to your email newsletter;
• Download a free ebook, checklist, etc.;
• Register for a webinar or course;
• Sign up or sign in on the website;
• Request a product demo or book an appointment with customer service staff;
• Proceed to social media and follow business accounts;
• Among others.

Don’t overload the page with excessive links and CTAs. Prioritize actions that will help you reach goals and increase conversions.

6. Remain Consistent With Your Branding

How do you differentiate the brand in the overcrowded market? Branding is your helping hand. It combines the company’s logo, fonts, and colors throughout the website, newsletters, and advertisements. It also includes the culture and the philosophy you spread.

Design the 404 page in line with the overall branding. People who have already explored your website will recognize the brand on the error page. It increases your chances of retaining them.

You can also reinforce your brand image by creating a unique hero image or background. Hire or partner with your corporate designer to produce striking 404 visuals.

Seven eCommerce 404 Error Page Examples to Learn From

As you can see, opportunities to save your conversion at the so-called dead end are almost limitless. Leverage it as an additional place for creativity, sharing brand voice, boosting sales, etc.

How do top eCommerce websites configure error pages? Let’s dive deeper into seven Page Not Found examples with explanations about their strong and weak sides.

1. Levis

Screenshot taken on the official Levis website

It’s a bad 404-page example. Yes, there’s an apology (which is better than showing just a blank page or one with only the “Page Not Found” heading). But there are very few alternatives of what the user can click on nor further instructions on what the user should do next.

2. Victoria’s Secret

Screenshot was taken on the official Victoria’s Secret website

Victoria’s Secret provides a better example than the previous one, but not much. The user can navigate the website from the top menu bar or hit the home page link. Plus, it grabs the user’s attention with an attractive photo.

3. Old Navy

Screenshot taken on the official Old Navy website

Old Navy pitches an explanation of the possible reasons why the user landed on the error page. There are instructions stating that you can go to the homepage or contact the team. It’s better than showing nothing but the following example takes the idea a step up.

4. Hugo Boss

Screenshot taken on the official Hugo Boss website

Hugo Boss apologizes and explains what might have gone wrong. Notably, there’s a search bar, so the user can look for something else on this error page (without navigating elsewhere). We see two category pages: “Discover Men” and “Discover Women”. It already gives the shopper some room for maneuver.

5. NYX Cosmetics

Screenshot taken on the official NYX Cosmetics website

NYX Cosmetics 404 page is better optimized than the examples shown before. Why? Because there’s also a widget with popular products. Users can add a product from the section to their cart right from the error page.

6. Pandora

Screenshot taken on the official Pandora website

Pandora uses a similar approach to the one above. It offers the user a selection of the main categories and recommended styles.

7. Adidas

Screenshot taken on the official Adidas website

There’s a search bar, a homepage link, and even a newsletter\loyalty program sign-up form on the Adidas website. The “We Recommend” block shows products, but a user can’t add them directly to the cart without visiting the corresponding page. But in this case, it might make sense because the shoes have different sizes and can come in various colors.

Conclusion on 404 Error Page

A “Page Not Found” error occurs when a user attempts to access a misspelt link or a URL address that can’t be found on the Internet. For example, the website’s creator decided to remove a page without setting up a redirect or drop the resource altogether.

While there are other forms of errors, a 404 note occurs quite frequently even in online retail. You may make a generic 404 page to inform users about an issue. Some stores attempt to turn frustration into amusement with humorous error messages. Yet this doesn’t safeguard you from the users leaving the website at this “dead-end” point.

The best practice here is to definitely not leave the page blank. Include various elements without overloading the page to engage and retain potential customers.

Mix the good ideas that are shown in the examples above. Your layout, style, and element choice will depend on the niche of the online store and the type of sold products. Consider the following features:

1. Search functionality;
2. Links to other pages (most popular items, browsing history recommendations);
3. Navigation (a map of your site);
4. A conversational tone;
5. Calls to action;
6. Explaining why visitors arrived at that page.