如何创建您的第一个 Shopify 主题部分

为您的客户提供创意控制是关键，尤其是当他们希望能够自定义其店面时。 Shopify 的部分功能是个性化 Shopify 主题的强大工具，因此有效地使用它们并遵循最佳实践将为您的客户解锁一系列选项。

如果您要从头开始构建 Shopify 主题或为客户调整主题，您将需要创建一些不同类型的部分，这将根据上下文而有所不同。 此外，客户期望用户友好和直观的体验，这意味着正确的部分，在正确的位置可以对转换产生巨大影响。

在本文中，我们将介绍如何开始创建不同类型的主题部分，以及使用它们的规则，以便您可以帮助您的客户自定义他们的商店。 我们还将探索源代码可用的 Dawn 主题中特定部分的一些示例，以准确演示如何在现实世界场景中使用它们。

什么是主题部分？

在高层次上，部分是商家可以自定义的 Shopify 主题的模块化组件。 部分包含 Shopify 商店特定区域的内容和设置，例如产品页面的基本元素或幻灯片组件。

在这些部分中，开发人员可以访问一系列不同的设置类型，从文本输入和图像选择器到自定义 HTML 和菜单，商家可以从主题编辑器中自定义这些设置类型并填充他们的内容。

部分包含在主题的/sections目录中，并且可以静态地包含在主题的布局文件中（如页眉和页脚），或者它们可以动态地添加到主题编辑器中的任何模板。 要了解可以表示为部分的各种组件，您可以浏览 Dawn 主题的/sections目录。

随着 Online Store 2.0 的推出，部分现在可以用作组织主题所有不同方面（从整个页面到单个元素）的主要方式。 正如我们将在本文中介绍的那样，向任何 JSON 模板添加部分的能力将使您能够轻松安排不同的页面，当商家自定义他们的主题时，这可以进一步增强。

模板和部分

了解部分如何在 Shopify 主题上工作的先决条件之一是了解 Shopify 的主题模板系统。 使用 Online Store 2.0，每个页面类型都可以表示为主题/templates目录中的一个.json文件。 开发人员可以通过定义默认情况下在这些 JSON 模板文件中显示哪些部分来构建每个页面类型。

这些 JSON 模板不包含任何用于显示商店内容的标记或 Liquid 对象，它们只是指示哪些部分将默认显示在页面上以及以何种顺序显示的简单数据文件。

product.json模板文件的基本示例如下：

在这种情况下，产品页面将呈现一个名为main-product.liquid的部分，并且它将是唯一默认显示的部分。 当商家自定义此页面并向页面添加更多部分时， product.json模板文件将使用此信息进行更新。 当我们查看部分如何包含在模板中时，我们将在本文中更多地探索这个过程。

章节基础

使用部分和 JSON 模板开发主题时，您可以考虑在两个不同的类别中构建部分文件：“主要”页面部分和单独的模块化组件。

主页部分

在主页部分中，您应该包括该页面的所有默认内容。 例如，在产品页面的主要部分中，您可以包含显示产品及其相关属性（如产品标题、描述、媒体、价格和添加到购物车表单）的重要元素。

您可以访问一个部分中的 Liquid 变量或对象，具体取决于该部分包含在哪个页面模板中。这意味着将在product.json模板中呈现的部分将能够访问product Liquid 的任何属性对象，表示正在呈现其页面的产品。

同样，包含在collection.json文件中的部分将能够访问collection Liquid 对象的所有属性。 所有部分，无论它们出现在哪里，都可以访问任何 Liquid 全局对象。

除了要添加到主页部分的标记和特定于页面的 Liquid 对象之外，您还可以在{% schema %}标记内创建设置。 这些设置可以引用部分中的元素，并且可以由商家在主题编辑器中配置。

由于主页部分包含特定于一种页面类型的标记，因此您只希望将其包含在其相关联的模板中。 为防止主页面部分从主题编辑器添加到其他页面类型，它不应在其部分架构中包含预设。

要查看主页部分的示例，您可以浏览 Dawn 的/sections目录中的main-product.liquid文件，或在标题中以main为前缀的任何部分。 作为一般规则，您还应该在标题中使用main来命名您的主页部分，以帮助您区分不同的部分类型。

模块化部分

模块化部分是可以在在线商店的不同区域重复使用的部分，并补充页面的主要元素。 这些类型的部分示例包括特色收藏、幻灯片和时事通讯注册表单。

这些部分通常由商家使用主题编辑器添加到页面，而不是默认添加到页面模板的部分。 为了通过编辑器将一个部分添加到页面，该部分必须在其模式中包含预设。 添加这些预设后，当商家在主题编辑器中单击添加部分时，该部分将成为一个可用选项。

与“主”页面部分不同，模块化部分通常包含可在不同页面类型和不同上下文中在 Shopify 商店中重复使用的内容和标记。 因此，开发人员应避免依赖这些部分中特定于页面的 Liquid 对象。

但是，可以通过使用节架构中的templates属性将节限制为仅在特定页面类型上可用。 例如，如果您想将某个部分限制为仅产品和产品系列页面，您可以将此行包含在该部分的schema标签中：

 "templates": ["product", "collection"]

templates属性接受表示页面类型的字符串列表。

