Site Settings
Site settings contains the data available to the site. e.g. default page title, meta data etc.
Access in liquid templates using site.settings
and the setting id/name
e.g. {{ site.settings.page-title }}
Site setting file upload urls can be determined by using the site_setting_url filter
e.g. {{ site.theme.settings.favicon | site_setting_url }}
Theme settings
The various settings for the theme are defined in the Theme Schema as JSON data.
The Theme Schema is used to generate the form to administer the Theme Values.
Settings attributes for input settings
The Theme Schema requires an array of settings, which must contain the following:Parameters
-
Name Mandatory
A unique name for this section.
-
settings Mandatory
An array of settings. Options for the settings are defined below.
When defining each setting in the Theme Schema, use the attributes shown in the table:
Parameters
-
id Mandatory
A unique name for this setting item. The id is exposed to the liquid templates via the settings object. It must only contain alphanumeric characters, underscores and dashes.
-
label Mandatory
A label/name for this setting.
-
default Optional
A value to which the setting can default to if nothing is specified by the user.
-
info Optional
Additional information about the setting, if required.
This will appear as text below thelabel
. -
required Optional
If omitted,
required
defaults totrue
.
Setting this tofalse
will make the defined setting an optional setting. -
placeholder Optional
Placeholder text to display if no default or existing content is set.
Basic setting types
You can set the type attribute for basic input settings to any of the values shown in the table.Parameters
-
text
Single-line text fields
-
textarea
Multi-line text areas
-
richtext
Multi-line text area with HTML formatting options
-
select
selection drop-downs
-
checkbox
checkboxes
-
image
Image file upload
Uploaded images are saved with a name and format that matches the id attribute of the input tag, regardless of the file's original name or format.
Accessing theme settings from liquid templates.
You can access the theme settings from the current default theme.
Accessing theme settings via liquid is achieved with {{ site.theme.settings }}
and then appending the relevant id.
e.g. If you wanted to access a setting with an id of font-color you would use: {{ site.theme.settings.font-color }}
File upload urls can be determined by using the theme_setting_url filter
e.g. {{ site.theme.settings.favicon | theme_setting_url }}
[
{
"name": "Appearance",
"settings": [
{
"type": "text",
"id": "text_type_id",
"label": "Text",
"default": "",
"info": "Some info about this text field",
"placeholder": "Placeholder content for text"
},
{
"type": "richtext",
"id": "richtext_type_id",
"label": "RichText",
"default": "Default text for the richtext",
"info": "Some info about this rich text field",
"placeholder": "Placeholder content for richtext",
"required": false
}
]
},
{
"name": "Section 2",
"settings": [
{
"type": "textarea",
"id": "textarea_type_id",
"label": "Textarea",
"default": "",
"info": "Some info about this textarea field",
"placeholder": "Placeholder content"
},
{
"type": "select",
"id": "select_type_id",
"label": "Select Example",
"options": [
{ "value": "", "label": "Please select" },
{ "value": "one", "label": "Option One" },
{ "value": "two", "label": "Option Two" },
{ "value": "three", "label": "Option Three" }
],
"default": "two",
"info": "Some info about this select field",
"placeholder": "Placeholder content",
"required": false
}
]
},
{
"name": "Section 3",
"settings": [
{
"type": "text",
"id": "section_three_text",
"label": "Text",
"default": "",
"info": "Some info about this text field",
"placeholder": "Enter some section 3 text"
}
]
}
]
Pages
Page properties for the current page can be accessed via the page object. e.g. {{ page.name }}, {{ page.meta_description }}
Content blocks within a page can be accessed in a similar way using the page content handle references.
e.g. A content element called 'intro' can be accessed via {{ page.intro }}
which will return a content element containing:
Parameters
-
Name Mandatory
A unique name for this content element.
-
type Mandatory
The type of element: plain_text, rich_text or file_upload.
-
order Optional
The order of the element in the list
-
content Optional
The actual content of the element
e.g. The content for the content element called 'intro' can be accessed using: {{ page.intro.content }}
You can reference content elements for any page from any template. e.g. {{ site.pages.index.headertext }}
Context variables for a page: site
, page
, page_title
, meta_description
, page_preview
, template_name
Templates
Include templates and specify a specific page,menu or gallery for the template.
e.g. {% include "menu.main", menu:site.menus.main %}
Galleries
Context variables for a gallery: site
, gallery
, page_title
, meta_description
, template_name
Blogs
Context variables for a blog: site
, blog
, page_title
, meta_description
, template_name
Blog posts
Context variables for a blog post: site
, blog_post
, page_title
, meta_description
, template_name
Link lists
Link lists contains a collection of list items (typically URLs to build navigation elements of a site) but can also contain other object such as pages, menus, menu sections, blogs, blog posts and galleries.
You can access all the link lists on a site using {{ site.linklists }}
or access specific link lists using the link list handle e.g. {{ site.linklists.main_navigation.items }}
,
Variables available for a link list: handle
, name
, description
, active
, order
.
Items within a link list can have the following variables: name
, url
, object
, object_type
, active
, order
.
The object
variable will contain an object defined by the object_type
and the variables of that object can be accessed via dot notation.
Accessed a link list and items:
{% for linklist in site.linklists %}
<br/>Handle: {{ linklist.handle }}
<br/>Name: {{ linklist.name }}
<br/>Description: {{ linklist.description }}
<br/>Active: {{ linklist.active }}
<br/>Order: {{ linklist.order }}
{% for item in linklist.items %}
<br/>Name: {{ item.name }}
<br/>Object: {{ item.object }}
<br/>Object Handle: {{ item.object.handle }}
<br/>Type: {{ item.type }}
<br/>URL: {{ item.url }}
<br/>Active: {{ item.active }}
<br/>Order: {{ item.order }}
{% endfor %}
{% endfor %}
Form liquid tag
Use the form liquid tag to add contact forms to your templates.
Parameters
-
email Mandatory
The email to send the response of the contact form to.
-
id Optional
A unique id to identify multiple forms on the same page.
-
class Optional
A class name to attach to the
form
tag -
subject Optional
The email subject line of the contact.
-
from Optional
The email from field.
-
submit_message Optional
The response displayed after the form is submitted.
All input elements inside the form
tag will be emailed to the specified email in plain text as key value pairs.
If an input element has the name of email_address
, this will provide additional server side email validation on that field (for older browsers that do not support the HTML 5 client side email validation).
If you need to attach a file to the form, use a file input element with a name of attached_file
e.g. <input type="file" name="attached_file">
Allowed upload file extensions types: jpg
,jpeg
,gif
,png
,zip
,doc
& xls
Maximum file upload size is 1024KB.
Multiple contact form example:
{% form id="contact_form_1" email:"[email protected]", subject:"First form subject" %}
<input type="text" name="customer_name">
<input type="email" name="email_address">
<input type="submit" name="submit" value="submit">
{% endform %}
{% form id="contact_form_with_attachment" email:recipient-email.content, subject:"Contact form with attachment subject" %}
<input type="text" name="customer_name">
<input type="email" name="address">
<textarea placeholder="Your comments" name="message"></textarea>
<input type="file" name="attached_file">
<input type="submit" name="submit" value="submit">
{% endform %}
Modifying global less variables
Variables used in the less files can be overwritten by theme/page settings or the plain css using the less options before the less file in the main page template.
Example global less overwrite:
<script>
less = {
modifyVars: {
'@secondary': '{{ site.theme.settings.secondary }}',
'@globalfont': "\'Helvetica, Arial, sans-serif'\"
}
};
</script>
The '@secondary' is equal to less '@secondary' used for example to declare the secondary page color.
Custom 404 pages
Adding a theme template with a name of 404 will allow this template to be displayed whenever an incorrect or mistyped url is entered for your site.
If a 404 error is generated - the template_name
context variable for the page, menu, gallery etc. will be 404
Liquid filter
[size] => \Liquid\StandardFilters
[downcase] => \Liquid\StandardFilters
[upcase] => \Liquid\StandardFilters
[capitalize] => \Liquid\StandardFilters
[escape] => \Liquid\StandardFilters
[strip_newlines] => \Liquid\StandardFilters
[newline_to_br] => \Liquid\StandardFilters
[replace] => \Liquid\StandardFilters
[replace_first] => \Liquid\StandardFilters
[remove] => \Liquid\StandardFilters
[remove_first] => \Liquid\StandardFilters
[append] => \Liquid\StandardFilters
[prepend] => \Liquid\StandardFilters
[slice] => \Liquid\StandardFilters
[truncate] => \Liquid\StandardFilters
[truncatewords] => \Liquid\StandardFilters
[strip_html] => \Liquid\StandardFilters
[join] => \Liquid\StandardFilters
[sort] => \Liquid\StandardFilters
[sort_key] => \Liquid\StandardFilters
[uniq] => \Liquid\StandardFilters
[reverse] => \Liquid\StandardFilters
[map] => \Liquid\StandardFilters
[date] => \Liquid\StandardFilters
[first] => \Liquid\StandardFilters
[last] => \Liquid\StandardFilters
[split] => \Liquid\StandardFilters
[strip] => \Liquid\StandardFilters
[lstrip] => \Liquid\StandardFilters
[rstrip] => \Liquid\StandardFilters
[plus] => \Liquid\StandardFilters
[minus] => \Liquid\StandardFilters
[times] => \Liquid\StandardFilters
[divided_by] => \Liquid\StandardFilters
[modulo] => \Liquid\StandardFilters
[round] => \Liquid\StandardFilters
[ceil] => \Liquid\StandardFilters
[floor] => \Liquid\StandardFilters
[json] => \Liquid\StandardFilters
[stylesheet] => site_filter
[asset_url] => site_filter
[site_setting_url] => site_filter
[theme_setting_url] => site_filter
[gallery_asset_url] => site_filter
[page_asset_url] => site_filter
[admin_page_asset_url] => site_filter
[include_template] => site_filter
[thumbnail] => site_filter
[gallery_thumbnail] => site_filter
[thumbnail_asset_id] => site_filter
[thumbnail_asset] => site_filter
[thumbnail3params] => site_filter