Even the best designed stores can lead customers to pages that don't exist any more, and customizing your Not Found page template can be a good way to retain customers who have lost their way.
The content of the Magento's error page is stored in the Magento's CMS tool, so you can start altering content here by navigating to CMS | Manage Pages and locating the 404 Not Found 1 page, as shown in the following screenshot:
In the Content tab, customize your content for the error page. The following example used the Recently Viewed Products widget to display a selection of products the customer may be interested in:
Click on the Save Page button at the top-right corner of the screen and you'll see your new content appear when you try to visit a page that doesn't exist on your store:
To minimize the clutter on this page and help the customer find what they're looking for, you can set the error page's Page Layout under the Design tab in Magento's CMS tool to 1 column, as shown in the following screenshot:
Once again, click on the Save Page button at the top-right corner of your screen to set the changed page layout. Finally, you can add a background image to your error page to further customize it and reassure customers a little. Open your theme's styles.css
file from /skin/frontend/default/m18/css/
and add the following CSS to apply the 404_bg.png
image in /skin/frontend/default/m18/images/
to the error page template:
body.cms-index-noroute .main { background: #fff url("../images/404_bg.png") no-repeat top center; padding-top: 200px; }
Once you have saved the change to the CSS and new image, refresh the error page to see the change take effect, as shown in the following screenshot:
That's it! Your Magento store's custom 404 error page is now complete.