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 %}

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:"recipient@yourcompany.com", 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