分区和块

您可以使用模板分区为在线商店创建所需布局。分区由不同类型的块组成,每个块具有特定功能,例如文本、按钮、单个图片、图片拼贴或链接。

分区和块为您的内容排列提供了灵活性,并且让您无需编辑代码即可控制在线商店的外观和风格,其中包括以下自定义选项:

  • 您可以重新排列模板中的分区,还可重新排列分区中的块。
  • 分区和块可以具有特定的自定义设置。
  • 您可以连接兼容的分区和块,以便在在线商店中显示来自自定义数据的动态信息,例如为产品添加保养说明。详细了解如何连接动态源

模板编辑器中提供的分区和块取决于您的模板和模板版本。例如,您的模板可能有一个只能添加到幻灯片分区的幻灯片块,以及一个可添加到所有模板分区的标题文本块。有关哪些选项可供您使用的详细信息,请参阅您的模板文档。

分区和块的最大限制

分区和块的最大限制如下所示:

  • 每个模板最多可有 25 个分区。
  • 每个分区最多可以包含 50 个块。确切的块数量以及您可添加到每个分区的每种块类型的数量取决于分区和块源,并且由您的模板的模板设计师来指定。例如,如果您的模板有一个电子邮件注册信息分区,那么您可能只能添加一个电子邮件表单块。
  • 支持嵌套的块最多可以有 8 层嵌套块。

块源

根据您的模板结构以及已安装的应用,您的模板可能包含接受来自不同来源的块的各种分区。当您向分区添加块时,该分区的所有可用块都显示在块选择器中。根据您的模板和模板版本,您可以将以下类型的块添加到模板的分区中:

  • 应用块是向模板添加功能的块。您可以使用应用块将已安装的应用添加的模板区域重新置于模板页面的特定区域。
  • 分区块是在特定分区中定义的块。
  • 模板区块是在模板中定义的块,可以具有嵌套等动态功能。

模板可以包含一些使用分区块的分区,以及其他使用模板区块的分区。单个分区可以接受模板区块或分区块,但不能同时接受这两者。

分区中应用块的可用性取决于应用的功能,以及该分区是否可以接受应用块。

分区块

分区块是专为特定分区设计的块。分区可以限制分区块的类型,并限制您可以添加的特定类型的块的数量。

包含分区块的分区示例

例如,您的模板有一个电子邮件注册信息分区。您可以使用此分区添加新闻通讯注册表单,以便客户可以订阅您的新闻通讯。添加电子邮件注册信息分区后,对于下面每种类型的块,您都可以添加一个:

  • 电子邮件表单
  • 标题
  • 副标题

如果您添加电子邮件表单块,并点击 + 添加块来添加另一个块,则电子邮件表单块将不再在块选择器中显示为一个选项。此限制有助于防止在捕获客户电子邮箱时出现任何问题,并确保客户能够轻松输入其电子邮件地址。

如果您为电子邮件注册信息分区添加了上述所有三个可用块,块选择器会显示一条消息,指出所有可用块都已被使用。

模板区块

模板区块是在模板中定义的块,可以具有嵌套等动态功能。接受模板区块的分区可以接受各种不同的块,具体取决于该分区的结构。接受模板区块的分区可能会接受所有可用的模板区块、特定的块子集或该分区独有的块。模板区块可能也具有以下行为:

  • 某些块支持嵌套,因此您可以在其他块中嵌套最多 8 层的块。
  • 某些分区具有必需的块。您可以自定义或隐藏这些块,但无法重新排序或删除它们。
  • 当满足某些条件时,某些块会自动显示在分区中。

包含模板区块的分区示例

例如,您的模板有一个包含模板区块的幻灯片分区。

在模板的幻灯片分区中,点击 + 添加块时,您可以从块选择器中选一个幻灯片块。没有其他的块类型可用。如果您尝试将幻灯片块添加到模板中的其他分区(例如图片横幅分区)中,则幻灯片不可用。这是受限块的示例。

幻灯片块添加到幻灯片分区后,您可以点击 + 添加块,向幻灯片分区中的任何幻灯片块添加额外的块,例如标题图片按钮。这些块嵌套在幻灯片中。这是嵌套块的示例。

如果您向幻灯片分区添加第二个幻灯片块,该模板会自动添加一个幻灯片控件块。这个块会显示访问您网站的访客可点击来从一张幻灯片导航到另一张幻灯片的按钮。您可以自定义按钮的样式或隐藏控件,但无法删除或删除此块。这是按条件显示的必需块的示例。

模板区块兼容性

要访问模板区块,您的模板必须具有支持模板区块的分区。您可以在模板代码中检查您的模板是否支持模板区块。如果 Liquid 编辑器的侧边栏中有一个目录,则表示您使用的模板支持模板区块。您还可以查看您的模板文档。

步骤:

  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 在要检查的的模板旁边,点击 ... 按钮,然后点击编辑代码

  3. 在侧边栏中,搜索块文件夹。

    在模板代码编辑器中突出显示块文件夹

使用分区和块自定义模板样式

