Templating Basics

Get a basic grasp of how markup is formed for layouts and content templates in Live Editor.

Template markup

The meat of Live Editor themes is in a few types of templates:

Live Editor uses the Liquid templating language, originally created by Shopify. While there are some differences in our implementation vs. Shopify’s, we have taken care to keep Live Editor’s implementation of Liquid as similar to Shopify’s as possible. If you are familiar with coding Shopify themes, then you should feel right at home with Live Editor’s themes.

Liquid markup looks similar to common web scripting languages like PHP and Embedded Ruby (ERB); templating languages like Smarty and Handlebars; and is most often mixed into HTML markup. 

        <title>
          {% if current_page.home? %}
            {{ site.title }}
          {% else %}
            {{ page_title }} - {{ site.title }}
          {% endif %}
        </title>

Liquid markup is composed of output and tags. These elements allow you to program custom display logic, transform data, output content, and ultimately make your site’s theme your own.

Output

Double curly braces surround any logic that you would like to output onto the page: 

The title of this page is {{ page_title }}.

Tags

Tag markup does not output anything but allows you to code logic into your templates (e.g., if/else blocks, loops, variable assignment, etc.). Tags are surrounded by matched pairs of curly brackets and percent signs: 

        {% unless page_title == 'Home' %}
          {{ page_title }}
        {% endunless %}

Objects encapsulate data provided to templates

Live Editor provides layouts and content templates with a series of objects containing data about the current page, content added to the page, site navigation, and different contexts within tags (like loops, pagination, table rows, etc.).

Within a layout, you’ll typically access objects like page, navigation, site, page_title, and page_description.

Within a content template, you’ll typically access custom variable names that you configure along with a content template’s blocks (for example, perhaps your Blog Post content template has blocks with corresponding variable names like title, summary, author, and body).

Refer to the guide about Objects for more information about the data available for output.

Transforming data with filters

Filters in Liquid are simple functions that allow you to manipulate data. They are typically used in {{ output }}s but not always.

Consider this example of using the upcase filter to transform a string to all uppercase: 

{{ 'I am not yelling' | upcase }}

Output 

I AM NOT YELLING

Filters can also be chained together, and some accept arguments: 

{{ 'I am not yelling' | replace: 'yelling', 'whispering' | upcase }}

Output 

I AM NOT WHISPERING

There are all kinds of filters that you can apply for strings, math, arrays, URLs, and more. See the guide about Filters for more information.

Next steps

Learn how to build Live Editor layouts in our Layouts guide.

Our Liquid Reference gives you a deep dive into how Liquid works and what exactly is available to you in Live Editor’s implementation of Liquid.