How to customise the 404 Page Not Found in Magento 2

There’s a page on an eCommerce store that can often get visited frequently by your customers that you probably never think about. And that is the 404 Page Not Found page. It’s a page presented to a customer whenever they click on a link to a product or page that has moved or no longer exists. Well in this video, I’m going to show you how to build a fancy custom 404 page that acts more like a sales funnel rather than a dead-end.

You may or may not recognise this page, but it’s the default 404 Page Not Found design. As you can see, it’s a bit bland so no-one’s going to read it and there’s no real Call-to-Action.

Well by the end of this video, you’ll be able to turn your 404 Page Not Found design in this!

Page breakdown

It might not be clear just yet, but from a design point of view I’ve broken this page down into 3 sections.

Section 1 (404 Notification)

The first section is for the 404 Notification. As you can see, the page is a little bit more obvious to your customer with the large fancy 404 animation. And in order to add a bit of personality to your company’s brand I added: “It looks like our deals were so good, they broke something…”

Section 2 (Call-to-Action)

The second section is where I’ve added some Call-to-Actions. These act as useful sign-posts to help the customer quickly get back on track. I’ve chosen to go with some super-generic links here, but these could be anything you think is important to your own eCommerce store.

You should also note that the HTML I’ve used to create the phone number link is functional on a mobile device. So if I clicked on it on a mobile phone, it would ask if I wanted to ring the number. Thus saving the need to copy and paste the number.

Section 3 (Latest Offers)

The final section is a showcase to highlight latest offers. It actually uses a default widget within the backend of Magento 2. I simply discounted some products and added them to my Sale Category. Then generated a widget to display items from that category.

And just to add a cherry on the top of this cake, the new design is mobile responsive. So as the screen shrinks to fit the device, the design is dynamically optimised to fit the space.

Okay, so if this looks like something you’d love to have on your store then let’s get to it.

Building the 404 Page Not Found page

Create a new page

First things first. Let’s log into the backend of Magento and select Content , Pages and then Add New Page .

Now I’ll start by adding a Page Title : “Sorry, this page no longer exists (404 Not Found)” .

Next, I’ll expand the Content section and hide the Editor. This step just makes it easier to copy and paste code. Plus, I find that the editor can sometimes break code that I paste when I try to re-edit it at a later date. You can actually turn this off completely by going into Stores > Configuration > General > Content Management and changing “Enable WYSIWYG Editor” to either “Disabled by Default” or “Disabled Completely” .

Next, I’m going to copy the code the I’ve pre-written and paste into into the Content Box. You can copy the exact code yourself from the article.

Optimised HTML/CSS

