How to Create Custom 404 Page in Magento 2

Jul 23, 20194648
How to Create Custom 404 Page in Magento 2

Do you have any idea what HTTP status code is? Have you ever seen 404 Page Not Found? What role does it play for any website?

In this article, we will describe what is an HTTP status code and pay attention to the one particular – 404 Page Not Found. We will consider its main peculiarities, its opportunities for retaining a customer on your website and engaging customer experience. Moreover, you will discover how to create and customize Magento 404 Page. In addition, we will describe the best 404 error page examples which can help to convert visitors into customers. You will learn how to make a 404 page in Magento, both in back office and programmatically. As a result, you will improve your conversions, making your ecommerce business more successful than it is now.  

Table of contents:

What is HTTP response code?
What is a 404 page?
How to setup 404 error Magento?
How to create a noRoute processor?

What is Http response code?

HTTP stands for Hypertext Transfer Protocol, and this is a status code that a server issues as a response to a user’s request. The interaction between the browser and your website is carried out with status codes. For example, a website page is successfully opened – the browser receives the status code, informing that the query is received by the server and processed. Another example is when a website owner wants to redirect their visitors to another page and use the Redirection reponse codes for this. To learn more about redirect codes and how to work with them in Magento, explore the How to Create URL Redirect in Magento? article.

All HTTP response status codes are divided into five classes. The first digit of this code shows the class of response, while the last two digits don’t indicate any class or category. There are 5 values for the first digit:

  1. 1xx (Informational): The request was received, continuing process;
  2. 2xx (Successful): The request was successfully received, understood and accepted;
  3. 3xx (Redirection): To complete the request, further actions are required;
  4. 4xx (Client Error): The request has the wrong syntax or can’t be completed;
  5. 5xx (Server Error): The server is not able to fulfill an evidently right request

So, there is a great variety of server errors, but the most common for any kind of websites and ecommerce, in particular, is HTTP 404 Not Found. That’s why, let us consider its main features in detail and find out how to work with 404 Not Found in Magento. 

magento development services

Magento Development Services

Take your store to the new level with BelVG Magento development services

Visit the page

What is a 404 page?

A 404 error is a standard HTTP error message code which means the required website couldn’t be found on the server. It’s a client-side error, indicating either the webpage was removed or moved and the URL wasn’t changed respectively, or the person made a mistake typing the URL.

In other words, Page Not Found means that the users reached the domain they requested, but CMS could not find correct content (category, product, page) with the provided URL-key. 

404 Page Not Found is also important as it covers any broken or dead links on your website. Your clients who click that broken link won’t be redirected to the wrong page. Instead, they’ll get an error message “Page Not Found,” and can go back and start once again. 

So, if you decide to build a new site, it’s recommended to create an informative and well-designed Magento 404 page. It is possible to create a custom 404 error page which may include a hero image, site map, witty description, search form, etc. 

Setting up a custom Magento 404 page with useful links and a search option will:

  1. Decrease bounce rate and keep clients at your site
  2. Improve customer engagement and increase sales
  3. Alleviate the negative effect of stumbling on a non-existent page 

So, creative branded custom 404 pages will be beneficial for both customers and retailers.

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

How to setup 404 error in Magento?

Before we begin the configuration, it is necessary to check what 404 page is set in your Magento store by default. 

Step #1: navigate to Store -> Settings -> Configuration.

stores settings configuration

Step #2: expand General tab and select Web.

cms no route page

 

Step #3: expand Default Pages and see the CMS No Route Page field. 

404 pages settings

It is most advisable to leave the system value for this configuration, but if you wish to alter the default settings and set up that your Magento 404 redirect customers to the homepage or any other CMS or product page, select the corresponding option from the following drop-down list. 

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

Now we can commence to set up a Magento 404 page template.

Step #1: navigate to Content -> Pages.

content pages

Step #2: select the 404 Not Found page (url key no-route) and open it in Edit mode. 

edit 404 page

Step #3: configure your Magento 404 page 

404 page sections

Expand the Content section. Here you can modify Content Heading and the body of your 404 page not found content. The text editor in the body section allows to insert bullet and numbered lists, image and links. 

Below is an example of how we altered a 404 page for our Magento store. 

 custom 404 page magento

Magento also allows to insert different types of widgets into your 404 page, which turns this error page into an additional marketing tool. 

insert widget magento 404

 

To create a widget for Magento 404, press the widget icon in the content section. Then, select the widget type and perform the necessary configurations. When done, press Insert Widget button. 

select widget type magento 404

magento 404 widget example

Step #4: expand the Design section to change the 404 page layout.

design 404 page magento

Select the layout (empty, 1 column, 2 columns or 3 columns) in the Layout field. 

To delete the containers and blocks you do not need, enter the following code into Layout Update XML field:

Delete header container:

Delete footer container:

Delete search box block:

Delete navigation menu block:

Delete Compare product block:

Delete Wishlist block:

Andrey_Dubina
Partner With Us Let's discuss how to grow your business. Get a Free Quote.
Talk to Andrey

Delete copyright block:

In our case, we wrote the following code into the Layout Update XML field:

When you are done, press Save button in the upper right corner.

404 magento altered layout

 

Step #4: flush the cache in order to see the changes you made for your 404 page.

magento webdesign

Magento 2 Webdesign

Take your online store to the next level with BelVG Magento webdesign

Visit the page

How to create a noRoute processor?

Magento allows to add a custom noRoute processor. For instance, instead of showing the 404 page, you can direct the user to the search page where the query path will be query content.

In order to add a new noRoute processor, add the following code into your module in etc/frontend/di.xml file:

Now, create your noRoute processor and add the logic that will execute in the event of the handler call. For instance:

As a result, you will get the 404 noRoute page that you created without the custom development solution.

Wrapping it up

All in all, we hope our article was rather informative and useful. You learned about an HTTP status code notion, what role do status codes play in a website operation and what each status code type serves for. Moreover, you found out the main opportunities of 404 Page Not Found for advancing your ecommerce business. In addition, you discovered how to create and customize your Magento 404 Page that will help boost your sales and engage customer experience. 

Have you created your Magento 404 Page using our guide? Have you decreased the bounce rate or improved the customer engagement level? Share your experience with us. 

Still have questions? Want to share your opinion? Feel free to leave us a comment!

Magento store.belvg.com

Magento 2 Extensions

Take your online store to the next level with BelVG Magento extensions

Visit the page

Looking for a reliable Magento custom development partner? BelVG can help!


Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

top
BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *