Objects

A template can read these globals, and nothing else besides the variables it makes itself with assign, capture and for. They are read-only, and they are the same inside snippets.

A missing property is nil and prints nothing, so you can't break a page by reading something that isn't there.

#section

Most templates start by shortening the settings:

{%- assign s = section.settings -%}
<h2>{{ s.heading }}</h2>

#How each setting type arrives

Setting types are declared in the {% schema %} (see sections and settings). What the template receives depends on the type:

Settings the schema doesn't describe (for example the style options every section gets: bg, pad, anchor) are copied as plain values. The platform already applies those to the section wrapper, so you rarely need them.

{%- assign s = section.settings -%}
{% for plan in s.plans %}
  <h3>{{ plan.name }}</h3>
  {% if plan.price > 0 %}{{ plan.price | money }}{% endif %}
  {% render 'button', label: plan.button_label, link: plan.button_link %}
{% endfor %}

#settings

settings holds the theme settings: the values behind config/settings_schema.json, which owners change in the editor's Theme tab. It is not the same as section.settings. A value is the owner's choice, or the schema's default if they haven't changed it.

[
  {
    "name": "Accent",
    "settings": [
      { "type": "color", "id": "accent_color", "label": "Accent colour", "default": "#D62828" },
      { "type": "checkbox", "id": "show_top_bar", "label": "Show top bar", "default": true }
    ]
  }
]

{% if settings.show_top_bar %}<div class="top-bar">{{ site.name }}</div>{% endif %}
<span style="color: {{ settings.accent_color }}">Promo</span>

The same types as section settings work, except collection. Colours, numbers, ranges, selects and checkboxes are also written as CSS variables on the website, named --ts-<id> with _ turned into -. accent_color becomes --ts-accent-color. Ranges get their unit appended, and checkboxes become 1 or 0. See theme settings and styling.

#theme

The choices made in the editor's Theme tab.

Usually CSS variables are the better way to use the theme (var(--c-brand), see styling), because they follow each section's background. Use theme when the template itself has to decide something, such as {% if theme.button_shape == 'pill' %}.

#site

{% if site.languages.size > 1 %}
  <nav aria-label="{{ 'language' | ui }}">
    {% for l in site.languages %}
      <a href="{{ l.href }}" hreflang="{{ l.code }}"{% if l.current %} aria-current="true"{% endif %}>{{ l.label }}</a>
    {% endfor %}
  </nav>
{% endif %}

#page

The page being shown, or nil if there isn't one.

#entry

On a detail page (the page that is shown for each item of a data collection) entry is the item being shown. On every other page it is nil, so test it first: {% if entry %}...{% endif %}. In the editor, a detail page shows a sample item so you can design it before real data exists.

Properties are listed on the data page: title, url, collection, images, image, price, old_price, badge, summary, excerpt, body, facts and fields.

#forloop

Available inside {% for %}. See the full table on the language page: index, index0, rindex, rindex0, first, last, length and parentloop.

When you use {% render 'card' for items as item %}, the snippet gets a smaller forloop with index, index0, first, last and length.

#editing

true while the template is rendered inside the editor canvas, false on the live site and in previews. Use it to show a hint that visitors should never see:

{% if s.products == nil and editing %}
  <p>Pilih koleksi produk di pengaturan section ini.</p>
{% endif %}

Keep the hint harmless: the markup that editing adds is the only difference between the editor and the live site.

#Link objects

A link setting (and the output of the link filter) is a link object. Written out, it is the finished address, so <a href="{{ s.button_link }}"> just works. Behind it is a value the owner picks in the editor: a page, a WhatsApp message, a phone number, an email address, a section anchor or any web address.

What each kind turns into:

An empty link setting is the empty text '', which is false. Anything that can't be understood becomes #.

{%- assign to = s.button_link -%}
<a href="{{ to | default: '#' }}"
   {%- if to.external %} target="_blank" rel="noopener noreferrer"{% endif %}>
  {%- if to.kind == 'whatsapp' %}{{ 'whatsapp' | icon: class: 'size-5' }}{% endif -%}
  {{ s.button_label }}
</a>

You rarely write this by hand: {% render 'button', label: ..., link: ... %} does exactly this (see snippets). The link filter makes a link object from any stored value, such as a text you built yourself: {% assign order = 'wa:Halo, mau pesan ' | append: p.title | link %}.

#Collection objects

A collection setting gives a collection object, which lists a data collection's items (Produk, Menu, Artikel...). It is nil until the owner picks one.

Each item has id, title, url, image, price, old_price, badge, subtitle, summary and fields. The data page explains them with a product grid example.

{% for p in s.products.items limit: 8 %}
  <a href="{{ p.url | default: '#' }}">{{ p.title }} {{ p.price }}</a>
{% endfor %}