Templates

Each Template corresponds to an appropriate object:

Template	Object
Layout	website
PageTemplate	page
SectionTemplate	section
FormTemplate	form

However all objects can be called from within different Templates. Whilst they are called by its simple name within their corresponding context, e.g. the current page's object with page inside the PageTemplate, other siblings need to be called via the appropriate parent object's array, e.g. website.pages for all pages of a website. Be aware that even the current page is contained in this array.

Layout

Type: string
Description: Top level that ties together all parts of the individual pages of a website.
Corresponding object: website
Required content: schema-JSON, single top level HTML tag.

Typical content:

HTML

<!DOCTYPE html>
<html lang="{{website.lang}}">
    <head>
        <style>
            /* CSS of this Theme. */
        </style>
        <script>
            // JS of this Theme.
        </script>
        {{content_for_head}}
    </head>
    <body>
        {{content_for_layout}}
    </body>
</html>
{% schema %}
{
    "schema_name": "my_schema_name",
    "css_class": "my_classes"
}
{% endschema %}

content_for_head

Type: string
Description: Contains informations entered into HTML for head field on website screen by Content Managers. Every website's specific styling, scripts and structured data is put in here.

Typical Usage:

Render individual customer styles and scripts into the head HTML tag after Theme wide styles and scripts.

HTML

<head>
    <style>
        /* CSS of this Theme. */
    </style>
    <script>
        // JS of this Theme.
    </script>
    {{content_for_head}}
</head>

content_for_layout

Type: string
Description: Contains the rendered page based on its PageTemplate.
Typical Usage:
- Render all sections (header, main, footer) into the body HTML tag inside Layout.
HTML
```
<body>
    {{content_for_layout}}
</body>
```

PageTemplate

Type: string
Description: Ties together the rendered page consisting of its shared parts header_content_for_page and footer_content_for_page, and its specific part main_content_for_page
Corresponding object: page
Used inside Layout as content_for_layout.

Typical content:

Render all sections (header, main, footer) into the body inside Layout.

HTML

<header>
    {{header_content_for_page}}
</header>
<main>
    {{main_content_for_page}}
</main>
<footer>
    {{footer_content_for_page}}
</footer>

header_content_for_page

Type: string
Description: Contains the sections from header-sections area. These are the same on all pages.
Typically used inside PageTemplate.
Typical Usage:
- Render the header sections into the body inside a PageTemplate.
HTML
```
<header>
    {{header_content_for_page}}
</header>
```

main_content_for_page

Type: string
Description: Contains the sections from page-sections area.
Used inside PageTemplate.
Typical Usage:
- Render the page-specific sections into the body inside a PageTemplate.
HTML
```
<main>
    {{main_content_for_page}}
</main>
```

footer_content_for_page

Type: string
Description: Contains the sections from footer-sections area. These are the same on all pages.
Typically used inside PageTemplate.
Typical Usage:
- Render the footer sections into the body inside a PageTemplate.
HTML
```
<footer>
    {{footer_content_for_page}}
</footer>
```

SectionTemplate

Type: string
Description: Used as basis for sections build by the Content Managers inside the header-sections, page-sections or footer-sections area. These built sections are rendered inside PageTemplate via main_content_for_page, header_content_for_page or footer_content_for_page respectively.
Corresponding object: section
Required content: schema-JSON, single top level HTML tag.

Typical content:

HTML

{% schema %}
{
    "schema_name": "my_schema_name",
    "css_class": "my_classes",
    "tag": "div"
}
{% endschema %}
<!-- Prepare Liquid-Variables according to content -->
<section>
    <!-- Use `blocks` and `schema.settings` to render content of `section` -->
</section>

FormTemplate

Type: string
Description: Used as basis for forms build by Content Managers. The built forms can be added to appropiate sections to be rendered.
Corresponding object: form
Required content: The HTML tag form needs to include attributes action="", method="post" and enctype="multipart/form-data". Inside form tag needs to be content of Liquid variable . :::

Typical content:

HTML

<form action="{{form_action}}" method="post" enctype="multipart/form-data">
    {{required_form_tag}}
    <!-- Insert HTML by iterating over all `formfields` of a specific `form` -->
</form>

form_action

Type: string
Description: Contains content for action attribute of a form HTML tag inside a FormTemplate.