<style>@import url(https://fonts.googleapis.com/css?family=Montserrat:400,600,700);@import url(https://fonts.googleapis.com/css?family=Catamaran:400,800);.error-container>span.four:after,.error-container>span.four:before,.error-container>span.zero:after,.error-container>span.zero:before{content:'';display:block;position:absolute}.error-container{text-align:center;font-size:106px;font-family:Catamaran,sans-serif;font-weight:800;margin:20px 15px}.error-container>span{display:inline-block;position:relative}.error-container>span.four{width:136px;height:43px;border-radius:999px;background:linear-gradient(140deg,rgba(0,0,0,.1) 0,rgba(0,0,0,.07) 43%,transparent 44%,transparent 100%),linear-gradient(105deg,transparent 0,transparent 40%,rgba(0,0,0,.06) 41%,rgba(0,0,0,.07) 76%,transparent 77%,transparent 100%),linear-gradient(to right,#d89ca4,#e27b7e)}.error-container>span.four:after,.error-container>span.four:before{border-radius:999px}.error-container>span.four:before{width:43px;height:156px;left:60px;bottom:-43px;background:linear-gradient(128deg,rgba(0,0,0,.1) 0,rgba(0,0,0,.07) 40%,transparent 41%,transparent 100%),linear-gradient(116deg,rgba(0,0,0,.1) 0,rgba(0,0,0,.07) 50%,transparent 51%,transparent 100%),linear-gradient(to top,#99749D,#B895AB,#CC9AA6,#D7969E,#E0787F)}.error-container>span.four:after{width:137px;height:43px;transform:rotate(-49.5deg);left:-18px;bottom:36px;background:linear-gradient(to right,#99749D,#B895AB,#CC9AA6,#D7969E,#E0787F)}.error-container>span.zero{vertical-align:text-top;width:156px;height:156px;border-radius:999px;background:linear-gradient(-45deg,transparent 0,rgba(0,0,0,.06) 50%,transparent 51%,transparent 100%),linear-gradient(to top right,#99749D,#99749D,#B895AB,#CC9AA6,#D7969E,#ED8687,#ED8687);overflow:hidden;animation:bgshadow 5s infinite}.error-container>span.zero:before{transform:rotate(45deg);width:90px;height:90px;background-color:transparent;left:0;bottom:0;background:linear-gradient(95deg,transparent 0,transparent 8%,rgba(0,0,0,.07) 9%,transparent 50%,transparent 100%),linear-gradient(85deg,transparent 0,transparent 19%,rgba(0,0,0,.05) 20%,rgba(0,0,0,.07) 91%,transparent 92%,transparent 100%)}.error-container>span.zero:after{border-radius:999px;width:70px;height:70px;left:43px;bottom:43px;background:#FDFAF5;box-shadow:-2px 2px 2px 0 rgba(0,0,0,.1)}.screen-reader-text{position:absolute;top:-9999em;left:-9999em}@keyframes bgshadow{0%{box-shadow:inset -160px 160px 0 5px rgba(0,0,0,.4)}45%,55%{box-shadow:inset 0 0 0 0 rgba(0,0,0,.1)}100%{box-shadow:inset 160px -160px 0 5px rgba(0,0,0,.4)}}button,html,input,select,textarea{font-family:Montserrat,Helvetica,sans-serif;color:#2f4f4f}.zoom-area{max-width:490px;margin:30px auto;font-size:19px;text-align:center}*{box-sizing:border-box}.column{float:left;width:50%;padding:10px}.row:after{content:"";display:table;clear:both}@media screen and (max-width:1150px){.column{width:100%}.error-container{display:none}}.list-404 li{list-style:circle}</style>
<div class="row"> <div class="column"> <p class="zoom-area">It looks like our deals were <b>so good</b> they broke something...</p><section class="error-container"> <span class="four"><span class="screen-reader-text">4</span></span> <span class="zero"><span class="screen-reader-text">0</span></span> <span class="four"><span class="screen-reader-text">4</span></span> </section> </div><div class="column"> <h2>Here's some useful links</h2> <ul class="list-404"> <li>Back to the <a href="/"><b>Homepage</b></a></li><li>Visit <a href="/customer/account/login/"><b>My Account</b></a></li><li>Try an <a href="/catalogsearch/advanced/"><b>Advanced Search</b><a/></li><li>Contact us on <a href="tel:+441234456789"><b>01234 456 789</b></a></li></ul> <p>You can also check out some of our latest offers below...</p></div></div><hr><h2>Latest Offers (Up to 20% off!)</h2>

Add the Catalog Products List widget

The next step is to add the Catalog Products List Widget. To do this, I’m going to create a new line under the code that I just pasted. Then I’m going to press the Insert Widget… Button.

From the dropdown box, I’ll select Catalog Products List . You can change these variables to whatever you think is best. But to copy the demo, I’m only going to change “Number of Products to Display” to “5” .

As I mentioned earlier, I already have a selection of items on Sale in my Sale Category. So under conditions I simply need to do the following:

  1. Click the green plus-icon
  2. Select Category from the Dropdown
  3. Click on the 3 dots
  4. Then click on the blue table-icon
  5. Now just click on the category I want to use
  6. And click the green tick-icon to confirm

The final step now is just to hit the Insert Widget button. As you can see, it’s pasted some new code at the bottom of the page – Wrapped in curly brackets. That’s the widget I just created.

Activate the page

By default, the page will use the “2 columns with right bar” layout. In the demo, I used a “1 column” layout. So to change this, just expand the Design section. And then change Layout to “1 column” .

Now it’s time to hit the “Save Page” button.

Setting the 404 Page

Now that the new 404 page has been created, it needs to be set as the default page within Magento.

This is simply done by going into Stores > Configuration > General > Web > Default Pages . To make a change, you first need to uncheck the box that says “Use system default” . This will enable you to edit the field. Then from the dropbox choose the new page, which is indicated by the title. I my case, I chose the page name of “Sorry, this page no longer exists (404 Not Found)” .

Finally, hit the “Save config” button.

Clear the cache

The final step is to clear the cache. So head over to System > Cache Management . You don’t need to clear the entire Magento Cache. Selecting Configuration , Layouts , Blocks HTML output and Page Cache should do the job. So once they’re selected just hit the submit button above the table.

Now, if I go to my website and type in a URL key that doesn’t exist, I should see the new page that I’ve created.

404 Page Not Found Summary

So I want to give a shoutout to Ricardo, who’s original 404 design inspired me to create this for you to enjoy. A link to his work can be found in the article.

Don’t forget that all of the code that I used in this video can also be found in the article, so you can just go straight ahead and copy and paste it. Obviously, the page makes a great starting point for you to mould into your own. Just think carefully about the links your customers might find important if they were to land on this page. Feel free to drop a comment below letting me know the changes you’re going to make.