section

当你打开一个shopify的主题项目后会在项目根目录下看到一个sections文件夹，里面存放着主题的各个模块，比如header.liquid、footer.liquid、article.liquid等等。

自定义一个section

1. 创建section

在sections文件夹下创建一个custom-section.liquid文件，这个文件就是自定义的section。

这个文件中可以包含任意的liquid代码，比如html、css、js等。

有一些基础的部分如下：

{% schema %}
  {
    "name": "",
    "tag": "section",
    "class": "",
    "settings": [
      
    ],
    "blocks": [],
    "presets": [
      {
        "name": "",
        "settings": {
        }
      }
    ]
  }
{% endschema %}

{% schema %}和{% endschema %}之间的内容是section的配置信息，包括section的名称、标签、样式类、设置项等。

name是section的名称，会在后台的section列表中显示。

tag是section的标签，默认是section，也可以是其他的标签，比如div、header、footer等。

class是section的样式类，可以在后台的section设置中添加自定义的样式类。

settings是section的设置项，可以在后台的section设置中添加自定义的设置项。 例如可以在settings中写入如下配置：

"settings": [
  {
    "type": "text",
    "id": "title",
    "label": "标题"
  },
  {
    "type": "image_picker",
    "id": "image",
    "label": "图片"
  }
]

blocks是section的块，可以在后台的section设置中添加自定义的块。 例如可以在blocks中写入如下配置：

"blocks": [
  {
    "type": "text",
    "name": "文本",
    "settings": [
      {
        "type": "text",
        "id": "text",
        "label": "文本内容"
      }
    ]
  },
  {
    "type": "image",
    "name": "图片",
    "limit": 10,
    "settings": [
      {
        "type": "image_picker",
        "id": "image",
        "label": "图片"
      }
    ]
  }
]

presets是section的预设，可以在后台的section列表中添加预设的section。