Typical Usage:

HTML

<form action="{{form_action}}" method="post" enctype="multipart/form-data">

required_form_tag

Type: string
Description: Contains content for required safety fields inside a form HTML tag inside a FormTemplate.

Typical Usage:

HTML

<form action="{{form_action}}" method="post" enctype="multipart/form-data">
    {{required_form_tag}}
    <!-- Insert HTML by iterating over all `formfields` of a specific `form` -->
</form>

parent_uuid

Type: string
Description: Contains Universally Unique Identifier of parent ( section setting or section block ) of a specific form.

Typical Usage: construct form specific HTML ids inside a multiple times used FormTemplate and/or form.

HTML

{%- assign ff_id = form_field.name | append: '-' | append: parent_uuid -%}
{%- assign ff_label_id = form_field.name | append: '-label-' | append: parent_uuid -%}
<label id="{{ff_label_id}}" for="{{ff_id}}">
    {{form_field.label}}
</label>
<input id="{{ff_id}}" aria-describedby="{{ff_label_id}}" type="{{form_field.input_type}}" name="{{form_field.name}}">

Sample Templates

Layout Sample

The Layout is filled with HTML-boilerplate code.
We included Bootstrap for faster styling.
We also include styling to show the interaction with schema-JSON and the usage of objects.
Inside the body tag, the page content will be rendered in content_for_layout by the pageTemplate.

HTML

{%- comment -%} LAYOUT - sample {%- endcomment -%}
<!DOCTYPE html>
<html lang="{{ website.lang }}">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta
    name="description"
    content="{{ page.description | default: website.description }}"
  />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />

  <title>{{ page.title }}</title>

  <link 
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    rel="stylesheet" 
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" 
    crossorigin="anonymous"
  >

  {%- comment -%} Global adjustable styling - begin {%- endcomment -%}

  {%- assign website_background_color_rgb = website.settings.website_background_color.rgb -%}
  {%- if website_background_color_rgb == nil -%}
    {%- assign website_background_color_rgb = '255, 255, 255' -%}
  {%- endif -%}

  {%- assign website_base_font_size = website.settings.website_base_font_size -%}
  {%- if website_base_font_size == nil -%}
    {%- assign website_base_font_size = 16 -%}
  {%- endif -%}

  {%- comment -%} Global adjustable styling - end {%- endcomment -%}

  <style>
    html {
      font-size: {{website_base_font_size}}px;
    }
    body {
      background: rgb({{website_background_color_rgb}});
    }
  </style>

  {{ content_for_head }}

</head>

{% schema %}
{
  "schema_name": "layout_sample",
  "settings": [
    { 
      "name": "colors_heading",
      "label": "Farbeinstellungen",
      "kind": "heading"
    },
    {
      "name": "website_background_color",
      "label": "Hintergrundfarbe Webseite",
      "kind": "color"
    },
    { 
      "name": "font_settings_heading",
      "label": "Schrifteinstellungen",
      "kind": "heading"
    },
    {
      "name": "website_base_font_size",
      "label": "Schriftgrößenbasis Webseite",
      "kind": "select",
      "options": [
        {
          "name": "website_base_font_size_tiny",
          "label": "Winzig",
          "value": "13"
        },
        {
          "name": "website_base_font_size_xsmall",
          "label": "Sehr klein",
          "value": "14"
        },
        {
          "name": "website_base_font_size_small",
          "label": "Klein",
          "value": "15"
        },
        {
          "name": "website_base_font_size_medium",
          "label": "Mittel",
          "value": "16"
        },
        {
          "name": "website_base_font_size_large",
          "label": "Groß",
          "value": "17"
        },
        {
          "name": "website_base_font_size_xlarge",
          "label": "Sehr groß",
          "value": "18"
        },
        {
          "name": "website_base_font_size_huge",
          "label": "Riesig",
          "value": "20"
        }
      ]
    }
  ]
}
{% endschema %}

<body class="{{page_template.name}}"> 

  {{ content_for_layout }}

</body>
</html>

PageTemplate Sample

Sections will be rendered inside the PageTemplate.

HTML

{%- comment -%} PageTemplate - sample {%- endcomment -%}
<header> {{ header_content_for_page }} </header>
<main> {{ main_content_for_page }} </main>
<footer> {{ footer_content_for_page }} </footer>

