分区和区块

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

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

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

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

分区和区块数量上限

分区和区块有以下数量上限:

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

区块来源

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

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

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

分区中应用区块的供货情况取决于应用的功能以及分区是否可以接受应用区块。

分区区块

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

包含分区区块的分区示例

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

  • 一个电子邮件表单区块
  • 一个标题区块
  • 一个子标题区块

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

如果您已添加电子邮件注册分区的所有三个可用区块,则区块选择器会显示一条消息,提示所有可用区块均已使用。

模板区块

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

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

包含模板区块的分区示例

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

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

幻灯片 区块添加到 幻灯片组 部分后,您可以点击 Plus circle 添加区块,以将其他区块(例如标题图片按钮)添加到 幻灯片组 部分中的任何 幻灯片 区块。这些区块嵌套在 幻灯片 区块中。这是一个嵌套区块的示例。

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

模板区块兼容性

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

步骤:

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

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

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

    模板代码编辑器中突出显示的 blocks 文件夹

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

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

添加部分

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

步骤:

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

  2. 找到要编辑的模板,然后点击编辑模板

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

  4. 在侧边栏中,点击 Plus circle 添加部分,然后执行以下任一步骤:

    • 从列表中选择一个部分。
    • 使用搜索部分字段查找特定部分,然后选择它。
  5. 通过执行以下任一步骤来自定义您的新部分:

    • 编辑新部分的设置和内容。
    • 编辑随部分加载的默认区块的设置和内容。
    • 点击 Plus circle 添加区块添加新区块
  6. 可选:若要重新排列页面上各部分的顺序,请将光标悬停在部分名称上,然后点击并拖动 Drag and drop 图标。

  7. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 自定义您的主页,或轻触主页下拉菜单,然后选择要添加部分的模板。

  6. 轻触部分,然后轻触添加部分,再执行以下任一步骤:

    • 从列表中选择一个部分,然后轻触添加
    • 轻触 search 按钮以搜索特定部分,选择您的部分,然后轻触添加
  7. 通过执行以下任一步骤来自定义您的新部分:

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

  9. 轻触保存

编辑部分

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

  2. 找到要编辑的模板,然后点击编辑模板

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

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

  5. 可选:点击单个区块以编辑部分中的区块。

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 编辑主页上的某个部分,或轻触主页下拉菜单,然后选择包含要编辑的部分的模板。

  6. 轻触部分,然后轻触某个部分名称以将内容加载到预览窗口中,并访问可供您编辑的设置和选项。

  7. 可选:轻触单个区块以编辑部分中的区块。

  8. 轻触保存

重新排列部分或区块

您可以更改页面模板上各部分的顺序,并重新排列这些部分中的区块。此外,您还可以在不同部分之间移动兼容的区块。例如,如果您的主页有两个 幻灯片组 部分,则可以将一个 幻灯片 区块从一个幻灯片组拖到另一个幻灯片组中。

如果区块类型不兼容,或者部分已达到区块数量上限,则无法将区块移动到其他部分。如果您尝试将部分或区块移动到无效位置,它将返回其原始位置。

您还可以使用预览检查器来重新排列部分。详细了解如何使用模板编辑器中的预览检查器

步骤:

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

  2. 找到要编辑的模板,然后点击编辑模板

  3. 若要编辑主页上的分区或块,可以直接选择它,也可以使用主页下拉菜单选择包含您要编辑的分区或块的特定模板。

  4. 点击并按住 Drag and drop,然后将块或分区拖动到新位置。

  5. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 在您要编辑的模板旁边,轻触 编辑模板

  5. 若要编辑主页上的分区或块,可以直接选择它,也可以使用主页下拉菜单选择包含您要编辑的分区或块的特定模板。

  6. 轻触分区 > 编辑

  7. 轻触并按住 Drag and drop,然后将块或分区拖动到新位置。

  8. 轻触完成

  9. 轻触保存

复制分区或块

您可以复制分区或块以创建该分区或块的相同副本。

复制块后,新块会添加到同一分区中。如果您想将块移动到新分区或更改块顺序,则可以 重新排列块。您也可以复制块,然后将其直接粘贴到其他分区中

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

  2. 找到要编辑的模板,然后点击编辑模板

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

  4. 右键点击要复制的分区或块,然后点击复制

  5. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 在您要编辑的模板旁边,轻触 编辑模板

  5. 在您的主页上复制分区或块,或轻触主页下拉菜单,然后选择包含您要复制的分区或块的模板。

  6. 轻触分区 > 编辑

  7. 轻触 Horizontal menu > 复制

  8. 轻触保存

复制和粘贴块

如果您想在多个分区中使用同一块,可以轻松地将其复制并粘贴到其他分区中。您还可以在同一分区内复制和粘贴块,或者您也可以改为选择复制块。复制的块将保留原始块的所有设置和内容。

步骤:

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

  2. 在您要编辑的模板旁边,点击编辑模板

  3. 若要复制和粘贴主页上的块,可以直接选择它,也可以使用主页下拉菜单选择包含您要编辑的分区或块的特定模板。

  4. 右键点击要复制的块,然后点击复制

  5. 在同一分区或其他分区中,在该分区中右键点击,然后点击粘贴

  6. 点击保存

