Das Layout: layout/theme.liquid

Das Layout ist das einzige Template, das für jede Seite gerendert wird. Es definiert <html>, <head> und <body> und setzt die gerenderten Section Groups ein.

Pflicht-Variablen

Diese drei Platzhalter enthalten bereits fertiges HTML und werden immer mit | raw ausgegeben:

{{ content_for_header | raw }}    {# Header-Gruppe #}
{{ content_for_layout | raw }}    {# Body-Sections der Seite #}
{{ content_for_footer | raw }}    {# Footer-Gruppe #}

Vollständiges Beispiel

<!DOCTYPE html>
<html lang="{{ locale | default: 'de' }}">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
      {% if record %}{{ record.meta_title | default: record.title | default: record.name }}
      {% else %}{{ page.meta_title | default: page.title }}{% endif %}
      {% if settings.site_name != blank %} — {{ settings.site_name }}{% endif %}
    </title>
    {% if page.description != blank %}
    <meta name="description" content="{{ page.description }}">
    {% endif %}
    <link rel="canonical" href="{{ site.url }}{{ page.url | default: record.url }}">

    {{ 'css/main.min.css' | asset_url | stylesheet_tag }}
    {{- theme.fonts | font_face_tag }}

    {% assign root = settings.color_schemes | where: "id", "default" | first %}
    <style>
      :root {
        --color-background: {{ root.background | default: '#FFFFFF' | css_safe }};
        --color-text:       {{ root.text       | default: '#222222' | css_safe }};
        --color-primary:    {{ root.primary    | default: '#000000' | css_safe }};
        --border-radius:    {{ settings.border_radius | default: 8 }}px;
      }
    </style>
  </head>
  <body>
    {{ content_for_header | raw }}
    <main>{{ content_for_layout | raw }}</main>
    {{ content_for_footer | raw }}

    <script src="{{ 'js/scripts.min.js' | asset_url }}" defer></script>
    {% consent_banner %}
  </body>
</html>

Tipps

• Bringe Theme-Einstellungen als CSS Custom Properties ins Design. Sections nutzen dann var(--color-primary).

• Werte in <style>-Blöcken immer mit | css_safe ausgeben.

• Assets immer über | asset_url einbinden – nie mit festem Pfad.

• record existiert nur auf Datensatz-Detailseiten. Sichere Titel und Canonical mit | default: ab.

• {% consent_banner %} gehört kurz vor </body>.

Weitere Layouts

Neben theme.liquid kannst du weitere Layouts anlegen, z. B. layout/funnel.liquid für Vollbild-Funnels. Ein Seiten-Template wählt es mit "layout": "funnel". Ein Layout ohne content_for_header/content_for_footer blendet Header und Footer aus – auch im PageBuilder.