404 page: How to create and customize it effectively in Magento 2?

25-Outstanding-404-Page-Examples-You-Have-to-See

In Magento 2 e-commerce websites, the “404 Page Not Found” page (or the “404 Page” in short) will appear when you try to reach a specific webpage but it cannot be found (being moved or eliminated).

From our experience, almost all of the Magento 2 e-commerce websites will have to face the 404 error. However, the ways they prepare to handle this error are very different. While some just show the 404 Page to inform their customers of the non-existing page, others take this chance to impress their visitors, introduce new/ outstanding products. Or they even create something fun to entertain the viewers.

In this blog post, we will show you the basic knowledge of creating and customizing a new Magento 2 404 Page for your Magento store.

How To Add The 404 Page In Magento 2 E-commerce Websites?

  • Step 1: Go to the Admin Panel, navigate to CONTENT and choose Pages (under Elements). Then, click on Add New Page.

magento 2 404 page

Then, click on Add New Page.

create 404 page in magento 2

  • Step 2: Add the content for your Magento 2 404 Page
  1.  You must enable the page by selecting Yes in Enable Page.
  2. Set the Page Title (e.g. 404 Page Not Found).
  3. Add content to the page (including Content Heading and the description).
  4. Expand the Search Engine Optimization section, set URL Key, Meta Title/ Keywords/ Description that will be displayed in the search engine result pages (SERPs).
  5. Select the store view where this 404 page is located in.
  6. Choose the Layout of the page and add Layout Update XML if you want. For a 404 page, its layout is important and based on the concent that the store can choose a proper layout (1, 2 or 3 columns with left or right sidebar).
  7. Finally, set the specific time for Custom Design Update.

set up 404 page in magento 2
Useful Tips To Improve The 404 Page In Your Magento 2 Websites

First, let’s have a look at the default Magento 2 404 Page:

default magento 2 404 page

As you can see, Magento 2 provides us with a very basic 404 page, explaining possible reasons for returning this page, and gives the customers quick links to go back to the previous page or go to the Home page or My Account page. Since this default page looks quite boring, most of the store owners will customize it to match their brand image. Here are some recommendations to create a unique and valuable 404 page for Magento 2 e-commerce websites:

Perfect chance to promote outstanding products

When the customers, unfortunately, go to the 404 page, it would be so pity if you let them go without doing anything. Why don’t you grab this opportunity to draw their attention to your featured products/ best-sellers/ hot items at ease? As a result, the buyers might forget about their bad experience on your site, simultaneously, you can gain some sale conversions from that.

It’s easy to add your new products to the 404 page by adding a widget to the page content:

show products in 404 page magento

Here, you can choose which type of products and number of items displayed as well as how these are shown in front-end.

404 page in magento 2 example

Remember helping customers who haven’t found something they want on your site

Most of the store owners just concern about the causes the 404 error and how to tackle it but forget about the reasons bringing the customers to their site. It’s such a big mistake!

When the visitors try to access a certain page on your site but it returns the 404 page, which means that they want something on your site but can’t get it. Imagine that a buyer wants to buy a luxury item in your collection, but he clicks on the old product page link from the search engine that was changed without redirecting to the new one so that he gave up his intention of buying that product.

If you would do nothing to improve the situation, not only him but also a lot of customers will leave your store like that, and how would your sales be affected? Moreover, if all visitors will leave your site instantly after fetching the 404 error, Google and other search engines will believe that you have a high Bounce rate and give your site lower rankings.

Therefore, we highly recommend you to include a search bar on your Magento 2 404 page. Owing to that, the customers can continue their search directly on your site to get more accurate results.

404 page in magento 2 example

Customizing a 404 Page in Magento 2

We’re going to change the contents to a familiar form. Of course, this depends on your theme but we’re approaching this in a default manner by following these five steps:

1. CHANGE CONTENT HEADING

Content Heading is probably the most noticeable piece of information all users will be represented with. This could be a catchy phrase or funny, so it could ease in away the unpleasing experience. Preferably I would choose a catchphrase that is formatted matching the style and content of the website itself.

2. REPLACE DEFULT CONTENT

Regarding the content of the page, we could use a nice clean up. The content is yours to manipulate. I am choosing to add an image that will represent the not found route. Below that I’m inserting a widget which is going to be configured to show the latest products (labeled as new). I am also including some quick links that are not accessible directly from the header. We are trying to make the 404 page blend in with the rest of the website.

3. ADD 404 PAGE IMAGE

Adding the image and the widget is fairly simple. Click the Insert Image button on the content tab, choose the file from your computer. A suggested image size is 1240×420 pixels. To add the widget that will show the newest products click the Insert Widget option.The way I have it configured is like this.

4. ADD WIDGET

Widget type is a dropdown that has a list of options. You can choose to display a static block, or different type of product collections. Display page control are the toolbars on top and bottom of the product listing. For this example I have that disabled since we’re displaying only 5 products. I have chosen the default new product list template, but there are other options available like showing only the name or image for the collection or switching between grid and list views. Click on Insert Widget and now the content is transformed to something like this

5. CHANGE 404 PAGE CONTENT LAYOUT

Layout is crucial, and every store administrator should use it according to their needs, depending on the content. Possibilities are a full width 1 columns layout, others are combinations of 2 columns with left or right sidebar or 3 columns. Each can play the same part when the content is placed correctly to their containers. Layout can be changed in the design tab.

With so little effort we have transformed the basic 404 page to a useful page that helps your customers but also your store. The possibilities are endless, it really comes to the content creator of your team to pull off an awesome 404 Not Found Page. It could go from simple, yet intuitive and funny to a complex, dynamically created content which requires further development. Either way works, as long as we’re keeping to the principle of using every possible page that our store has to offer.

Level up your website with ArrowHiTech – official partner of Magento

Our own Magento development support services is plus the option for monthly support packages. It is to make sure your online business always remains in top form. And of course, there are countless other developer websites that can be easily found and perused as well.

Our Magento services:

Magento Consulting And Ecommerce Strategy

Magento Website Development

Magento Progressive Web Application Development

Magento Creative Design

Magento Mobile App Development

Magento Customization Services

Magento Integration Services

Magento Migration Services

Magento Upgrade Services

Magento Maintenance Services

Hire Certified Magento Developers

Capture

ArrowHiTech Development Agency

With over 12 years of operation, ArrowHiTech is official Magento’s partner. We has increasingly widened our skills and resources to meet all the requirements of customers all over the world on Web design and development with flexible and reasonable price!

123 Total Views 1 Views Today