Whether you like it or not, 404 pages are an inevitable experience for customers on your e-commerce site.
Even if you do your best to keep products in stock and your page redirects up to date, your customers will eventually try to visit a page that doesn’t exist on your site.
A 404 page can be a frustrating experience if it results in a dead end or doesn't help your customer find the page they were looking for.
But a 404 page doesn’t have to be the death blow to your customer’s experience. 404 pages are highly customizable, so they can actually drive sales for your business if done right.
So, if 404 errors are inevitable, why not turn the error into an opportunity?
In this article, we’ll explore:
- What 404 pages are and why they happen;
- The purpose of a 404 page;
- How to avoid them;
- Best practices for 404-page designs and content; and
- Examples of great 404 pages.
What is a 404 Page?
A 404 page, also known as a missing or non-existent page, is when a customer visits a URL on your website that doesn’t exist on your server.
The meaning of the ‘404’ number is that it’s the code generated from a server when the user tries to visit that non-existent webpage. Some other examples of error codes are:
- 301 or 302, where a page redirect occurs on a site after a page has been moved or archived; and
- 500, where the server is broken or a script error occurred.
What causes a 404 page error?
A user might hit a 404 page when:
- They’ve followed an old link to a page that has been moved or deleted;
- There’s a typo in the link or missing characters;
- A page on your site accidentally got deleted;
- An inbound link from another website is incorrect or outdated, such as from an old blog or social media post; or
- Another reason a webpage that’s expected to exist doesn’t, even if it should.
What’s a 404 page for?
The purpose of a 404 page is to:
- Let the user know that the page they tried to visit doesn’t exist, has been deleted or has moved;
- Tell search engines that this specific webpage doesn’t exist; and
- Give webmasters data to show them that users are trying to access this specific path on your website using analytics tools like Google Analytics.
By using these kinds of tools to find 404 errors, you can see if there’s a popular “page” that visitors are trying to access leading to 404 errors.
From there, you could remedy the error by tracking down the source link and fixing it (if it’s on your website).
How to avoid 404 Errors
While users are bound to come across a 404 page on your site at some point, there are some ways you can prevent them.
One of the best ways is to create simple, straightforward and site paths that remain consistent over time. It’s important to avoid moving pages around your website unless absolutely necessary, especially since this can negatively impact your SEO (search engine optimization).
You should also ensure that you keep track of and update any links on your site that lead to any newly moved pages.
Sometimes typos or errors in URLs can come from your website and not the user, so always test new pages to make sure that internal links work before publishing the page.
If you purposefully decide to remove content from your website, such as an old product line, but there is a new, related product line available, your old URL should be set up to redirect to the new, updated product line page—don’t just redirect to the homepage.
If you’re using an e-commerce platform like Shopify, it's usually pretty easy to create a URL redirect that leads to the right page.
Finally, you can try using a broken link checker to find broken links on your website, such as Broken Link Checker or a Shopify app like Broken Link Manager, to find the culprits on your site if the broken links are internal.
Despite our best efforts, no website is perfect without the risk of a 404 page popping up every now and then, so it’s important to prepare the page for your visitors when they inevitably stumble upon one.
What Makes a Great 404 Page in 2020?
While most servers and hosting services will offer a default 404 page, it’s important to customize this page to your site in order to keep visitors and potential customers on your e-commerce site.
These default pages are often just purely technical language and don’t include branding or other elements even remotely resembling your website.
It’s also important that you don’t just redirect customers back to your homepage, which is a common and lazy tactic of many e-commerce sites for their 404 pages.
Not only does this cause your customers confusion, since they aren’t being pointed in the direction of any possibilities for what page they were looking for on your site, but it essentially forces the user to start over on your homepage, which can be frustrating for users and cause a good old rage quit. There go any potential sales!
A good 404 page could even generate sales, so through its design and content, here are some best practices for great 404 pages in 2020.
What Are the Key Elements of Great 404 page design?
- Include brand elements - One of the most basic elements of a proper 404 page design is to include your brand logo, colour scheme and font so that users know they’re on the right site.
- Include your navigation - A great 404 page should also include your main navigation as it appears on other pages on your site. You can also include three or four internal links to the most visited pages or products on your site if they don’t appear on the main navigation.
- Include popular links - For smaller sites, you could even provide the entire site map on your 404 page, as long as it won’t overwhelm the visitor. Always keep any options short (three to four links) to keep it simple and prevent decision overload.
- Provide a search bar - Another important element is providing access to a search bar so that customers can find the exact page they’re looking for. If this isn’t included in your main hanging navigation at the top of the page, provide a search bar in the page content.
- Link to your contact page - Lastly, whether it’s in your navigation or in your footer, the 404 page should provide access to your contact page in some way—if they’re in doubt, show your customers that they can reach out and talk to a real human.
In summary:
- Include brand elements;
- Include your navigation at the top of the page;
- Link to three or four of your most popular pages or products;
- Provide a search bar; and
- Link to your contact page.
Great 404 page content
While 404 page design is crucial for redirecting your customers to the right place, 404 page content can turn an otherwise frustrating experience into a pleasant one and let your branding shine.
- Inject humour - A classic for 404 page content is to inject a little bit of humour into it. Nothing eases the disappointment of a broken link like a good chuckle!
- But stay on brand - However, it’s important with your 404 page to stay on tone with your brand depending on what products or services you’re selling, humour might not necessarily be appropriate.
- Don’t get too technical - Whether you decide to use humour or not, don’t use overly technical language about the 404 error to bring focus away from what’s important, which is directing customers to where they need to be on your site. You don’t even have to reference the ‘404’ aspect at all. Something as simple as “This page doesn’t exist” works!
- Admit your mistake - You should also take responsibility for the error and don’t imply it’s the customer’s fault that they’re in the wrong place. For example, you could lighten the mood by adding “Our bad!” after a sentence indicating the error.
- Direct customers to the right place - Your design elements such as your most popular pages or search bar should follow this content.
In summary:
- Inject some humour (if appropriate);
- Stay on brand;
- Don’t use overly technical language;
- Take responsibility for the mistake; and
- Quickly direct customers to the right place.
Best E-Commerce 404 Page Design Examples
Here are some of our favourite e-commerce 404 pages.
Steve Madden
Steve Madden has one of the best examples of a 404 page. They provide the design elements outlined above like a search bar, the main navigation and popular products, as well as lighthearted content that takes responsibility for the error and provides customer service information.
Patagonia
Patagonia’s 404 page is both fun and useful. It builds on their brand of being a laid back, outdoor-focused retailer, all while providing their full navigation, different categories for shopping and a full footer with contact and customer service information. And they threw in a fun frisbee video for a little extra style.
Nespresso
Nespresso’s 404 page is a beautiful example of how you can show off and brand your products. While it could be better by featuring links or images of specific products and not simply redirecting customers back to the homepage, it takes responsibility for the 404 error and provides both a full navigation and footer.
ModCloth
Not only do you immediately get a pop-up to sign up for ModCloth’s email list to receive a 15% off coupon when landing on their 404 page, but playful puns and a clean design also greet you when landing on this page. While it could be stronger by providing a navigation or search bar, the page provides links to ModCloth’s most popular pages and clear, concise links to its customer service options.
Lego
If there’s any company where you’d expect a fun 404 page, it’s Lego. On top of its goofiness and taking responsibility for the mistake, it checks all the boxes of a great 404 page design by providing plenty of options for customers to go with a full navigation, a search bar and customer service information.
Lululemon
While the 404 error message could be clearer, with some beautiful branding and a sleek design, Lululemon’s page does a good job of getting customers to the right place with a prominently displayed search bar in both the main navigation and within the content of the 404 page. There are also plenty of options in the footer for getting help.
Otterbox
Who doesn’t love otters? Otterbox’s playful 404 page stands out not only by providing an easily-accessible search bar, navigation, footer, contact us page and dropdown menu for selecting your device and provide the product a customer might be looking for, but it explains what may have happened to lead to the 404 page without blaming the user and apologizes for the error.
Design an Awesome 404 Page
Being helpful and quickly directing customers to where they need to be in a lighthearted way should be the ultimate goal of your 404 page.
If yours is lackluster and unhelpful, it’s time for you to update this page following the guidelines above—before customers leave your site and you lose potential sales.
Highly customized options can be difficult for users without a strong knowledge of CSS, so if you’re using Shopify and don’t know where to start with your 404 page and incorporating any of the design elements seems overwhelming to you, don’t worry.
Contact Marketplace Solutions today to help you design your a custom 404 page for your Shopify website.
