Templates

 Last Edited: Jul 02, 2019

When setting up your page templates, it’s easiest to start with thing’s you’ll to want to include first.

Scripts

Use Code Snippets in Site Settings to create a file to store the scripts you’ll call in your page heads, you can call it something like “Head” or “Head scripts”. You’ll be able to include this in each of your templates, saving you writing it each time.

If you have previously written them manually in each template, you can, of course, continue to do this if you prefer.

Example Content:

<meta name="viewport" content="width=device-width, initial-scale=1"> <script src="{{ 'js/slick.min.js' | asset_url }}"></script> <script src="{{ 'js/slick.js' | asset_url }}"></script> <script src="{{ 'js/scripts.js' | asset_url }}"></script> <script src="{{ 'js/foundation.min.js' | asset_url }}"></script> <script> {%- include 'code_snippet', id: '3', name: 'bc menu js' -%} {%- include 'code_snippet', id: '4', name: 'bc default menu js' -%} </script>

Header

Use Headers in Site Settings to create a file that contains the content of your page header. Usually, this includes a company logo and menu.

Footer

Use Footers in Site Settings to create a file that contains the content of your page footer. Usually, this contains some key information about the company and a basic menu.

Template

Use Templates in Site Settings to create a page template that wraps around your pages content. Usually, this contains a head, header and footer along with some basic HTML to wrap your inner page content.

<head> {%- include 'code_snippet', id: '1', name: 'css' -%} {%- include 'code_snippet', id: '2', name: 'js' -%} </head> <body> {%- include 'header', id: '1', name: 'Header' -%} {{ content_for_layout }} {%- include 'footer', id: '1', name: 'Footer' -%} </body>

When editing your Template, you can use Toolbox on the right-hand-side to easily output the liquid required for your Code Snippets, Header & Footer.