Blocks

What are blocks and how to use them?

---

Blocks are really similar to sections. They are a subset for sections, a way to define customisable content in a section.

Dynamic blocks

You can define dynamic block area with the container tag like this:

{% container %}

if a section has multiple container, you can define namess for them like this:

<div class="row">
    <div class="col">
        {% container 'first-container' %}
    </div>

    <div class="col">
        {% container 'second-container' %}
    </div>
</div>

names can even be variables so containers can be created dynamically making it possible to create even more flexible UIs!

Static blocks

If the block should be static, i.e. you wish to create a configurable area inside a section, you can use blocks for this. To create a static block, just use the block tag. This block cannot be removed or moved but it works just the same way as other dynamic ones do.

{% block 'block-name' id:'optional-id' %}

block-name must match a block file in your theme files. If your block name is my-block then your theme must have a block defined in blocks/my-block.liquid

## Schema

blocks/example-block.liquid

<p>{{ block.settings.text_setting }}</p>

{% schema %}
{
    "name": "Example block", // optional
    "tag": "div", // HTML tag this block is wrapped with, defaults to div
    "class": "", // additional classes for the wrapping HTML element
    "category": "block-category-id", // optional, block category if any,
    "templates": [], // a whitelist of suitable templates to make this available to
    "settings": [
        {
            "type": "text",
            "id": "text_setting",
            "label": "My text setting",
            "default": "Default text"
        }
    ]
}
{% endschema %}

## Settings

The settings are same for blocks that they are for sections. You can read more about settings from the sections guide.