Enhance Magento 404 page

404_cover

Magento default installation already has a predefined custom 404 page (no-route). But is it enough to help visitor/customer get back on right track!?. Let’s look over a few examples of custom designed 404 pages. http://centar-alata.hr/404, https://github.com/404, http://www.bluedaniel.com/404, http://www.casino-lemonade.com/404/ – as you can see, it can be funny, creative or you can take advantage of this “case” and try to engage potential customer. Here are a few quick and dirty ideas on how to reuse custom 404 page in Magento and try to serve specific content on it.

Under Magento administration we can manually set default 404 page template. System -> Configuration -> General -> Web -> Default Pages -> CMS No Route Page. Here you can add any previously created CMS page (Customer Services for example).

Default 404 page settings

Or you can use more specific content (search form, store sitemap, contact form, specific store categories with promoted products…).

We can use layout update via CMS -> Pages -> 404 not found -> Design -> Layout Update XML. But, we want more controls and we will edit template files. Only thing you can change here is Page Layout, I will use 1 Column page.

Page settings

Default 404 page.

Default 404 page

Now we need to have access to layout and template files or your current theme, first we will start with cms.xml app/design/frontend/yourpackage/yourtheme/layout/cms.xml in my example path is app/design/frontend/base/default/layout/cms.xml.

Open cms.xml in favorite editor go to line 73 or find

<cms_index_noroute translate="label">

Little cleaning

<cms_index_noroute translate="label">
        <label>CMS No-Route Page</label>
        <reference name="content">
            <remove name="page_content_heading"/>
            <remove name="cms.wrapper"/>
        </reference>
    </cms_index_noroute>

Blank 404 page

Clean layout, and now we can add specific category listing with products, or we can create new category which will contain only products for 404 landing page. We can also create Catalog Price Rules for 404 page category and add some compensation through discount…

    <cms_index_noroute translate="label">
        <label>CMS No-Route Page</label>
        <reference name="content">
            <remove name="cms.wrapper"/>
            <block type="catalog/product_list" name="featured" template="catalog/product/list.phtml" after="page_content_heading">
                <action method="setCategoryId"><category_id>15</category_id></action>
                <action method="setColumnCount"><column_count>5</column_count></action>
                <action method="setDefaultGridPerPage"><limit>15</limit></action>
            </block>
        </reference>
    </cms_index_noroute>

404 page category listing

Željko has already written about a slightly different approach trough CMS 404 page content editing http://inchoo.net/ecommerce/magento/last-things-first/.

In most cases 404 pages always have some kind of search form, we can use 2 approaches, simple quick search or advanced search form.

Quick search:

<cms_index_noroute translate="label">
        <label>CMS No-Route Page</label>
        <reference name="content">
            <remove name="cms.wrapper"/>
            <block type="core/template" name="top.search" as="topSearch" template="catalogsearch/form.mini.phtml"/>
        </reference>
    </cms_index_noroute>

Quick search

Now we will try to use advanced search, in this case we need to create new template for advanced search form. app/design/frontend/base/default/template/catalogsearch/advanced/form.phtml – I will simply duplicate this template and give it a name 404search.phtml, open that file and on line 38 find

<form action="<?php echo $this->getSearchPostUrl() ?>" method="get" id="form-validate">

Replace with

<form action="<?php echo $this->getUrl('catalogsearch/advanced/result'); ?>" method="get" id="form-validate">

Open cms.xml and add some magic

    <cms_index_noroute translate="label">
        <label>CMS No-Route Page</label>
        <reference name="content">
            <remove name="cms.wrapper"/>
            <remove name="page_content_heading"/>
            <block type="catalogsearch/advanced_form" name="catalogsearch_advanced_form" template="catalogsearch/advanced/404search.phtml"/>
        </reference>
    </cms_index_noroute>

voila

Advanced Search

One more idea is to add a contact form where users can submit a message if they need some help or cannot find something over and over.