打开模板编辑器时,默认加载商店主页。您可以使用下拉菜单选择其他模板,例如产品、产品系列、页面或博客,或使用模板下拉菜单中的搜索栏搜索特定模板。选择模板时,模板将加载到模板编辑器中,您所做的任何更改都在编辑器中预览。

添加分区

向在线商店的任何页面添加新分区。

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 自定义主页,或者点击主页下拉菜单,然后选择要添加分区的模板。

  4. 在侧边栏中,点击 + 添加分区,然后执行以下步骤之一:

    • 从列表中选择一个分区。
    • 使用搜索分区字段查找并选择特定分区。
  5. 执行以下任何步骤来自定义新分区:

    • 编辑新分区的设置和内容。
    • 编辑分区加载的默认块的设置和内容。
    • 点击 + 添加块添加新块
  6. 可选:若要重新排列页面上的分区,将鼠标悬停在分区名称上,然后点击并拖动 ⋮⋮ 图标。

  7. 点击保存

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 自定义主页,或者轻触主页下拉菜单,然后选择要添加分区的模板。
  6. 轻触分区,然后轻触添加分区,然后执行以下步骤之一:

    • 从列表中选择一个分区,然后轻触添加
    • 轻触放大镜图标搜索特定分区,选择所需分区,然后轻触添加
  7. 执行以下任何步骤来自定义新分区:

    • 编辑新分区的设置和内容。
    • 编辑分区加载的默认块的设置和内容。
    • 轻触添加块添加新块
  8. 可选:若要重新排列页面上的分区,轻触并拖动分区。

  9. 轻触保存

Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 自定义主页,或者轻触主页下拉菜单,然后选择要添加分区的模板。
  6. 轻触分区,然后轻触添加分区,然后执行以下步骤之一:

    • 从列表中选择一个分区,然后轻触添加
    • 轻触放大镜图标搜索特定分区,选择所需分区,然后轻触添加
  7. 执行以下任何步骤来自定义新分区:

    • 编辑新分区的设置和内容。
    • 编辑分区加载的默认块的设置和内容。
    • 轻触添加块添加新块
  8. 可选:若要重新排列页面上的分区,轻触并拖动分区。

  9. 点击

编辑分区

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 在主页上编辑分区,或者点击主页下拉菜单,然后选择包含要编辑的分区的模板。

  4. 在边栏中,点击分区名称,将内容加载到预览窗口中,访问可编辑的设置和选项。

  5. 可选:点击各个块,编辑分区中的块。

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上编辑分区,或者轻触主页下拉菜单,然后选择包含要编辑的分区的模板。
  6. 轻触分区,然后点击分区名称,将内容加载到预览窗口中,访问可编辑的设置和选项。
  7. 可选:轻触各个块,编辑分区中的块。
  8. 轻触保存
Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上编辑分区,或者轻触主页下拉菜单,然后选择包含要编辑的分区的模板。
  6. 轻触分区,然后点击分区名称,将内容加载到预览窗口中,访问可编辑的设置和选项。
  7. 可选:轻触各个块,编辑分区中的块。
  8. 点击

复制分区或块

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 在主页上复制分区或块,或者点击主页下拉菜单,然后选择包含要复制的分区或块的模板。

  4. 点击要复制的分区或块。

  5. 在边栏中,点击 ... > 复制

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上复制分区或块,或者轻触主页下拉菜单,然后选择包含要复制的分区或块的模板。
  6. 轻触分区,然后轻触要复制的分区或块。
  7. 轻触 > 复制
  8. 轻触保存
Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上复制分区或块,或者轻触主页下拉菜单,然后选择包含要复制的分区或块的模板。
  6. 轻触分区,然后轻触要复制的分区或块。
  7. 轻触 > 复制
  8. 点击

隐藏或删除分区或块

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 在主页上隐藏或删除分区或块,或者点击主页下拉菜单,然后选择包含要隐藏或删除的分区或块的模板。

  4. 可选:要隐藏在线商店中的分区或块,在分区或块名称上悬停,然后点击眼睛图标。

  5. 可选:要删除在线商店中的分区或块,在分区或块名称上悬停,然后点击垃圾桶图标。

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上隐藏或删除分区或块,或者轻触主页下拉菜单,然后选择包含要隐藏或删除的分区或块的模板。
  6. 轻触分区,然后轻触要隐藏或删除的分区或块。
  7. 可选:要隐藏在线商店中的分区或块,轻触 > 隐藏
  8. 可选:要从在线商店中删除分区或块,轻触 > 删除
  9. 轻触保存
Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上隐藏或删除分区或块,或者轻触主页下拉菜单,然后选择包含要隐藏或删除的分区或块的模板。
  6. 轻触分区,然后轻触要隐藏或删除的分区或块。
  7. 可选:要隐藏在线商店中的分区或块,轻触 > 隐藏
  8. 可选:要从在线商店中删除分区或块,轻触 > 删除
  9. 点击

使用块

块是用于向模板分区添加内容的可自定义模块。您可以使用块添加文本、图片、链接、按钮等。