SectionTemplate Sample

We included all kind-fields of the setting object to demonstrate the usage.
rudimental styling was also added inline. Here you can see the usage of Bootstrapin action.

HTML

{%- comment -%} SectionTemplate - sample {%- endcomment -%}

{% schema %}
{
  "schema_name": "section-template-sample",
  "css_class": "section-template-sample",
  "tag": "div",
  "settings": [
    {
      "name": "content",
      "label": "Inhalte",
      "kind": "heading"
    },
    {
      "name": "section_heading",
      "label": "Überschrift",
      "kind": "text"
    },
    {
      "name": "section_subheading",
      "label": "Unterüberschrift",
      "kind": "textarea"
    },
    {
      "name": "current_date",
      "label": "Aktuelles Datum",
      "kind": "date"
    },
    {
      "name": "rich_text",
      "label": "Text",
      "kind": "rich_text"
    },
    {
      "name": "header_image",
      "label": "Titelbild",
      "kind": "image"
    },
    {
      "name": "contact_form",
      "label": "Formular",
      "kind": "form"
    },
    {
      "name": "button_link",
      "label": "Button Link",
      "kind": "link"
    },
    {
      "name": "link_list",
      "label": "Linkliste",
      "kind": "link_list"
    },  
    {
      "name": "design",
      "label": "Design",
      "kind": "heading"
    },
    {
      "name": "header_image_border_width",
      "label": "Titelbild Rahmen Stärke in Pixel",
      "kind": "range",
      "min": 0,
      "max": 20,
      "step": 5
    },
    {
      "name": "header_image_border_color",
      "label": "Titelbild Rahmen Farbe",
      "kind": "color"
    },
    {
      "name": "tagged_faq_items",
      "label": "Thementag der Faqs",
      "kind": "faq_item_tag_name"
    },
    {
      "name": "column_order",
      "label": "Spalten Anordnung tauschen",
      "kind": "select",
      "options": [
        {
          "name": "column_order_row_reverse",
          "label": "Bildspalte links",
          "value": "row-reverse"
        },
        {
          "name": "column_order_row",
          "label": "Bildspalte rechts",
          "value": "row"
        }
      ]
    },
    {
      "name": "icon_item_image_size",
      "label": "Icon Bildgröße in Pixel",
      "kind": "number",
      "min": 10,
      "max": 100,
      "step": 5
    }
  ],
  "blocks": [
    {
      "name": "icon_items",
      "label": "Icon Item",
      "settings": [
        {
          "name": "content",
          "label": "Inhalte",
          "kind": "heading"
        },
        {
          "name": "icon_item_image",
          "label": "Bild",
          "kind": "image"
        },
        {
          "name": "icon_item_text",
          "label": "Text zu Icon",
          "kind": "text"
        }
      ]
    }
  ]
}
{% endschema %}
    
{%- comment -%}
  Handle preset fallbacks and cross-dependencies
{%- endcomment -%}

{%- comment -%} Content variables {%- endcomment -%}
{%- assign section_heading = section.settings.section_heading -%}
{%- assign section_subheading = section.settings.section_subheading -%}
{%- assign current_date = section.settings.current_date -%}
{%- assign rich_text = section.settings.rich_text -%}
{%- assign header_image = section.settings.header_image -%}
{%- assign contact_form = section.settings.contact_form.form -%}
{%- assign button_link = section.settings.button_link -%}
{%- assign link_list = section.settings.link_list -%}
{%- assign tagged_faq_items = section.settings.tagged_faq_items -%}
{%- assign icon_items = section.dynamic_blocks.icon_items -%}

{%- comment -%} Design variables {%- endcomment -%}
{%- assign header_image_border_width = section.settings.header_image_border_width -%}
{%- if header_image_border_width == nil -%}
  {%- assign header_image_border_width = 0 -%}
{%- endif -%}
{%- assign header_image_border_color_rgb = section.settings.header_image_border_color.rgb -%}
{%- if header_image_border_color_rgb == nil -%}
  {%- assign header_image_border_color_rgb = "255,0,0" -%}
{%- endif -%}
{%- capture header_image_border_style -%}
  border:{{header_image_border_width}}px solid rgb({{header_image_border_color_rgb}});
{%- endcapture -%}

