Shopify 主题中的块(blocks)
块(Blocks)概念
Shopify 中的块允许开发者通过将部分(sections)分解为更小、可重用的 Liquid 代码片段来创建灵活的布局。每个块都有自己的设置集，可以在部分内添加、删除和重新排序。
Shopify 有三种类型的块：
- 主题块(Theme blocks): 在
/blocks文件夹中创建为独立的Liquid文件，可在主题的多个部分中重复使用。 - 部分块(Section blocks): 在部分的 Liquid 文件内创建，仅限于在该部分内使用。
- 应用块(App blocks): 由商店安装的应用提供的块。
如何创建一个主题块(Theme block)
步骤 1: 创建 blocks 文件夹和块文件
在主题根目录下创建一个 /blocks 文件夹(如果尚不存在) 在该文件夹中创建一个新的 Liquid 文件，例如 text.liquid
步骤 2: 编写块的内容
主题块文件包含两部分:
- 标记(markup): 任何要在块中包含的 HTML 或 Liquid 内容
- 模式(schema): 使用 {% schema %} Liquid 标签，用于配置块的设置和属性 以下是一个基本的文本块示例:
<div class="{{ block.settings.text_style }}">
{{ block.settings.text }}
</div>
{% schema %}
{
"name": "Text",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "Text"
},
{
"type": "select",
"id": "text_style",
"label": "Text style",
"options": [
{
"value": "body",
"label": "Regular"
},
{
"value": "subtitle",
"label": "Subtitle"
}
],
"default": "body"
}
],
"presets": [
{
"name": "Text"
},
{
"name": "Content",
"settings": {
"text": "<p>Hello, World!</p>"
}
}
]
}
{% endschema %}
步骤 3: 添加预设(Presets)
预设需要在主题块的 schema 中定义，这样商家才能在主题编辑器的块选择器中使用它。可以为同一个主题块创建多个预设。在上面的例子中，文本主题块有两个名为Text和Content的预设。
在部分(Section)中使用主题块
创建主题块后，需要更新主题的部分以呈现这些块:
步骤 1: 在部分的 Liquid 文件中渲染块
使用以下代码在 section 文件中渲染块:
{% content_for 'blocks' %}
步骤 2: 更新部分的模式(schema)
要接受所有主题块，请在部分的 schema 的 blocks 属性中添加类型 @theme:
"blocks": [
{
"type": "@theme"
},
{
"type": "@app"
}
]
如何在可视化编辑器中使用创建的块
一旦您创建了主题块并在部分中启用了它们，商家就可以在 Shopify 主题编辑器中使用这些块:
- 在 Shopify 管理后台，转到”
在线商店” > “主题” - 点击您当前主题的”
自定义”按钮 - 导航到包含支持主题块的部分的页面
- 选择该部分，点击”
添加块”按钮 - 在出现的块选择器中，您将看到您创建的块(由于您添加的预设)
- 选择所需的块预设，它将被添加到部分中
- 使用块配置面板调整块的设置
- 您可以使用拖放功能重新排序块
关键是，确保块在 schema 中有正确的 presets 定义，这样它们才会出现在主题编辑器的块选择器中，并且确保你的部分在其 schema 中接受 @theme 类型的块。 通过遵循这些步骤，您可以创建高度可定制的 Shopify 主题，让商家能够轻松地使用拖放界面来构建他们的页面。
最后更新时间：
2026年6月27日