tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 4: page.liquid and 404.liquid

Shopify Theme from Scratch Part 4: let’s set up the page.liquid and 404.liquid tempates!


Today we’re going to be setting up our page.liquid and 404.liquid pages. The page.liquid template is responsible for loading the contents of the pages your create in the Pages section of the admin, and the 404.liquid template loads an error page for when a customer attempts to go to a page that does not exist.

1. Add the Liquid for page.liquid

Open page.liquid. Remove anything that’s there now, and insert the code below.

{{ page.title }}

{{ page.content }}

This will output the page’s title (page.title) and content (page.content).

2. Create a Test page

We’re going to start off by creating a dummy page where we’re going to output the elements that can be generated through the Rich Text Editor (RTE). This is so we can see what they’re going to look like on the actual storefront.

Navigate to Pages in the admin, and click the green “Add page” button. Call it “Test”.

Click the “Show HTML” button (figure 4.1).


Figure 4.1: clicking the Show HTML button will let you insert HTML code into the RTE

To speed up the process a bit, I’ve posted the markup for the Test page below. You could go and manually enter in each heading, blockquote and table using the RTE, but let’s save some time by copying and pasting the code below into your RTE (make sure you’re still in HTML mode). The markup below contains all of the HTML elements that the RTE can generate.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Bold text Italic
test test test
test test test
 test test test

Click the “Show HTML” button again to switch back to normal view. You should see a preview of the HTML markup we just pasted (Figure 4.2). Keep in mind that what you see here may not look like this on the storefront, because the theme’s CSS might affect the styling of these elements.

test page

Figure 4.2: The HTML that we pasted is now previewed in the RTE

Hit Save to create the page.

3. Add the CSS for the .rte class

If you remember, in the previous parts we wrapped the Welcome page content, collection description in a div with class “rte”. This was done so that we can target all of those with the same CSS selector, thus achieving a consistent look across all content generated by the RTE. We will continue to do so in future areas where we output anything via the RTE, including product descriptions, blog articles, etc. 

Open the Test page on the storefront.

preview of test page

Figure 4.3: The output of the Test page on our storefront

It’s not looking too bad! The headings are actually pretty good-looking thanks to normalize.css. The blockquote and table could use a bit of work though.

We can target the elements generated by the RTE through the .rte class. Open style.css, and at the bottom, insert the CSS code below:

/**** rte content  ****/
.rte blockquote{ font-style:italic; border-left:3px solid #ddd; padding-left:10px; margin-left:0px;}
.rte td{border:1px solid #ccc; padding:5px;}

Your blockquote and table should now look nicer (Figure 4.4).

test page after css

Figure 4.4: The blockquote and table, styled

Why is the .rte class important?

The .rte class is important because it lets you target the style of an RTE-generated element. For example, let’s say you wanted to make it so that all Heading 1’s (<h1>) are red. Instead of going through each page with an <h1> and changing their colours to red one-by-one, you can simply target the <h1> by doing:

.rte h1{color:#ff0000;}

Huge timesaver if you ask me!

4. Add content for 404.liquid

The 404.liquid template is loaded whenever a customer tries going to a page that does not exist. For example, try appending some bogus text to the end of your shop’s URL; for example, your-store-name.myshopify.com/asdfasdf. You should see this page:

404 page

If you’re feeling lazy, you can simply change the text here to an error message, like “404! You done broke my site”. For practice’s sake let’s load the contents of a Page into the 404.liquid template.

Go to Pages in the admin, and create a page called 404. Go ahead and add some text for the page.

404 page

Hit Save to create the 404 page. Make sure the handle of the page is also called “404”.

Open 404.liquid. Delete whatever is in there, and add the code below:

{% assign page = pages.404 %}

{{ page.title }}

{{ page.content }}

We’re doing the same thing we did on the index.liquid template, but this time we’re assigning the Page with handle “404” that we just created. Now, when you go to a non-existing page in your shop, you see this:

404 storefront

That’s it for today!

← Back to table of contents


  • Leon
    Leon on May 4th, 2013

    That worked!! Look forward to the other parts ;-) Thanks a lot so far!

  • tetchi
    tetchi on May 11th, 2013

    @Leon Thanks for reading! :)

  • Haydn
    Haydn on February 3rd, 2014

    Hi. Just starting on Shopify. One of their ‘gurus’ pointed me to you and your help here on the 404 side which was bugging me like crazy was fantastic. Thanks so much. Will now look at what else you have written here

  • Jonny
    Jonny on August 3rd, 2015

    No problem as such here but i’m getting the prompt:

    The following were flagged as potential issues in this file:
    Line 1 — Liquid syntax error: Expected id but found number in “{{pages.404 }}”
    These issues may not affect your theme, but should be reviewed if you notice any problems.
    Note: This message is only shown in development shops.

    on my 404.liquid file in the theme developer.

  • Chris
    Chris on December 18th, 2015

    How can I use the RTE but define a different class in the css (i would be making a alternate page template and needing the RTE content to use this new css class)

  • tetchi
    tetchi on December 19th, 2015

    Hey Chris, you could check for the value of {{ template }} and output a different class based on its value.

    For example, you could have something like:

    …and then have CSS specific to the page–alt class name.

  • Leanne
    Leanne on March 12th, 2016

    I’m also getting the same error message as Jonny…

    “The following were flagged as potential issues in this file:
    • Line 1 — Liquid syntax error: Expected id but found number in “{{pages.404 }}”

    These issues may not affect your theme, but should be reviewed if you notice any problems.
    Note: This message is only shown in development shops.”

    This shows up above my code and then when I try to load a non existing page, it takes me to the password page as if I am an external viewer.

    Any suggestions?


Post a comment