{%- assign column_order = section.settings.column_order -%}
{%- if column_order == nil -%}
  {%- assign column_order = "row" -%}
{%- endif -%}
{%- capture column_order_Style -%}
  flex-direction: {{column_order}};
{%- endcapture -%}

{%- assign icon_item_image_size = section.settings.icon_item_image_size -%}
{%- if icon_item_image_size == nil -%}
  {%- assign icon_item_image_size = 50 -%}
{%- endif -%}
{%- capture icon_item_image_size_style -%}
  width: {{icon_item_image_size}}px; height: {{icon_item_image_size}}px;
{%- endcapture -%}

{%- comment -%}
  HTML
{%- endcomment -%}
<div class="section-template-sample">
  <div class="container mt-5">
    
    {%- if section_heading or section_subheading -%}
      <div class="row mb-5">
        <div class="col-12 text-center">
          {%- if section_heading -%}
            <h2>{{ section_heading }}</h2>
          {%- endif -%}
          {%- if section_subheading -%}
            <p>{{ section_subheading | newline_to_br }}</p> 
          {%- endif -%}
        </div>
      </div>
    {%- endif -%}

    <div class="row" style="{{column_order_Style}}">
      <div class="col-lg-6">
        {%- if current_Date or rich_text -%}
          <div class="mb-3">
            {%- if current_date -%}
              <p style="opacity: 0.6;">{{current_date | date: "%e.%m.%Y"}}</p>               
            {%- endif -%}
            {%- if rich_text -%}
              {{rich_text.html}}
            {%- endif -%}
          </div>
        {%- endif -%}

        {%- if button_link -%}
          <div class="mb-5">
            <a href="{{button_link.url}}" class="btn btn-dark">{{button_link.text}}</a>
          </div>
        {%- endif -%}

        {%- for icon_item in icon_items -%}
          {%- assign icon_item_image = icon_item.settings.icon_item_image -%}
          {%- assign icon_item_text = icon_item.settings.icon_item_text -%}

          <div class="row mb-3">
            <div class="col-12 d-flex align-items-center">

              {%- if icon_item_image -%}
                <img 
                  style="{{icon_item_image_size_style}}" 
                  class="rounded-circle" alt="{{icon_item_image.alt}}" 
                  src="{{icon_item_image.fallback}}" 
                  sizes="auto" 
                  srcset="{{icon_item_image.srcset}}"
                >
                <noscript>
                  <img 
                    style="{{icon_item_image_size_style}}" 
                    class="rounded-circle" 
                    alt="{{icon_item_image.alt}}" 
                    src="{{icon_item_image.src_best}}"
                  >
                </noscript>
              {%- endif -%}

              {%- if icon_item_text -%}
                <p class="mx-2">{{icon_item_text}}</p>               
              {%- endif -%}

            </div>
          </div>
        {%- endfor -%}
        {%- if contact_form -%}
          <div class="mt-5">
            {{contact_form}}
          </div>
        {%- endif -%}
      </div>
      {%- if header_image or link_list -%}
        <div class="col-lg-6">

          {%- if header_image -%}
            <div class="mb-3">
              <img 
                class="w-100" 
                style="{{header_image_border_style}}" 
                alt="{{header_image.alt}}" 
                src="{{header_image.fallback}}" 
                sizes="auto" 
                srcset="{{header_image.srcset}}"
              >
              <noscript>
                <img 
                  class="w-100" 
                  style="{{header_image_border_style}}"  
                  alt="{{header_image.alt}}" 
                  src="{{header_image.src_best}}"
                >
              </noscript>
            </div>
          {%- endif -%}

          {%- if link_list -%}
            <div class="text-center">
              {%- for link in link_list.links -%}
                <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a>
                {%- unless forloop.last -%}
                  <span class="mx-2">&#8226;</span>
                {%- endunless -%}
              {%- endfor -%}  
            </div>
          {%- endif -%}

          {%- if tagged_faq_items -%}
            <div class="text-center">
              {%- for faq_item in tagged_faq_items -%}
                <div style="margin-bottom: 1rem;">
                  <p>
                    {{faq_item.question_plain}}
                  </p>
                  <div>
                    {{faq_item.answer_html}}
                    <img style="width: 100%;" src="{{faq_item.image.src}}" alt="{{faq_item.image.alt}}">
                    <a href="{{faq_item_link.url}}">
                      {{ faq_item_link.text }}
                    </a>
                  </div>
                <div>
              {%- endfor -%}  
            </div>
          {%- endif -%}

        </div>
      {%- endif -%}
    </div>
  </div>
