How to Create Custom 404 Page in Magento 2

May 31, 20182633
How to Create Custom 404 Page in Magento 2

Sometimes you may need to make changes to the Not Found 404 page in your Magento-based webstore. Such attention to detail can surprise your visitors and make your store even more stylish. Magento 2 provides a simple and yet very flexible tool for editing the 404 page.

Create and Customize a 404 Page

Here is what the default Magento Not Found 404 page looks like:


To customize the Not Found  404 Page you need to go to Store ➔ Configuration ➔ General ➔ Web ➔ Default pages ➔ CMS No Route Page in the Admin panel and check which CMS page is indicated in the settings.


You can find the Not Found page at Content ➔ Pages and edit the page that was specified in the settings. To find the right page, you can use a filter or search by keywords.


It remains only to edit this page according to your requirements. If you don’t want to change the default page, you can set up a new one and specify it in the No Route Page settings. For example, if you use a multistore, the Not Found  404 pages will most likely have different content.

Let’s create a new CMS page. It is important to specify Design ➔ Layout when creating a new page. If you want to insert the html code in the content of the page, disable the WYSIWYG-editor. Empty is used by default.

This resource was used as an example. Copy the code into the content of the CMS page.


After that switch to the necessary store in No Route Page settings and choose the new CMS page.


This would be enough. As a result, you will get a new 404 page.


magento development services

Magento Development Services

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

Visit the page

Creating a custom noRoute handler

Magento also lets you add your custom noRoute handler. As an example, let’s look at an alternative to the Not Found 404 page — redirecting no-route pages to a search page, where request path will be the search request.

To add a new noRoute handler, add the following code to your module in the etc/frontend/di.xml file:

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

Now create your noRoute handler and add the logic that will be executed when the handler is called. Part of the code is shown below.

And that’s it. As a result, you will see the 404 noRoute page created without a custom development solution.


After adding the custom noRoute handler you will get the following result:


The full version of the module is available here.

Need an expert Magento development team? BelVG is here to help you.

Partner With Us Looking for a partner that will help you to grow your business? We are the right company to develop your webstore. Feel free to get in touch with us. We will be happy to discuss your business opportunities and provide you with a Free Quote. Talk to Andrey

Post a new comment

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