Custom Templates

Your site has been built using Liquid Templates. All of the standard filters and functions are included, as well as lots of others.

We've included our own database engine so you can use your site's data to customize your views. Advanced control structures like if, else and for-loops are possible as well, it's just as powerful as a full programming language, with all the functionality you need already made for you.

Documentation on Liquid

• Template API Reference
• How to use Liquid

Go to Manage Site > Design to customize your templates. Emails (coming soon), pages and views all support Liquid.

Models and views

Your site's database models are the backbone of your site. Each model has a set of views. In the Design tab you'll see each model in the top bar like this, click on Views to reveal the rest:

This the campaign index view, which belongs to the campaign model, and is what you see on your site's home page.

The dropdown next to the green question mark contains all the Liquid, CSS and Javascript files for each model. Click on the green question mark or read the comment on top of each view to learn where it's found and what it's used for.

Each template usually starts with some tags to set up your view:

{% comment %} - This is not shown and is just to describe your code
{% layout %} - Lets you define which layout you want to use for this view
{% title %} - Sets the view title as seen in your browser tab
{% tagline %} - Sets the value of the view's tagline
{% subtitle %} - Sets the tagline subtitle
{% body_class %} - Sets classes on the body tag

Layouts

Each view usually has a layout. The layouts are found in the Layouts tab, where you also find snippets that are used in the layout. The main two layouts are default, which is used with almost every normal view, and dialog, which is used whenever you see a popup dialog, like the login dialog for example.

Each layout has a special code where the view will be inserted:

{{ content }} - Required for the view to render in the layout

Includes

You can also include views and pages in the layouts or in other views by using the include tag:

# Include a view
{% include 'campaign/index' %} - Include the campaign index view here

# Include a page
{% include 'pages/home' %} - Include the page with the link home here

Filters

All of Liquid's standard filters are included, as well as lots more for each model drop.
Filters are used by adding a pipe "|" like this:

# Create a variable, fetch all article comments and reverse the result
{% assign comments = article.article_comments.all | reverse %}

# Lookup translation with the 't' filter
{{ 'article_comments' | t }}

# Encode the image url
{{ article.image_url | e }}

# Join the article tags array and escape the value
{{ article.tags | join: ', ' | h }}

Filters can be chained and are how you transform strings, numbers, arrays, hashes and objects in Liquid.

Drops

Each view and layout always contains a set of drops you can use. Each drop has values and functions you can access using dot-notation. All views have access to these drops:

flash - Contains error and info messages from the server
stats - Statistics about your site and campaigns
session - Secure session cookies only visible on the server
cookies - Cookies also visible in the browser
params - The request parameters
settings - Settings for your site
request - Request data
layout - Layout data
mode - The mode, usually production
current_site - Your site model
current_user - The currently logged in user

Database

The database is a very powerful MongoDB database engine. We've built a query language with Liquid drops for easy access to your data. All of the models can be used to get single or multiple database records, with advanced query options available. The current_site drop has access to all other models. Here are some examples:

# Get the first campaign
campaign = current_site.campaigns | first

# Get the last campaign
campaign = current_site.campaigns | last

# Get the first campaign that matches query, returns a drop
campaign = current_site.campaigns | where: name: 'Eldoy' | first

# Get all campaigns, returns an array
campaigns = current_site.campaigns | where: name: 'Eldoy' | all

# Get last two campaigns, sorted by date
campaigns = current_site.campaigns | where: name: 'Eldoy' | limit: 2 | order: created_at: '1' | all

Each model has a set of scopes as well, which are predefined search functions:

# Get the first visible campaign
campaign = current_site.campaigns.visible | first

# Get the successful campaigns
campaigns = current_site.campaigns.successful | all

The available fields for each model drop can be found in the Template API Reference.

The full source code for your site application can be found in our Github Repository. The source code contains more examples of use, we recommend reading it before you start customizing your site.

More info

• More on customization
• Back to docs

We're constantly working on improving our documentation, let us know if you have any questions or if something is missing and we'll help you out.