How to Create Custom 404 Page in Magento 2

May 31, 2018269Aleksei Grigorenko
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:

image14

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.

image15

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.

image13

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.

image10

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

image8

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

image16

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:

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.

image2

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

image6

The full version of the module is available here.



Post a new comment

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