{"id":15901,"date":"2019-07-23T13:18:43","date_gmt":"2019-07-23T11:18:43","guid":{"rendered":"https:\/\/belvg.com\/blog\/?p=15901"},"modified":"2026-05-15T17:26:21","modified_gmt":"2026-05-15T15:26:21","slug":"how-to-create-custom-404-page-in-magento-2","status":"publish","type":"post","link":"https:\/\/belvg.com\/blog\/how-to-create-custom-404-page-in-magento-2.html","title":{"rendered":"How to Create Magento 2 Custom 404 Page in 2026"},"content":{"rendered":"\n

Do you have any idea what an HTTP status code is? Have you ever seen 404 Page Not Found? What role does it play for any website?<\/p>\n

<\/p>\n

In this article, we will describe what an HTTP status code is 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 the 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 the back office and programmatically. As a result, you will improve your conversions, making your ecommerce business more successful than it is now.<\/p>\n

Table of contents:<\/b><\/p>\n

What is an HTTP response code?
\n<\/a>What is a 404 page?
\n<\/a>How to set up a 404 error in Magento?
\n<\/a>How to create a noRoute processor?<\/a><\/p>\n

What is an HTTP response code?<\/h2>\n

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 has been 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 response 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?<\/a> article.<\/p>\n

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:<\/p>\n

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

    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.<\/p>\n

    <\/a>
    \"magento

    Magento Development Services<\/h3>

    Take your store to the new level with BelVG Magento development services<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n

    What is a 404 page?<\/h2>\n

    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 that the webpage was removed or moved and the URL wasn’t changed, respectively, or that the person made a mistake typing the URL.<\/p>\n

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

    404 Page Not Found is also important as it covers any broken or dead links on your website.<\/p>\n

    In 2026, 404 pages also play a role in technical SEO and Core Web Vitals. A fast-loading custom 404 page helps users stay on the site longer and gives search engines a clearer signal that the missing page is handled correctly.<\/p>\n

    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.<\/p>\n

    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.<\/p>\n

    Setting up a custom Magento 404 page with useful links and a search option will:<\/p>\n

      \n
    1. Decrease bounce rate and keep clients on your site<\/li>\n
    2. Improve customer engagement and increase sales<\/li>\n
    3. Alleviate the negative effect of stumbling on a non-existent page<\/li>\n<\/ol>\n

      So, creative branded custom 404 pages will be beneficial for both customers and retailers.<\/p>\n

      \"Andrey_Dubina\"

      Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Andrey<\/a><\/div>\n

      How to set up a 404 error in Magento?<\/h2>\n

      Before we begin the configuration, it is necessary to check what 404 page is set in your Magento store by default.<\/p>\n

      Step #1<\/strong>: navigate to Store -> Settings -> Configuration.<\/p>\n

      \"stores<\/a><\/p>\n

      Step #2<\/strong>: expand the General tab and select Web.<\/p>\n

      \"cms<\/a><\/p>\n

       <\/p>\n

      Step #3<\/strong>: expand Default Pages and see the CMS No Route Page field.<\/p>\n

      \"404<\/a><\/p>\n

      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.<\/p>\n

      \"Andrey_Dubina\"

      Partner With Us <\/h3>Let's discuss how to grow your business. Get a Free Quote.<\/span><\/div> Talk to Andrey<\/a><\/div>\n

      Now we can commence to set up a Magento 404 page template.<\/p>\n

      Step #1<\/strong>: navigate to Content -> Pages.<\/p>\n

      \"content<\/a><\/p>\n

      Step #2<\/strong>: select the 404 Not Found page (URL key no-route) and open it in Edit mode.<\/p>\n

      \"edit<\/a><\/p>\n

      Step #3<\/strong>: configure your Magento 404 page<\/p>\n

      \"404<\/a><\/p>\n

      Expand the Content section. Here you can modify the Content Heading and the body of your 404 page not found content. The text editor in the body section allows the insertion of bullet and numbered lists, images, and links.<\/p>\n

      Below is an example of how we altered a 404 page for our Magento store.<\/p>\n

      \"custom<\/a><\/p>\n

      Magento also allows you to insert different types of widgets into your 404 page, turning this error page into an additional marketing tool.<\/p>\n

      Modern Adobe Commerce and Magento Open Source stores often use 404 pages to recommend popular products, categories, or recent searches. It helps recover lost traffic and improves user navigation.<\/p>\n

      \"insert<\/a><\/p>\n

      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 the Insert Widget button.<\/p>\n

      \"select<\/a><\/p>\n

      \"magento<\/a><\/p>\n

      Step #4<\/strong>: expand the Design section to change the 404 page layout.<\/p>\n

      \"design<\/a><\/p>\n

      Select the layout (empty, 1 column, 2 columns, or 3 columns) in the Layout field.<\/p>\n

      To delete the containers and blocks you do not need, enter the following code into the Layout Update XML field:<\/p>\n

      Delete header container:<\/p>\n

      <referenceContainer name=\"header.panel\" remove=\"true\" \/>\r\n<\/pre>\n
      Delete footer container:<\/p>\n
      <referenceContainer name=\"footer-container\" remove=\"true\"\/><\/pre>\n
      Delete search box block:<\/p>\n
      <referenceBlock name=\"top.search\" remove=\"true\"\/><\/pre>\n
      Delete navigation menu block:<\/p>\n
      <referenceBlock name=\"navigation.sections\" remove=\"true\"\/><\/pre>\n
      Delete Compare product block:<\/p>\n
      <referenceBlock name=\"catalog.compare.sidebar\" remove=\"true\"\/>\r\n<\/pre>\n
      Delete Wishlist block:<\/p>\n
      <referenceBlock name=\"wishlist_sidebar\" remove=\"true\" \/><\/pre>\n
      Delete copyright block:<\/p>\n
      <referenceBlock name=\"copyright\" remove=\"true\"\/>\r\n<\/pre>\n
      In our case, we wrote the following code into the Layout Update XML field:<\/p>\n
      <container name=\"body\">\r\n<referenceContainer name=\"header.panel\" remove=\"true\" \/>\r\n<referenceContainer name=\"footer-container\" remove=\"true\"\/>\r\n<referenceBlock name=\"top.search\" remove=\"true\"\/>\r\n<referenceBlock name=\"navigation.sections\" remove=\"true\"\/>\r\n<referenceBlock name=\"catalog.compare.sidebar\" remove=\"true\"\/>\r\n<referenceBlock name=\"wishlist_sidebar\" remove=\"true\" \/>\r\n<referenceBlock name=\"copyright\" remove=\"true\"\/>\r\n<\/container>\r\n<\/pre>\n
      When you are done, press the Save button in the upper right corner.<\/p>\n
      \"404<\/a><\/p>\n
       <\/p>\n
      Step #4<\/strong>: flush the cache in order to see the changes you made to your 404 page.<\/p>\n
      <\/a>
      \"magento
      Magento 2 Webdesign<\/h3>
      Take your online store to the next level with BelVG Magento webdesign<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
      How to create a noRoute processor?<\/h2>\n
      Magento allows adding 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 the query content.<\/p>\n
      In order to add a new noRoute processor, add the following code into your module in the etc\/frontend\/di.xml<\/strong> file:<\/p>\n
      <type name=\"Magento\\Framework\\App\\Router\\NoRouteHandlerList\">\r\n  <arguments>\r\n      <argument name=\"handlerClassesList\" xsi:type=\"array\">\r\n          <item name=\"custombvg\" xsi:type=\"array\">\r\n              <item name=\"class\" xsi:type=\"string\">BelVG\\CustomNoRoute\\App\\Router\\NoRouteHandler<\/item>\r\n              <item name=\"sortOrder\" xsi:type=\"string\">80<\/item>\r\n          <\/item>\r\n      <\/argument>\r\n  <\/arguments>\r\n<\/type>\r\n<\/pre>\n
      Now, create your noRoute processor and add the logic that will execute in the event of the handler call. For instance:<\/p>\n
      BelVG\\CustomNoRoute\\App\\Router\\NoRouteHandler\r\nnamespace BelVG\\CustomNoRoute\\App\\Router;\r\nclass NoRouteHandler implements \\Magento\\Framework\\App\\Router\\NoRouteHandlerInterface\r\n{\r\n\/***** ………….. *******\/\r\n  public function process(\\Magento\\Framework\\App\\RequestInterface $request)\r\n  {\r\n      $requestValue = ltrim($request->getPathInfo(), '\/');\r\n      $request->setParam('q', $requestValue);\r\n      $request->setModuleName('catalogsearch')->setControllerName('result')->setActionName('index');\r\n      return true;\r\n  }\r\n}\r\n<\/pre>\n
      As a result, you will get the 404 noRoute page that you created without the custom development solution.<\/p>\n
      In 2026, it is also recommended to monitor 404 errors regularly through Google Search Console and analytics tools. It helps identify broken internal links, outdated URLs, and indexing problems before they affect conversions or SEO performance.<\/p>\n
      Wrapping it up<\/h2>\n
      All in all, we hope our article was rather informative and useful. You learned about the HTTP status code notion, what role status codes play in a website’s 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 improve customer experience.<\/p>\n
      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.<\/p>\n
      Still have questions? Want to share your opinion? Feel free to leave us a comment!<\/p>\n
      <\/a>
      \"Magento
      Magento 2 Extensions<\/h3>
      Take your online store to the next level with BelVG Magento extensions<\/p>Visit the page<\/span><\/a><\/div><\/div><\/div>\n
      Looking for a reliable Magento custom development<\/a> partner? BelVG can help!<\/p>\n\n","protected":false},"excerpt":{"rendered":"How to create custom Not Found 404 page and noRoute handler in Magento 2 ","protected":false},"author":42,"featured_media":30632,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[474,389,524],"tags":[],"class_list":["post-15901","post","type-post","status-publish","format-image","has-post-thumbnail","hentry","category-ecommerce","category-magento2-development","category-magento-speed-optimization","post_format-post-format-image"],"acf":[],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t