Skip to main content

How can we help?

Search

Introduction to Localist Developer Theming

Updated: Andrew Tat Edited:

Overview

Developer Theming enables clients to customize the appearance and behavior of their Localist Events platform using Liquid template syntax. This feature allows organizations to align their event calendar interface with their brand identity, modify information flows, and create custom user experiences—all without modifying the underlying Localist codebase.

This documentation series is designed for web developers who have working knowledge of HTML and CSS but may be new to Liquid templating. The articles in this series provide a comprehensive reference for all template variables, custom tags, and filters available in the Localist theming environment.

Developer Theming is available only to clients who have purchased this feature. Developer Theming enables the Theme Editor among other tools. If an organization does not have access, the contact should reach out to their Partner Success Manager or email support@concept3d.com to request activation.

What is Liquid?

Liquid is a templating language originally created by Shopify. It provides a safe, secure way to embed dynamic logic and data into HTML templates without exposing the underlying system. Localist uses Liquid to power its theming engine.

Liquid templates consist of three types of markup:

  • Variables — Data placeholders that render content
  • Tags — Logic and control flow (conditionals, loops, assignments)
  • Filters — Functions that transform variable output

All Liquid syntax is enclosed in special delimiters:

  • Variables use double curly braces: {{ variable }}
  • Tags use curly-brace-percent notation: {% tag %}
  • Filters are applied with the pipe operator: {{ variable | filter }}

Prerequisites

To work with Localist Developer Theming, developers must have:

  • Developer Theming enabled on their Localist organization account
  • Access to the Theme Editor in the Localist admin panel
  • Working knowledge of HTML and CSS to write and modify templates
  • Familiarity with basic programming concepts such as variables, conditionals, and loops (Liquid syntax is beginner-friendly, but these concepts help)

If any of these prerequisites are not met, organizations should contact their Partner Success Manager or support@concept3d.com.

Key Concepts

Templates

Templates are HTML files that control how different pages render in the Localist platform. Each template targets a specific page or component type—for example, an Event Details page, a Channel listing page, or a User profile card.

Templates are organized into logical groups within the Theme Editor:

  • Events — Pages related to event browsing, details, and listings
  • Channels — Pages for channel browsing and management
  • Places — Pages for location/venue displays
  • Users — User profile pages and related components
  • Groups & Departments — Organization and category pages

Developers modify templates by editing their HTML and Liquid code directly in the Theme Editor. Saving stores the theme; visitors see updates after the theme is set active for the platform. Admin preview shows changes before activating the theme for all visitors.

Variables

Variables are data placeholders that contain information from the Localist database or platform configuration. They are accessed using double curly braces.

When a template is rendered, the Liquid engine replaces each variable reference with its actual value. For example:

{{ event.name }}
{{ current_user.email }}
{{ site.name }}

Each template has a specific set of variables available to it. An event details template has access to an event variable, while a user profile template has access to a user variable. Articles 2–8 in this series document which variables are available to each template type.

Tags

Tags provide logic and control flow within templates. They are enclosed in curly-brace-percent notation: {% tag %}.

Common tags include:

  • Conditionals — {% if %}, {% unless %}, {% elsif %} — render content based on a condition
  • Loops — {% for %}, {% tablerow %} — iterate over arrays or collections
  • Assignments — {% assign %} — create new variables within the template
  • Iteration — {% break %}, {% continue %} — control loop behavior
  • Custom Localist tags — Platform-specific tags that provide additional functionality (documented in Article 6)

Filters

Filters transform the output of a variable using the pipe operator |. Filters can modify text, format dates, perform calculations, and more.

For example:

{{ event.name | upcase }}
{{ event.start_time | date: "%B %d, %Y" }}
{{ event.description | truncate: 100 }}

Localist provides both standard Liquid filters and custom filters designed specifically for the platform (documented in Article 7).

Objects (Drops)

Complex data in Localist is organized into objects, sometimes called drops in Liquid terminology. Objects contain multiple related attributes.

