Site Templates

When you create multiple pages with LemonStand you will soon find that you repeat the same HTML code in all pages - the HEAD and BODY tags declarations, page headers and footers. Templates allow you to reuse common code, and act as wrappers for your pages. They usually contain the required HTML tags like HEAD, TITLE and BODY, as well as common blocks of your pages - website navigation, footer, header, sidebar etc. You can have as many templates as you need. For simple websites, two site templates are usually enough - for the Home page, and for inner pages.

Creating a Site Template

Let's create a simple site template to use with our store Home page. Go to the Store Design > Site Templates page and click the + button underneath the Templates heading.

Specify the name for your template in the Code field. The template we are creating will contain all required HTML tags, and the simple header and footer elements. The page itself will be rendered between the header and footer.


Paste the following code into the Content field.<!DOCTYPE html>

<code class="language-twig"> <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --> 
   <!--[if IE 8]> <html lang="en"> <![endif]--> 
   <!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]--> 
   <head>
       <title>{{ page.title }}</title> 
   </head> 
   <body> 
      <p>This is a header</p> 
      {{ page() }} 
      <p>This is a footer</p> 
   </body>
</html></code>

The key element in the template content code is the {{ page() }} function call. It outputs the current page content. You can use a single template with multiple pages, and this function call will always output the content of a specific page that the user navigates to.

<code class="language-twig">{{ page() }}</code>

Also, please note how the page title in the TITLE tag is displayed. It uses a piece of code which refers to the value you have entered in the title field of the current page object.

<code class="language-twig">{{ page.title }}</code>

You can also output the page description in your HEAD tag in a similar manner by using {{ page.description }}. This will output the value of whatever you entered in the description field on the edit page form.

<code class="language-twig"><meta name="Description" content="{{ page.description }}"/></code>

Click the Save & Close button to save you newly created template. 

Assign a Site Template to a Page

Now it's time to assign the test-template to the Home page of our store. Click on the Page Templates menu item on the Editor side bar and then open the Home page by clicking on the Home line item.

This will then open the Edit Page form for the Home page.

In the Template drop-down, select test-template, and then click the Save & Close button.


Now click the View My Store link at the top left of the page. As you can see, the header and footer declared in the template are displayed around the home page content


You can now go back to the pages section and change the template for the Home page back to home. This will restore the Home page back to its original state.