Skip to content
Sugester V2 EN

Liquid Variables in Layouts

Updated at: 2 min read

CMS layouts use Liquid templates for dynamic content rendering. You define variables in the page fields.

Basic Syntax

Displaying Variables

{{ title }}
{{ brand \| default: 'MyCompany' }}

Conditions

{% if product == 'winery' %}
  <span class="text-purple-500">MyCompany</span>
{% else %}
  <span class="text-emerald-500">MyCompany</span>
{% endif %}

Loops

{% for p in paragraphs %}
  {{ p }}
{% endfor %}
Variable Description Example
name Page name Dashboard PL
title Page title MyCompany Dashboard
tagline Subtitle/slogan Microclimate Monitoring
lang Language code pl, en
brand Brand name MyCompany
icon Icon/logo URL https://...svg
product Product type vineyard, winery, Dashboard
current_lang Current language (display) PL, EN
contact_email Contact email contact@company.pl

Multilingual Variables

For the language switcher:

{{ page_path_pl }}  → /dashboard
{{ page_path_en }}  → /dashboard-en

Example language dropdown:

<a href="{{ page_path_pl }}" class="{% if lang == 'pl' %}active{% endif %}">PL</a>
<a href="{{ page_path_en }}" class="{% if lang == 'en' %}active{% endif %}">EN</a>

System Variables

Variable Description
paragraphs Array of page paragraphs
path Page URL path

Liquid Filters

{{ title \| upcase }}              → TITLE
{{ title \| downcase }}            → title
{{ email \| default: 'none' }}     → default value
{{ text \| truncate: 100 }}        → truncate text
{{ price \| append: ' PLN' }}      → append text
{{ url \| remove: 'https://' }}    → remove text

Example of a Complete Layout

<!DOCTYPE html>
<html lang="{{ lang \| default: 'pl' }}">
<head>
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <img src="{{ icon }}" alt="{{ brand }}">
    <span>{{ brand }}</span>
  </header>
  
  <main>
    {% for p in paragraphs %}
      {{ p }}
    {% endfor %}
  </main>
  
  <footer>
    <p>{{ contact_label }}: {{ contact_email }}</p>
  </footer>
</body>
</html>

Debugging

To see all available variables, temporarily add:

<pre>{{ page \| json }}</pre>

Was this entry helpful?

Share

Comments