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).

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

Blockquote

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.

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.

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).

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:

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.

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:

That’s it for today!

← Back to table of contents