Home > BigCommerce > Docs > How to Customize the 404 Error Page on BigCommerce

How to Customize the 404 Error Page on BigCommerce

Last updated: April 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

BigCommerce is one of the top website builders when people have a plan to run their own online business. With unique features you find out in BigCommerce, you sometimes cannot avoid encountering problems relating to software management.

A 404 error page is a clear example of when users or visitors cannot access your page. To improve user experience as your store is in this situation, How to customize the 404 error page on BigCommerce will be the topic of this article. A beautiful page instead of a plain and boring error page will gain user trust and make your entire theme match well.

Without further ado, let’s get into it together!

What is the 404 error page?

A 404 page is a landing page that tells your site viewers the requested page is unavailable or, in some cases, does not exist because of the wrong URL or old URL. When the page cannot be accessed, it is a major problem because users who may not enter your site cannot find the information they need.

What is the 404 error page?

Why 404 error page occurs

A 404 response code can be caused by the user, an external website, or your own website.

User:

  • Manually enters an incorrect URL

  • External Website, Email or Ad:

  • Links to your website with an incorrect URL

Your Website:

  • The server is not properly configured to fulfill the requested action.

  • The page has moved to a new location (new URL) without a redirect set in place

  • The page is temporarily unavailable, perhaps because it is being worked on.

  • The page has been permanently deleted with no redirect set in place

  • An internal link is found on the website with an incorrect URL

How it affects the business

Once the 404 error page occurs to your site, it tells Google that your site offers a poor customer experience. It may lead to less traffic and lower rankings in SEO tools.

How it affects the business

404 errors can result in lost revenue

Traffic is critical for eCommerce revenue.

Given that approximately 74% of those who will encounter a 404 error will leave and never return, 404 error pages significantly impact your conversion rate and, in turn, your revenue.

404 errors result in a poor user experience

Not only do 404 errors make it more difficult for a shopper to find what they are looking for, but they also create a poor shopping experience. In a global marketplace, you both need to have shoppers find your store and products, you need to convince them that you are a trustworthy source to purchase from. Errors on your site diminish the confidence the buyer has that you will properly fulfill their order in a timely manner with quality products.

404 errors will negatively impact your SEO

Once the 404 error page occurs to your site, it tells Google that your site offers a poor customer experience. It may lead to a bad impression in SEO tools as well.

Besides losing customers when a 404 error is actually displayed, there are negative SEO impacts of having a high 404 error rate:

  1. While Google indicates that 404 errors do not directly hurt your rankings, sites with consistently high 404 error percentages can be seen as less reliable for searchers. Cleaning up bad links, broken images and missing pages can increase search rankings.

  2. Broken links can result in lost traffic and page rank that might otherwise be passed to your site.

How to customize the 404 error page on BigCommerce

You’ve consumed lots of time making sure that your website is user-friendly, has descriptive navigation, and is organized in a way that makes sense. But when typing in a wrong URL or another website link to a page you don’t have anymore, the error page appears afterward. Then, what should the user see on your 404 error page?

If it’s a default server error page, it will be an ugly, confusing experience that is sure to drive them away:

How to customize the 404 error page on BigCommerce

Server error pages are pretty rough to look at, and what’s worse is that they don’t help users navigate to the actual website. A basic 404 error page is better, because it has main navigation, but is still not ideal:

How to customize the 404 error page on BigCommerce

Here is a great 404 error page to attract your users interestingly:

How to customize the 404 error page on BigCommerce

The problem is that pages like this aren’t clear about what’s happening, and they don’t help users stay on the site. Most 404 error pages offer the same bland experience. As important as this page is, it generally receives very little attention and effort. Consider creating a custom 404 error page to better engage the user.

Indeed, site visitors would never land on a 404 page, but the reality is that they do happen from time to time - even from well-maintained sites. Thus, customizing the error page is a necessity to make your customers stay on your site without feeling annoyed and bored.

Step 1: Go to Storefront, then choose “My Themes”

Go to Storefront, then choose “My Themes”

Go to Storefront, then choose “My Themes”

Step 2: Choose “Customize” then you can edit the store template

Choose “Customize” then you can edit the store template

Step 3: Edit the HTML file

Select the “Edit HTML/CSS” to start changing the theme as you want.

Edit the HTML file

In the list of Other Templates Files on the left, select 404.html. Next, you can edit to change the path in the <img src=""> tag to the location of your new image link.

If you are still hesitant to make changes, you can directly contact a BigCommerce Partner that they would be happy to work with you one-on-one. It assures you can customize optimally as you want without being afraid of making any mistakes while coding.

Besides, give guidance on editing the error page, there are considerations of having a good page:

Explain the problem like a human

Customers need to know why they did not get the page they wanted. Speak like a human talking with them about the problem occurring. Customers don’t care about a bunch of technical jargon, all they want to know is what happened and what to do next on your website.

Echo your brand in the page design

Make sure the design of your page is in line with the concept of your site, both in appearance and tone. Uniformity in page styling is cardinal to create continuity. Use your 404 pages as another way to impact your brand’s image in their minds. As you can see from this example, their 404 pages is perfectly aligned with their brand:

Echo your brand in the page design

Be engaging

Grab their attention! Using humor, chat widgets (app chat), and offering a discount (Coupon codes) are excellent ways to hype their mood up while still being helpful.

Be engaging

Give customers a way forward

When they hit your 404 page, now they’re at a stopping point. It is your challenge to use your method to help them get what they need before you lose them. Here are three ways to do this:

  • Offer a search bar

  • Provide a list of top categories to choose from

  • Include a way to contact you for help via phone, email, or chat

Adding one or more of the above elements to a 404 page is especially useful when leaving the 404 page in place without a redirection. This is done when there is simply no appropriate alternative to the desired page, like when a unique product has been discontinued.

Getting 404 errors on your eCommerce site is inevitable. But with the right mindset and tools, you can turn this inconvenience into an opportunity to increase sales and create opportunities for success.

Conclusion

An eCommerce website isn’t driven by just one thing. It’s lots of different ingredients that, when brought together, create an all-inclusive experience that helps an online business succeed. When one of those ingredients leaves a bad taste in a customer’s mouth, like an unhelpful 404 page, consider making things right in a way that’ll help your business rather than do further damage. Thus, the basic information of How to customize the 404 error page on BigCommerce is a must for a starter getting used to the BigCommerce platform.

Why be concerned about having a boring 404 (Not Found) page on your BigCommerce store’s website? Because at the very least, retaining an ugly default error page is a lost marketing opportunity. Creating an informative, branded 404 page takes advantage of that can be used to help potential customers find what they need. Using every available technique to keep customers on your site and on the path to converting is crucial for your long-term success.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.

Stay in the know

Get special offers on the latest news from AVADA.