</div>

FormTemplate Sample

We used Bootstrap to style the FormTemplate.
It handles all field_types from the form object by using the liquid-forloop.

HTML

{%- comment -%} FormTemplate - sample {%- endcomment -%}

{%- assign form_id = '-' | append: parent_uuid -%}

<form class="form-template form--{{form.name}}" action="{{ form_action }}" method="post" enctype="multipart/form-data">
  {{ required_form_tag }}

  {% for form_field in form.form_fields %}
    {%- assign ff_id = form_field.name | append: form_id -%}
    {%- assign ff_label_id = form_field.name | append: '-label' | append: form_id -%}
    {%- assign form_field_name = form_field.name -%}

    {% if form_field.field_type == 'input' %}
      {%- if form_field.input_type == 'checkbox' -%}
        {%- assign checkbox_label = form_field.label -%}
        <div class="form-group form-check mb-3">
          <input type="checkbox" class="form-check-input" id="{{ff_id}}" name="{{form_field.name}}" aria-describedby="{{ff_label_id}}" {{form_field.required}}>
          <label class="form-check-label" id="{{ff_label_id}}" for="{{ff_id}}">
            {{ checkbox_label }}
            {% unless form_field.required == blank %}
              <span class="text-danger">*</span>
            {% endunless %} 
          </label>
        </div>
      {%- else -%}
        <div class="form-group mb-3">
          <label for="{{ff_id}}" id="{{ff_label_id}}">{{ form_field.label }} 
            {% unless form_field.required == blank %}
              <span class="text-danger">*</span>
            {% endunless %}    
          </label>
          <input type="{{ form_field.input_type }}" class="form-control" id="{{ff_id}}" name="{{ form_field.name }}"  {% if form_field.input_type == 'url' %} pattern="https?://.+" title="Eine URL beginnt mit 'https://' oder 'http://'." placeholder="https://..." {% endif %}  aria-describedby="{{ff_label_id}}" {{form_field.required}}>
        </div>
      {%- endif -%}
    {% elsif form_field.field_type == 'select_tag' %}
      <div class="form-group mb-3">
        <label for="{{ff_id}}" id="{{ff_label_id}}">
          {{form_field.label}}
        </label>
        <select class="form-control" name="{{form_field.name}}" id="{{ff_id}}" aria-describedby="{{ff_label_id}}">
          {% for select_option in form_field.select_options %}
            <option value="{{select_option}}">{{select_option}}</option>
          {% endfor %}
        </select>
      </div>
    {% elsif form_field.field_type == 'textarea' %}
    <div class="form-group mb-3">
      <label for="{{ff_id}}" id="{{ff_label_id}}">{{ form_field.label }}
        {% unless form_field.required == blank %}
          <span class="text-danger">*</span>
        {% endunless %}      
      </label>
      <textarea class="form-control" id="{{ff_id}}" name="{{ form_field.name }}" aria-describedby="{{ff_label_id}}" rows="3" {{form_field.required}}></textarea>
    </div>
    {% elsif form_field.field_type == 'submit' %}
      <div class="mb-3">
        <button class="btn btn-lg btn-outline-primary" type="submit">{{form_field.label}}</button>
      </div>
    {% endif %}
  {% endfor %}
</form>

Templates ​

Layout ​

content_for_head ​

content_for_layout ​

PageTemplate ​

header_content_for_page ​

main_content_for_page ​

footer_content_for_page ​

SectionTemplate ​

FormTemplate ​

form_action ​

required_form_tag ​

parent_uuid ​

Sample Templates ​

Layout Sample ​

PageTemplate Sample ​

SectionTemplate Sample ​

FormTemplate Sample ​

Templates

Layout

content_for_head

content_for_layout

PageTemplate

header_content_for_page

main_content_for_page

footer_content_for_page

SectionTemplate

FormTemplate

form_action

required_form_tag

parent_uuid

Sample Templates

Layout Sample

PageTemplate Sample

SectionTemplate Sample

FormTemplate Sample