Common Localist objects include:

  • Event — An event listing with properties like name (display title), description, start_time, location, etc.
  • User — A person with properties like name, email, role, bio, etc.
  • Place — A venue or location with properties like address, latitude, longitude, etc.
  • Channel — A category or grouping with properties like name, description, etc.
  • Site — Platform-wide configuration with properties like name, logo URLs, header colors, URLs, and nested helpers such as site.format for date/time patterns (see Article 2).

Objects can also contain nested objects or arrays of objects. For example, an Event object might contain an array of related Instances, or a User object might contain a list of Departments they belong to.

Global Variables

Two variables are available on every template, regardless of template type:

site

The site object contains platform-wide configuration and branding information.

Common attributes include:

  • site.name — The organization’s public platform name
  • site.logo_url — URL to the organization’s logo (additional logo variants and mail helpers are in Article 2)
  • site.header_background_color / site.header_foreground_color — Header colors from the active theme
  • site.format — Localized date/time format strings for use with the date filter (Article 2)

The site object is documented in detail in Article 2.

current_user

The current_user object represents the person currently viewing the page.

  • If a user is logged in, current_user contains the User object with all user attributes (name, email, role, etc.)
  • If no user is logged in, current_user is nil (a null value in Liquid)

This variable is useful for personalizing templates based on the viewer’s identity or permissions. For example:

{% if current_user %}
  Welcome, {{ current_user.visible_name }}!
{% else %}
  Please log in to access this content.
{% endif %}

Example: Using Global Variables

Here is a simple example combining the global variables:

<header>
  <h1>{{ site.name }}</h1>
  {% if current_user %}
    <p>Hello, {{ current_user.visible_name }}. Welcome to {{ site.name }}!</p>
  {% else %}
    <p>Welcome to {{ site.name }}. Please log in.</p>
  {% endif %}
</header>

How the Theme Editor Works

The Localist Theme Editor is available in the admin area for the platform (open the Theme / template views for the active theme; exact menu labels can vary by version). The interface is organized as follows:

  • Template Groups — Organized categories of templates (Events, Channels, Users, Places, Groups, Departments)
  • Individual Templates — Each template within a group corresponds to a specific page or component type
  • Template Editor — A code editor where developers can write and modify HTML and Liquid
  • Preview — Themes can be previewed from admin before the theme is set as the active theme

When a developer edits a template:

  1. The template code (HTML + Liquid) is stored in the Localist database
  2. The Liquid engine parses the template and injects available data
  3. The rendered HTML is sent to the user’s browser
  4. The browser displays the page according to the CSS and JavaScript included in the template

Each template has a specific set of variables available to it, documented in the template-specific articles (Articles 2–8). Templates can inherit variables from parent templates (for example, a component template might inherit the event variable from its parent page template).

Article Series Overview

This documentation series provides a comprehensive reference for Localist Developer Theming. Articles are organized from foundational concepts to specific variable references:

  1. Introduction to Localist Developer Theming (this article) — Overview of Liquid, key concepts, and global variables
  2. Site Configuration and Global Objects — The site object, platform-wide configuration, and authentication
  3. Events, Instances, and Related Objects — The event and instance objects, event attributes, and event-related data
  4. Places, Groups, Departments, and Channels — Location, organizational, and categorical objects
  5. Shared Object Types — Tags, Photos, and Custom Fields that apply across events, places, groups, and departments
  6. Custom Liquid Tags Reference — Localist-specific tags for advanced functionality
  7. Custom Liquid Filters Reference — Localist-specific filters for data transformation
  8. Template Variable Reference — Complete variable inventory by template type
  9. Forms and User Management — User creation, login flows, and form handling

Related Articles

This article is part of a 9-part series on Localist developer theming:

  1. Introduction to Localist Developer Theming
  2. Site Configuration and Global Objects
  3. Events, Instances, and Related Objects
  4. Places, Groups, Departments, and Channels
  5. Shared Object Types
  6. Custom Liquid Tags Reference
  7. Custom Liquid Filters Reference
  8. Template Variable Reference
  9. Forms and User Management

Related articles