Theme Global Section Configs

A theme defines the global sections and containers in the config/global.json config file, where it specifies the name and the template that is used. The example below illustrates that, unlike when pages use sections or containers and require them to be defined in the page template, a global section can be used only by calling the global section function with the section name.

Global section example

site/global/sections/header.json
{
    "props": {
        "title": "Example Header"
    }
}
theme/config/global.json
{
    "sections": {
        "header": {
            "template": "header"
        }
    }
}
theme/components/sections/header.html.twig
<h1> {{ title }} </h1>

{% schema %}
{
    "title": {
        "type": "string"
    }
}
{% endschema %}
theme/templates/pages/first-page.html.twig
{{ global_section('header') }}
<p> This is the first page template. </p>

See also