How to Create Custom 404 Page in Magento 2

404 Page Not Found is one of the most popular errors that occur when the web or store is active, but a specific page is not active or does not exist. Whenever customers view 404 Page Not Found, they can either leave your store without completing their order or end up not using your website at all. Hence, creating a custom 404 page in Magento 2 is a better way to keep the customers engaged with your powerful Magento 2 website. The more time customers spend on your store site, the more sales, and conversions.

Here is the default Not Found 404 Page in Magento:

create custom 404 page in Magento 2 image

In this article, I will instruct you to customize Magento 2 404 Page Not Found, following 4 steps!

Step 1: Access Your Magento Admin Panel

From the Admin panel, navigate to Store > Configuration > General > Web > Default Pages.

Then, set the CMS No Route Page to 404 Not Found, as below picture:

create custom 404 page in Magento 2 image 1

Step 2: Find The 404 Not Found Edit Page

From the Admin panel, go to Content > Pages, then find the 404 Not Found page in the gird.

Click to the Select drop-down list, and select the Edit option.

create custom 404 page in Magento 2 image 2

The 404 Not Found edit page will be displayed:

create custom 404 page in Magento 2 image 3

Step 3: Edit The Default 404 Not Found Page

In the Page Title field, clear 404 Not Found and enter the title you want.

Click to the Content, Search Engine Optimization, Pages in Website, Design, Custom Design Update section to edit the 404 Not Found Page according to your requirements.

Copy This HTML Source to content of 404 page.

404 page not found source

Step 4: Click To The Save Button

After finishing your configuration, remember to click to the Save button.

Note: In case, you have multi-stores, and you want to have many Not Found 404 pages with different contents, so you can create a new page and specify it in the No Route Page settings.

To set up a new CMS page, it is important to clarify Design > Layout. In case you want to insert the html code into the content of the page, you need to disable the WYSIWYG-editor. The default layout is empty.

Then, switch to the necessary store in No Route Page settings and select the new CMS page.

After taking the above steps, you will get a new 404 page as you want.

Create Your Own Custom No Router Handler

Another striking feature of Magento 2 is allowing the merchants to add their custom noRoute handler. For example, instead set the Not Found 404 Page as a no-route page, you can redirect it to a search page where request path will be the search request. Firstly, you need to insert the following code into the etc/frontend/di.xml file of your module.

<type name="Magento\Framework\App\Router\NoRouteHandlerList">
  <arguments>
      <argument name="handlerClassesList" xsi:type="array">
          <item name="helloworld" xsi:type="array">
              <item name="class" xsi:type="string">Mageplaza\HelloWorld\App\Router\NoRouteHandler</item>
              <item name="sortOrder" xsi:type="string">80</item>
          </item>
      </argument>
  </arguments>
</type>

Then you create your noRoute handler and add the logic which will be executed once the handler is called. Below is a part of the code:

Mageplaza\HelloWorld\App\Router\NoRouteHandler
namespace Mageplaza\HelloWorld\App\Router;
class NoRouteHandler implements \Magento\Framework\App\Router\NoRouteHandlerInterface
{

  public function process(\Magento\Framework\App\RequestInterface $request)
  {
      $requestValue = ltrim($request->getPathInfo(), '/');
      $request->setParam('q', $requestValue);
      $request->setModuleName('catalogsearch')->setControllerName('result')->setActionName('index');
      return true;
  }
}

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

After adding the custom noRoute handler, you will see the following page:

404 page result

Conclusion

Above is the detail instructions of how to create custom 404 Error Page Not Found in Magento 2. In case you have any questions, don’t hesitate to contact us.

Customizing 404 Error Page Not Found is a great way to keep customers glued to your Magento 2 website, boost the sale and conversion rate of your store. If you are looking for a partner which helps you to grow your business, Mageplaza is here to help you!

Explore Magento 2 extensions now!

Comments for How to Create Custom 404 Page in Magento 2



People also searched for

Subscribe

Stay in the know

Get special offers on the latest news from Mageplaza.

Earn $10 in reward now!

Earn $10 in reward now!

comment
iphone
go up