LocomotiveCMS uses the exact same template engine as for Shopify, one of the best hosted e-commerce solution. The name of that open source template engine is Liquid.

There are 3 types of markup: Objects, Filters and Tags.

Objects

When writing a liquid template, you will have access to objects representing things such as; the current site, page, logged in account as well as collections such as your custom content types. We also call them drops in case you meet this word further in the documentation.

{{ page.title }}

Example: it displays the title of the current page.

Filters

You can modify the output by using filters that you can chain. Filters are simple methods. The first parameter is always the output of the left side of the filter. The return value of the filter will be the new left value when the next filter is run. When there are no more filters, the template will receive the resulting string.

{{ page.title | upcase | pluralize }}

Example: This displays the title of the current page and applies 2 transformations: upcase + pluralization

Tags

Tags are used for the logic in the templates making them very dynamic. Thus, you can loop through a collection with the for tag, test a variable with the classical if/else. We also added, to the original Liquid tags, our own tags in order to build pages more elegantly and more efficiently.

{% if contents.projects.size == 0 %}
<p>No project</p>
{% endif %}

Example: Check if our custom content type representing projects has entries or not.

{% nav %}

Example: it displays the main menu of the current site with the UL/LI html tags.