Overview

Section schema enables you to create reusable content modules, which is adjustable by merchants. You can also include blocks that allow merchants to add, remove, and reorder section content.

Below are the list of attributes of the schema. For the list of setting types available, please check here.

Section schema

Section is used to describe how data is displayed and operated. It must be valid JSON format data. This schema has the following attributes:

Attribute	Type	Required
name	I18n	Yes
settings	Array	No
blocks	Array	No
max_blocks	Number	No
is_blocks_fixed	Boolean	No
presets	Object	No
ui_options	Object	No

name

The name attribute determines the section title displayed in the theme editor. For example, the following schema will display the output below:

Example code:

{
  "name": {
    "en": "Image with Text",
    "zh-hant": "圖文組合"
  }
}

Effect in the editor::

settings

You can create section specific configurations using the settings object, allowing merchants to customize the section.

Example code:

{
  "name": {
    "en": "Image with Text",
    "zh-hant": "圖文組合"
  },
  "settings": [
    {
      "type": "text",
      "id": "title",
      "is_multi_lang": true,
      "label": { 
        "en": "Title",
        "zh-hant": "標題"
      },
      "default": "Paragraph Title"
    }
  ]
}

blocks

Blocks are reusable content modules that merchants can add, delete, and reorder within a section.

Blocks have the following attributes:

Attribute	Description	Type	Required
name	Block name.	I18n	Yes
type	Block type, unique value.	String	No
settings	Block configuration settings.	Array	No
ui_options	Ui configuration options.	Object	No
ui_options.icon	lock icon, Use the Icon value , You can also use the http url image.	Icon \| string as http url	No

Example code:

{
  "name": {
    "en": "Image with Text",
    "zh-hant": "圖文組合"
  },
  "blocks": [
    {
      "name": { 
        "en": "Text"
      },
      "type": "text",
      "settings": [
        {
          "id": "title",
          "type": "text",
          "is_multi_lang": true,
          "label": {
            "en": "Title",
            "zh-hant": "標題"
          },
          "default": "Paragraph Title"
        }
      ]
    },
    {
      "name": {
        "en": "Image",
        "zh-hant": "圖片"
      },
      "type": "image",
      "settings": [
        {
          "id": "desktop_image",
          "type": "image_picker",
          "label": {
            "en": "Desktop",
            "zh-hant": "桌機"
          },
          "default": {}
        }
      ]
    }
  ]
}

max_blocks

The maximum number of blocks that can be set in section. If not configured, there is no limit.

is_blocks_fixed

The default value is false. If set to true, blocks can no longer be added or deleted. Please configure carefully.

Effect in the editor:

Set is_blocks_fixed to true, and blocks cannot be added or deleted.

presets

Presets defines the default blocks when adding a new section.

Presets have the following attributes:

Attribute	Description	Type	Required
blocks	Block Configuration.	Array	No
blocks[].type	Block Type, Need to be consistent with the type configured in blocks.	String	No

Example code:

{
  "name": {
    "en": "Image with Text",
    "zh-hant": "圖文組合"
  },
  "type": "image-with-text",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "is_multi_lang": true,
      "label": {
        "en": "Title",
        "zh-hant": "標題"
      },
      "default": "Paragraph Title"
    }
  ],
  "blocks": [
    {
      "name": {
        "en": "Text"
      },
      "type": "text",
      "settings": [
        {
          "id": "title",
          "type": "text",
          "label": {
            "en": "Title",
            "zh-hant": "標題"
          }
        }
      ]
    },
    {
      "name": {
        "en": "Image",
        "zh-hant": "圖片"
      },
      "type": "image",
      "settings": [
        {
          "id": "desktop_image",
          "type": "image_picker",
          "label": {
            "en": "Desktop",
            "zh-hant": "桌機"
          },
          "default": {}
        }
      ]
    }
  ],
  "presets": [
    {
      "blocks": [
        { "type": "image" },
        { "type": "text" }
      ]
    }
  ]
}

Effect in the editor:

ui_options

ui configuration options. ui_options have the following attributes:

Attribute	Description	Type	Required
icon	Block icon, Use the Icon value , You can also use the http url image.	Icon \| string as http url	No
empty_blocks_content	Content when no blocks are added.	I18n	No
blocks_content	block description	I18n	No

Example code:

{
  "name": {
    "en": "Image with Text",
    "zh-hant": "圖文組合"
  },
  "type": "image-with-text",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "is_multi_lang": true,
      "label": { 
        "en": "Title",
        "zh-hant": "標題"
      },
      "default": "Paragraph Title"
    }
  ],
  "blocks": [
    {
      "name": { 
        "en": "Text"
      },
      "type": "text",
      "settings": [
        {
          "id": "title",
          "type": "text",
          "is_multi_lang": true,
          "label": {
            "en": "Title",
            "zh-hant": "標題"
          },
          "default": "Paragraph Title"
        }
      ],
      "ui_options": {
        "icon": "text"
      }
    },
    {
      "name": {
        "en": "Image",
        "zh-hant": "圖片"
      },
      "type": "image",
      "settings": [
        {
          "id": "desktop_image",
          "type": "image_picker",
          "label": {
            "en": "Desktop",
            "zh-hant": "桌機"
          },
          "default": {}
        }
      ],
      "ui_options": {
        "icon": "image"
      }
    }
  ],
  "presets": [
    {
      "blocks": []
    }
  ],
  "ui_options": {
    "empty_blocks_content": {
      "en": "You have not added any blocks."
    },
    "blocks_content": {
      "en": "You can drag your blocks to sort them."
    }
  }
}

Effect in the editor: