Section Types

Static Sections
Static sections are generic groupings of settings that you explicitly add to the page in liquid and allow the user to edit the content but not the location of the section.
<div class="header">
  <div class="container">
    <div class="media align-items-center">
      <div>
        <a href="/">
          <img src="{{ section.settings.logo | image_picker_url: 'logo.png' }}" kjb-settings-id="{{ 'logo' | settings_id: section: section }}"/>
        </a>
      </div>
      <div class="media-body text-right">
        <span kjb-settings-id="{{ 'menu' | settings_id: section: section }}">
          {% for link in current_site.link_lists[section.settings.menu].links %}
            <a href="{{ link.url }}">{{ link.name }}</a>
          {% endfor %}
        </span>
      </div>
    </div>
  </div>
</div>
{% schema %}
{
  "name": "Header",
  "elements": [
    {
      "type": "image_picker",
      "id": "logo",
      "label": "Logo Image"
    },
    {
      "type": "link_list",
      "id": "menu",
      "label": "Menu",
      "default": "main-menu"
    }
  ]
}
{% endschema %}
You will notice that the schema of this section does not have the preset tag. If a section has a preset tag it automatically gets added to the pickable section list. This section can only be used as a static section.
Static sections can be added to the page with the following
{% section "header" %}
Dynamic Sections
The only thing you need to do to make a section available for a user to add and reorder on a page is to add a preset to the sections schema. This will give the pickable section a title and a set of settings to start the section off with.
"presets": [
  {
    "name": "Section",
    "category": "Content",
    "blocks": [],
    "settings": {
    }
  }
]

Building Blocks - Previous

Sections

Next - Building Blocks

Blocks

Last modified 3yr ago

Copy link

On this page

Static Sections

Dynamic Sections