根据您希望在主题中包含哪些功能，或者您的客户有哪些具体要求，您可能会创建一系列不同的部分来启用独特的功能。 要查看模块化部分的示例，您可以浏览 Dawn 中使用的时事通讯部分或富文本部分。

部分设置

我们已经简要了解了如何使用部分文件的设置来创建商家可以访问的自定义选项，但让我们更深入地研究一下，看看它们是如何构建的。

正如我们所见，设置包含在部分文件中，在{% schema %}标记内，这表示这些设置应该呈现在主题编辑器的 UI 上。 一个非常简单的示例可以通过自定义文本部分看到，它看起来像：

在此示例中，我们有两个 HTML 元素：一个标题元素和一个段落元素。 这些元素中的每一个都包含我们使用section.settings Liquid 对象创建的动态内容。 此部分对象允许我们通过引用设置的唯一 ID 来检索设置值。

在 HTML 和 Liquid 标记下方，我们有我们的部分设置，包含在我们的{% schema %}标签中。 每个设置都由一个对象表示，我们可以在其中定义设置id 、它的type以及它在编辑器中的显示方式。 要在 Liquid 中访问某个部分的设置，请将其id附加到section.settings液体对象。 我们还定义了它的设置类型以及它在主题编辑器上的显示方式。

在我们的模式标签的设置中：

• id是指正在定义的 Liquid 变量
• type定义了我们正在创建的输出类型
• label提供显示在主题编辑器上的上下文
• default分配一个默认值

在此示例中，我为我们的标题创建了一个text框，为我们的正文创建了一个richtext文本框，但您可以根据您的客户要求添加各种输出类型。 其他有效的输入类型包括image_picker 、 radio 、 video_url和font_picker 。

这个示例现在是一个有效的部分，但是我们缺少一个关键方面：确定该部分将出现在主题中的确切位置。 稍后我们将探索几种不同的方法来包含部分，但现在我们将通过在部分中创建预设来允许通过主题编辑器将部分添加到任何页面。

预设是部分的默认配置，并添加到部分的{% schema %}标签中。 在我们的简单示例中，预设可能如下所示：

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

一旦添加到我们的示例中，自定义文本框部分将如下所示：

现在，如果我们导航到主题编辑器，并在任何页面上选择添加部分，该部分将显示为可用选项。 我们创建的部分设置将显示在右侧栏中，其中包含我们添加的标签和默认文本，我们可以填充输入文本设置，这些设置将显示在我们的部分中。

这是一个简单的示例，显示了您可以在部分中创建的部分设置和变量之间的关系，以及它们如何在主题编辑器上呈现。 对于更高级的模型，您可以探索 Dawn 主题的富文本部分。

包括页面上的部分

正如我们已经提到的，有许多方法可以在主题的页面上包含部分。 让我们分别探讨这些方法中的每一种，并解开适用于它们的一些规则。

1. 在 JSON 模板中包含部分

当我们查看主页部分时，我们看到 JSON 模板文件接受一个"main"属性，它成为该页面类型的默认部分，并且应该包括该页面的所有重要内容元素。

除了"main"部分之外，还可以在 JSON 模板中包含其他部分，这些部分将默认显示在该页面类型上。 如果我们使用产品 JSON 模板作为示例，我们可以通过在"main"部分下方添加一个新对象来在页面上包含产品推荐部分：

在这种情况下，我们为该部分分配一个名称recommendations ，并且type属性用于标识/sections目录中我们要包含的文件。

由于此 JSON 模板引用了多个部分，因此我们需要在order对象中定义这些部分如何按顺序出现。 JSON 模板中包含的每个部分都需要分配一个默认顺序，但是商家仍然可以在主题编辑器上重新排列这些部分。

添加到 JSON 模板的没有预设的部分不能在主题编辑器中删除，但如果商家不需要它们，它们可以隐藏。 有关如何在 JSON 模板中排列部分的真实示例，您可以浏览 Dawn 产品模板。

2.在所有页面上包括部分作为选项

正如我们在自定义文本中看到的那样，当schema设置中存在presets时，可以使一个部分在主题的所有页面上可用。

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

当使用这种方法包含时，可以从主题编辑器中添加、重新定位和删除这些部分。 这些部分也可以限制为具有templates属性的特定页面。

这种拖放功能意味着当您构建自定义动态部分时，将解锁用于个性化商店的多种选项。 您可以为视频、产品或图片库创建可移动部分。 使用此方法的版块的一个很好的例子是 Dawn 的时事通讯版块。

3.使用{% section %}标签添加静态section

Liquid section标签允许您在 Liquid 布局或模板文件中呈现/sections目录中的部分。 此标记可能显示为：

 {% section 'header' %}

使用此section标签添加的部分无法在主题编辑器中删除、重新定位或隐藏。 此部分在页面上的位置已锁定，具体取决于它在布局文件或模板中的添加位置。

这种方法最常用于应该始终可见的内容和组件，例如页眉、页脚和公告栏。 要在 Dawn 上查看此示例，您可以查看 theme.liquid 文件，其中静态公告栏、页眉部分和页脚部分添加了section标签。

赋予创造力

现在您已经了解了如何创建和添加部分到您的主题中，您可以为客户的商店构建无穷无尽的选项。

使用 JSON 模板可以释放主题所有页面的部分的力量，这将允许商家完全按照他们想要的方式构建他们的商店 - 在您的指导下。