Again we need to edit .phtml file, app/design/frontend/base/default/template/contacts/form.phtml and create duplicated template, my name was 404form.phtml.
Open it and around line 31 find:

<form action="<?php echo $this->getFormAction(); ?>" id="contactForm" method="post">

replace with:

<form action="<?php echo Mage::getUrl(); ?>contacts/index/post/" id="contactForm" method="post">

Now edit cms.xml

    <cms_index_noroute translate="label">
        <label>CMS No-Route Page</label>
        <reference name="content">
            <remove name="page_content_heading"/>
            <block type="core/template" name="contactForm" template="contacts/404form.phtml"/>
        </reference>
    </cms_index_noroute>

Contact Form

This article is for demonstration purposes only and to give you ideas how to spice up a little, boring 404 page.

Good luck!


About Stanislav Mihic

Frontend Developer

Stanislav is specialized in Web and Frontend Development with technologies such as JavaScript, CSS, and HTML using agile practices.

Read more posts by Stanislav / Visit Stanislav's profile

8 comments

  1. Javlja mi za nekoliko strana grešku 404. Programer mi je rekao, da je ta greška zbog toga jer kod nekih proizvoda imam isto ime proizvoda. Naslov sam promijenila kod proizvoda koji su mi u du?anu aktivni(zna?i imaju status vidni) ali mi se greška i dalje ponavlja npr. ovdje http://www.zzuza.com/nucelle-zenska-denarnica-crna-2521.html. Ustanovila sam, da mi se ako u google upišem rije? npr denarnica crna i izlistaju slike pokazuju slike koje imam u du?anu ozna?ene da se ne vide (imam ih ali nisu recimo aktivirane). Zanima me kako bi se dalo tj. dali bi se sa gore opisanim dalo napraviti, da se ta greška ne ponavlja ukoliko se naziv proizvoda ponavlja (ako je o tome rije?) tj kako onemogu?iti, da se u googlu ne izlista slika proizvoda koji je u admin panelu onemogu?en. Ima li kakvo riješenje za to ili možda extension koji bi jednostavno riješilo oboje? Unaprije hvala na odgovoru.

  2. @ Andy
    “… given that Google penalises sites with lots of 404 errors. …”

    As far as I’m aware – there are No Penalties for sites returning 404’s.
    Technically – if the page is gone, it should be a 410 response – but G accepts 404’s fine.

    There is a downside to 404’s – it means that the page is not there, thus nor is the content … including any links from that URL.
    This means that PR/Value to that page is “lost” and PR/Value flow from that URL is “lost”.

    But that is Not a Penalty!
    (This is covered (and has been for years) by Google numerous times in their forums, blog and docs)

  3. Hi guys

    Another great tutorial but have you wrote any articles on how to redirect disabled products to either their category page or even the home page of a web site?

    I’m looking to code something like this but not got there fully yet and I think something that logs 404 calls but then either redirects to category or web site root via 301 would be a really useful extension for all given that Google penalises sites with lots of 404 errors.

    Thanks

  4. Thanks
    no add in cms.xml but
    i add

    <reference name="content">
    <block type="catalogsearch/advanced_form" name="catalogsearch_advanced_form" template="catalogsearch/advanced/404search.phtml"/>
     </reference>

    in admin cms >page > no-route >design tab ,because I nead text before advanced search in 2 languages.

  5. After I add this xml, my website become blank page. Any idea can help me about this?

    CMS No-Route Page

    I am using Magento 1.6.1

  6. Great idea to combine multiple solutions of an alternative 404 page into one blogpost.

    Although the default 404 paga is quiet boring it’s a good start for inspiration.
    1. it tells you that the page you where looking for cannot be found
    2. it gives a couple of suggestions what you can do from here
    3. it tracks attention with some ads.

    The improvements shown in this blog should be added to not replacing the current page.
    But just like every other Magento page one should think beforehand what to do with it and design it.

    thanks for the great post.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.