Last edited February 26, 2009

404.liquid This post is outdated

I am very happy that we can design our own 404 page and have tried to stay in the vision theme but oh my, how ugly does my 404 page looks! The menu is centered, the "logo" has an ugly background, the "Sorry, we cannot find the page you requested" is still in red despite my attempts to have it in white... This is the code I used if fellow vision users are interested.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;

    <meta content="text/html;charset=UTF-8" http-equiv="content-type" />
    <title>Sorry, we cannot find the page you requested</title>
    <style type="text/css">
      body {
        margin: 0;
        text-align: center;
        font: 1em/1.3em "Lucida Grande", Arial, Arial, sans-serif; 
        background-color: #efefef ;
      div.outer {
        font-size: 75%;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 600px;
        height: 300px;
        margin-left: -400px; 
        margin-top: -150px;
      .dialog { 
        padding: 0;
        background-color: white;
        border-top: 1px solid #ddd;
        border-right: 1px solid #ccc;
        border-left: 1px solid #ddd;
        border-bottom: 1px solid #ccc;
      div.error {
        margin-left: 0px;
        padding-left: 3px;
        border-left: 2px solid #aaa;
        overflow: auto;
        background: #eee;
      h1 {
        font-size: 100%;
        background: #000;
        color: #fff;
        margin: 0;
        padding: 5px 10px;
      .block {
        text-align: left; 
        width: 500px; 
        margin: 0 auto;
        margin-top: 2em;
      h1 span {
        float: right;
        font-size: 75%;
        color: #666;



404 Sorry, we cannot find the page you requested

The requested page does not exist on our servers. This could be the result of an old link or incorrect markup. Please contact us if you cannot find the product you were looking for at info@bebecannelle.com.

<form method="get" action="{{ shop.url }}/search" accept-charset="utf-8">

Alternatively, you may want to try the search box below.

<input name="q" value="{% if handle %}{{ handle }}{% else %}Search...{% endif %}" type="text" onfocus="if(this.value == 'Search...') { this.value = '' }" /> <input value="Search" type="submit" /> </form>

If you reached this notice by clicking on a link from another site, please notify the webmaster of the site you just came from that a link is broken.

Back to {{ shop.name }} | previous page

</body> </html>
Again, I feel bad asking for unpaid advice so feel free to ignore me. At least you can compare your code to mine. Other half made fun of my page and said it didn't look professional at all ;-)
Fanny http://www.bebecannelle.com
Last edited February 26, 2009


The documentation on this is lacking. I wish someone would update the wiki on this, because the instructions would be simple. It would take 2 minutes, but I just have 1… ;-)

Here’s what you probably should do… remove the layout tag.

Replace everything in 404.liquid with something as simple as this:

<h2>Oups, there's nothing here.</h2>
<form action="{{ shop.url }}/search" method="get" accept-charset="utf-8">
    <input type="text" name="q" value="{% if handle %}{{ handle }}{% else %}Search...{% endif %}" onfocus="if(this.value == 'Search...') { this.value = '' }" />
    <input type="submit" value="Search"/>

That way, the template will use the layout you already have for your other templates. That way, 404.liquid will behave just like your other templates.

Working from this will be easier…

Style accordingly by adding rules to your stylesheet.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
February 26, 2009

Fabulous! This how it looks (attached). I highly recommend the others to do the same if they are struggling to get something nice. just remove everything and add Caroline’s code.

Thank you again.

404new thumb
Fanny http://www.bebecannelle.com
TanyaPP Member
February 26, 2009

Thanks Caroline!

I had this on my ‘to do’ list and after just a couple of minutes of fiddling it is now crossed off!!