隐藏或删除分区或块

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

  2. 找到要编辑的模板,然后点击编辑模板

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

  4. 可选:若要从您的在线商店中隐藏分区或块,请将鼠标悬停在分区或块的名称上,然后点击 Hide 按钮。

  5. 可选:若要从您的在线商店中删除分区或块,请将鼠标悬停在分区或块的名称上,然后点击 Delete 按钮。

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 在您的主页上隐藏或删除分区或块,或轻触主页下拉菜单,然后选择包含您要隐藏或删除的分区或块的模板。

  6. 轻触分区,然后轻触要隐藏或删除的分区或块。

  7. 可选:若要从您的在线商店中隐藏分区或块,请轻触 Horizontal menu > 隐藏

  8. 可选:若要从您的在线商店中删除分区或块,请轻触 Horizontal menu > 删除

  9. 轻触保存

重命名分区或块

默认情况下,模板编辑器侧边栏菜单和设置详细信息中的分区或块标题将设置为块或分区类型,例如“产品系列”或“文本”。

对于块,如果块设置包含文本字段(例如标题或描述),则该文本也会附加到侧边栏菜单中的标题后。如果有多个文本字段,则会附加第一个包含内容的文本字段。当您更改文本字段中的文本时,块标题会随之更改以包含更新后的文本。分区或块的名称不能为空。

例如,您将一个带有 块的 多列 分区添加到页面模板。该列块包含一个 标题 设置(默认文本为 )和一个 描述 设置(默认文本为 将文本与图片配对,以重点介绍您选择的产品、产品系列或博客文章。)。默认分区标题为 多列。默认的 块标题是 列 - 。如果您删除 标题 设置中的文本,块标题将更新为 列 - 将文本与图片配对...

您可以进入模板编辑器侧边栏菜单,在分区或块的设置中将其重命名为自定义名称。

步骤:

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

  2. 找到要编辑的模板,然后点击编辑模板

  3. 点击要重命名的分区或块。

  4. 通过以下任一方式更新标题:

  • 点击标题,然后编辑或输入新名称。
  • 点击 Horizontal menu > Edit 重命名,然后输入新名称。
  1. 点击保存
移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 轻触或滑动以打开分区菜单。

  6. 轻触要重命名的分区或块以打开设置。

  7. 轻触 Horizontal menu > Edit 重命名,然后输入新名称。

  8. 轻触保存

使用块

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

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

其他分区允许您选择任何块,但您可以添加到分区中的块总数存在限制。如果您的分区达到可用的最大块数,则 添加块 选项将灰显,您将无法点击或轻触它。

您可以使用搜索功能按名称查找特定块,或从块选择器下拉菜单中选择一个块。在块选择器中,您主题的块可能已按类别排序,例如,包含产品系列选择器的块会归入产品系列类别,而图片和视频块会归入媒体类别。

块的预览将显示在块选择器中,以便您在添加该块之前查看其显示效果。

添加块

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

  2. 找到要编辑的模板,然后点击编辑模板

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

  4. 将鼠标悬停在要添加块的分区上,点击添加块,然后执行以下步骤之一:

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

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 您可以在主页上的分区中添加块,也可以轻触主页下拉菜单,然后选择要向其中添加块的模板。

  6. 轻触分区,然后针对要添加块的分区,轻触 添加,然后执行以下步骤之一:

    • 从列表中选择一个块。
    • 轻触 搜索 按钮以搜索特定块,然后选择您的块。
  7. 轻触保存

结合使用元字段和元对象与动态资源

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

例如,如果您销售蜡烛,则可能希望在您的商店中为每种在售的蜡烛显示燃烧时间。在 Shopify 后台设置的自定义数据部分中为 燃烧时间 设置产品元字段后,您可以在产品模板的主分区中添加文本块。在文本块中,您可以点击文本设置上的 动态资源 按钮,然后选择燃烧时间元字段。燃烧时间信息现在将显示在您的产品上。

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

并非所有分区或块都支持动态资源。请在 主题编辑器 中查看您 主题的架构版本 和可用的自定义选项,以确定您的主题是否支持动态资源。

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

完成设置过程后,请按照以下步骤操作,使用 连接动态资源 按钮将动态资源连接到您主题中的分区或块。

步骤:

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

  2. 找到要编辑的模板,然后点击编辑模板

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

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

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

  6. 点击保存

移动设备
  1. Shopify 应用中,轻触 Menu 图标。

  2. 销售渠道部分,轻触在线商店

  3. 轻触管理所有模板

  4. 找到要编辑的模板,然后轻触编辑模板

  5. 编辑主页上的分区或块,或者轻触主页下拉菜单,然后选择包含要编辑的分区或块的模板。

  6. 轻触分区,然后轻触分区或块名称以将内容加载到预览窗口,并访问可供您编辑的设置和选项。

  7. 轻触要编辑的相关内容类型的 动态资源 按钮,然后 连接您的动态资源

  8. 轻触保存

详细了解在您的在线商店上显示元字段在您的在线商店上显示元对象

动态资源选择器

动态资源选择器

您可以使用动态资源选择器直接在主题编辑器中连接正确的动态资源。请查看动态资源选择器的以下主要功能:

  • 在适用的情况下,您可以引用来自各种资源的动态资源。例如,如果您将某个设置连接到同时与产品资源和页面资源相关联的块,则可以在动态资源选择器中使用下拉菜单来指定要搜索与产品资源关联的元字段还是与页面资源关联的元字段。
  • 动态资源选择器具有搜索和筛选功能,可帮助您找到所需的元字段。
  • 动态资源选择器可让您选择类别元字段。这些是您为产品分配产品类别后可用的其他属性。访问这些元字段可让您将动态资源连接到底层属性元对象上的任何相关字段。