Overview
Layout acts as the foundation of the theme, and all templates are shown through it.
Layout is an HTML file that lets you include content in one place that should be reused across different page types. For example, layouts are a great place to include any content you want in the <head> element, as well as the header and footer.
You can modify the default theme.html layout or create custom layout files to meet your needs. You can specify the layout to use at the template level or choose whether to use a layout at all:
- In JSON templates, the layout used to show the page is specified using the layout field.
- In HTML templates, the layout used to show the page is specified using the layout helper.
Location
Layout files are found in the layout directory of the theme:
└── theme
├── layout
│ ├── theme.html
│ ...
├── templates
...
Structure
Since layout files are the basis of the theme, they should usually follow the standard HTML document structure. Most layout files also include the following Handlebars objects:
<!DOCTYPE html>
<html>
<head>
...
{{ content_for_header }}
...
</head>
<body>
...
{{ content_for_layout }}
...
{{ content_for_footer }}
</body>
</html>
Content
Layouts let you include content in one place that is repeated across various page types. For instance, layouts might include header and footer sections as well as SEO metadata.
Layout files are .html files, so you can use standard HTML and Handlebars to build the content.
Layouts can access any global Handlebars objects and can include the following Handlebars objects:
Warning
These objects must be included in
theme.html. If these objects are not included, you will not be able to save or update the files using tools like the code editor or SHOPLINE CLI.
content_for_header
The content_for_header object outputs scripts from SHOPLINE, used for SHOPLINE analytics, SHOPLINE apps, etc. You need to add a reference to this object between the <head> and </head> HTML tags.
You should not try to change or analyze the content_for_header object. If the content_for_header changes, the behavior of your Handlebars will change. Changing content_for_header will result in interruptions in the analytics information in SHOPLINE and other officially supported integration paths.
content_for_layout
The content_for_layout object dynamically outputs the content of each template. You need to add a reference to this object between the <body> and </body> HTML tags.
content_for_footer
The content_for_footer object outputs scripts from SHOPLINE, used for SHOPLINE analytics, SHOPLINE apps, etc. You need to add a reference to this object between the <body> and </body> HTML tags, near the </body> tag.
You should not try to change or analyze the content_for_footer object. If the content_for_footer changes, the behavior of your Handlebars will change. Changing content_for_footer will result in interruptions in the analytics information in SHOPLINE and other officially supported integration paths.
Usage
When using layout files, you should be familiar with the following ideas:
Support Template-Specific CSS Selectors
You can help create CSS rules for specific templates by outputting data from the template object in the <body> tag.
<body class="template--{{ template.name }}">
...
</body>
.template-collection {
margin-bottom: 2em;
}