Shopify 模板中包含您可以自定义的分区和块。某些分区具有固定的块类型,这意味着只能选择模板设计器为该分区提供的块。

其他分区允许您选择任何块,但您可以添加到该分区的总块数有限制。如果分区达到可用块数上限,添加块选项将变成灰色,无法点击或轻触。

添加块

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 您可以在主页上添加块或分区,或者点击主页下拉菜单,然后选择要添加块的模板。

  4. 找到要添加块的分区,点击添加块,然后执行以下步骤之一:

    • 从列表中选择一个块。
    • 使用搜索块字段查找并选择特定块。
  5. 点击保存

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 您可以在主页上添加块或分区,或者轻触主页下拉菜单,然后选择要添加块的模板。
  6. 轻触分区,然后为要添加块的分区轻触添加块,然后执行以下步骤之一:

    • 从列表中选择一个块。
    • 轻触放大镜图标搜索特定块,选择所需块。
  7. 轻触保存

Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 您可以在主页上添加块或分区,或者轻触主页下拉菜单,然后选择要添加块的模板。
  6. 轻触分区,然后为要添加块的分区轻触添加块,然后执行以下步骤之一:

    • 从列表中选择一个块。
    • 轻触放大镜图标搜索特定块,选择所需块。
  7. 点击

通过动态源使用元字段和元对象

您可以使用元字段元对象在在线商店中显示动态信息。如果您有支持元字段的模板,您可以将元字段连接到模板编辑器中的兼容分区或块设置。

例如,如果您销售蜡烛,您可能想要在商店中显示每款在售蜡烛的燃烧时间。在 Shopify 后台设置的自定义数据分区中为燃烧时间设置产品元字段后,您可以在产品模板的主分区添加一个文本块。在文本块中,您可以点击文本设置上的连接动态源图标并选择燃烧时间元字段。您的产品上现在将显示燃烧时间信息。

如果您有 Shopify 模板,则可以通过使用模板编辑器来将大多数元字段和元对象连接到您的模板。如果您使用其他模板,或者您要添加您的模板不支持的自定义数据类型,则可以编辑您的模板代码,或聘请 Shopify 合作伙伴来帮助您。详细了解如何聘请 Shopify 合作伙伴

并非所有分区或块都支持动态源。请参阅您的模板文档了解详细信息。

您可以添加可使用动态源的分区或块,在您的在线商店中显示动态信息。动态源可用于显示兼容的资源(产品、产品系列、页面、博客和博客文章)的任何模板、分区或块。您需要先添加元字段,然后才能在模板中连接它。请参阅动态源,详细了解如何通过动态源在模板中使用元字段和元对象。

完成设置过程后,按照以下步骤使用连接动态源按钮

连接动态源图标
将动态源连接到模板中的分区或块

步骤:

桌面
  1. 在 Shopify 后台中,转至在线商店 > 模板

  2. 找到您要编辑的模板,然后点击自定义

  3. 在主页上编辑分区或块,或者点击主页下拉菜单,然后选择包含要编辑的分区或块的模板。

  4. 在边栏中,点击分区或块名称,将内容加载到预览窗口中,访问可编辑的设置和选项。

  5. 为要编辑的相关内容类型点击连接动态源按钮,然后连接您的动态源

  6. 点击保存

iPhone
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上编辑分区或块,或者轻触主页下拉菜单,然后选择包含要编辑的分区或块的模板。
  6. 轻触分区,然后点击分区或块名称,将内容加载到预览窗口中,访问可编辑的设置和选项。
  7. 为要编辑的相关内容类型轻触连接动态源按钮,然后连接您的动态源
  8. 轻触保存
Android
  1. Shopify 应用中,点击 按钮。
  2. 销售渠道部分,轻触在线商店
  3. 点击管理所有模板
  4. 找到您要编辑的模板,然后轻触自定义
  5. 在主页上编辑分区或块,或者轻触主页下拉菜单,然后选择包含要编辑的分区或块的模板。
  6. 轻触分区,然后点击分区或块名称,将内容加载到预览窗口中,访问可编辑的设置和选项。
  7. 为要编辑的相关内容类型轻触连接动态源按钮,然后连接您的动态源
  8. 点击

详细了解如何在在线商店中显示元字段,以及如何在在线商店中显示元对象

动态源选择器

动态源选择器

您可以使用动态源选择器直接在模板编辑器中连接正确的动态源。请查看动态源选择器的以下关键功能:

  • 您可以在适用时引用各种资源的动态源。例如,如果您将设置连接到同时连接产品资源和页面资源的块,您可以使用动态源选择器的下拉菜单指定要否要搜索与产品或页面资源关联的元字段。
  • 动态源选择器具有搜索和筛选功能,可帮助您找到所需的元字段。
  • 使用动态源选择器可选择类别元字段。这些是为产品指定产品类别时可用的附加属性。通过访问这些元字段,可将动态源连接到基础属性元对象上的任何相关字段。
没有找到您需要的答案?我们将为您提供帮助。