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 the label.
required Optional

If omitted, required defaults to true.
Setting this to false 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 %}

Menus

Menus consist of Menus (name, description, visibility etc.) and menus contain Sections (name, description, visibility, order etc.) and within each section you have Items (name, description, visibility and up to 10 prices with labels)

Menus can be accessed by using the menu handle after the word menu on the URL. e.g. accessing your Winter menu: http://example.com/menu/winter

Context variables for a menu: menu, site, page_title, meta_description, template_name

Menu item images

Menu items can have an uploaded image asset for each item. The asset can be accessed via the asset_id of the menu item and this can be used to display and resize the image using: thumbnail_asset_id
e.g. <img src="{{ item.asset_id | thumbnail_asset_id:"120x120" }}">

Using liquid notation - menu data can be accessed as follows on a menu page:

                      
{% for section in menu.sections %}
    {% for item in section.items %}
        {% for price in item.prices %}
            {% if price.label !='' %}
                {{price.label}}

            {% endif %}
        {% endfor %}

        {% for price in item.prices %}
            {% if price.price != '' %}
                {{price.price}}

            {% endif %}
        {% endfor %}
    {% endfor %}
{% endfor %}

Exporting and Importing menu data

Menu data can be exported to CSV in 3 sections: Menu, Section and Items.
When importing menu sections - you must reference the menu_handle of the menu which you want to put the menu section in.
When importing menu items - you must reference the menu_section_handle of the menu section which you want to put the menu item in.

If you are using Microsoft Excel to process the exported CSV files, please be aware that there are issues with Excel not handling UTF-8 characters and the BOM correctly, so you may see corruption in the CSV file if using UTF-8 characters. There is also issues with Excel re-exporting the edited CSVs to UTF-8 format.

As a work around for this - we recommend using Apache's Open Office - which works very nicely with UTF-8 files.

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

Site Settings

Theme settings

Settings attributes for input settings

Parameters

Name Mandatory

settings Mandatory

Parameters

id Mandatory

label Mandatory

default Optional

info Optional

required Optional

placeholder Optional

Basic setting types

Parameters

text

textarea

richtext

select

checkbox

image

Accessing theme settings from liquid templates.

Pages

Parameters

Name Mandatory

type Mandatory

order Optional

content Optional

Templates

Menus

Menu item images

Exporting and Importing menu data

Galleries

Blogs

Blog posts

Link lists

Form liquid tag

Parameters

email Mandatory

id Optional

class Optional

subject Optional

from Optional

submit_message Optional

Modifying global less variables

Custom 404 pages

Liquid filter