分区组让商家可以灵活地在主题布局中添加、移除和重新排序版块,而无需更改主题代码。
如果您在分区组可用之前创建了主题,那么您可能会在布局文件中静态渲染一个或多个分区。由于分区组更具灵活性,而且可以减少代码修改的需要,因此你应该将布局文件中静态呈现的分区替换为默认包含这些分区的分区组。
当您将静态版块迁移到分区组时,Shopify 会尝试在主题更新过程中为商家迁移任何适用的设置。
步骤 1:创建新的分区组
为布局中包含静态部分的每个区域创建一个分区组。在大多数情况下,你需要创建一个页眉分区组和一个页脚分区组。
1.在sections
目录中,为分区组创建一个新的 JSON 文件。文件名应标识该分区组所代表的版面区域。例如,可以为页眉分区组创建一个名为 header-group.json 的文件。
2.在该文件中,添加基本分区组schema的数据,包括分区节组类型和名称。
{
"type": "header",
"name": "Header group",
"sections": {
},
"order": [
]
}
3.添加您想包含在分区组中的分区的引用。您应该包含该分区组要替换的所有静态分区,以便 Shopify 可以将商家的静态版块设置复制到该分区组。
例如,布局文件的页眉区域可能包含以下分区:
{% section 'announcement-bar' %}
{% section 'header' %}
您可以在新分区组中添加对这些分区的引用:
{
"type": "header",
"name": "Header Group",
"sections": {
"header": {
"type": "header",
"settings": {
}
},
"announcement-bar": {
"type": "announcement-bar",
"settings": {
}
}
},
"order": [
"announcement-bar",
"header"
]
}
步骤 2:用分区组标签替换静态分区标签
创建章节组 JSON 文件后,用新章节组替换布局文件中的静态章节:
layout/theme.liquid 文件删掉
{% section 'announcement-bar' %}
{% section 'header' %}
替换为
{% sections 'header-group' %}
主题更新的设置迁移
当商家将其主题从使用静态分区的版本更新到包含该分区的分区组的版本时,Shopify 会尝试将静态分区的设置复制到分区组中相应分区的设置中。Shopify 会根据分区类型映射这些设置。
例如,如果一个主题使用的分区组有一个header
类型的分区,Shopify 会从旧版本的 /config/settings_data.json 文件中复制header
类型分区的任何设置。
旧版settings_data.json文件
{
"current": {
"colors_solid_button_labels": "#ffffff",
"colors_accent_1": "#121212",
"sections": {
"header": {
"type": "header",
"settings": {
"color_scheme": "background-1",
"logo_width": 90,
"logo_position": "middle-left",
"menu": "main-menu",
"show_line_separator": true,
"enable_sticky_header": true,
"margin_bottom": 0
}
}
}
},
"presets": {}
}
新版本sections/header-group.json
{
"type": "header",
"name": "Header Group",
"sections": {
"header": {
"type": "header",
"settings": {
"color_scheme": "background-1",
"logo_width": 90,
"logo_position": "middle-left",
"menu": "main-menu",
"show_line_separator": true,
"enable_sticky_header": true,
"margin_bottom": 0
}
}
},
"order": [
"header"
]
}
发表回复