如何使用Shopify主题块

在Shopify上创建店面体验时，为商家提供定制主题的选项并释放扩大商店潜力的机会至关重要。Shopify开发人员可以通过使用添加功能的节块为主题构建广泛的灵活性，并使商家能够控制其商店的设计。

正如我们在之前的文章中看到的如何创建您的第一个Shopify主题节，在线商店2.0的引入允许在商店的任何页面上欧宝体育官网入口首页移动部分。block和section的不同之处在于，它们允许元素被重新定位在一个部分。

在本文中，我们将探讨如何将基本块构建成一个部分，探索需要遵循的最佳实践，并解释应用块如何在增强商店功能时改善商家体验。我们还将演示如何为页面的大多数元素实现块，并从我们的源代码中演示这种方法的实际示例黎明的主题．

在本文中，我们将:

• 看看如何将基本块构建成一个部分
• 演示如何为页面的大多数元素实现块
• 探索应用程序块如何在增强商店功能时改善商家体验
• 分享要遵循的最佳实践
• 从我们的源代码可用的黎明主题

什么是主题块?

块是可以在节中添加、删除和重新排序的内容模块。这允许商家对其在线商店的各个方面的外观和感觉进行细粒度控制。欧宝体育官网入口首页每个部分最多可以有16块。

可以将一系列不同类型的块添加到节中，并且可以更改这些块的位置，所有这些都可以从主题编辑器中进行。块可以是图像、视频、自定义文本或任何输入设置类型选项在我们的开发人员文档中概述．

在决定实施哪种类型的块时，对每个部分都有一个清晰的愿景和目的是很重要的，这样你的主题就可以直观地使用，并防止商家对他们的商店布局产生负面影响。例如，在特色产品部分添加时事通讯注册块的选项可能不适合，但在这种情况下添加自定义文本块的选项可能很有用。

“在决定实施哪种类型的街区时，对每个部分都有一个清晰的愿景和目的是很重要的，这样你的主题就能直观地使用，并防止商家对他们的商店布局产生负面影响。”

在构建Shopify主题时，您可以定义页面的哪些元素可以是块，并设置规则来确定每个块的显示方式以及块可以包含的设置。在本文稍后的部分中，我们将看到将section的几乎所有元素转换为块的好处。

由于块可以重复，因此在适当的地方设置限制是至关重要的，这样您就可以避免任何用户界面缺陷。例如，您可以创建一个包含视频内容的块。虽然允许将大量视频块添加到该部分可能很诱人，但这样做会影响站点加载时间，并使页面混乱。相反，将其限制为只显示一个视频可能更明智。能力越大，责任越大!

你可能还喜欢:提示一个有效的Shopify主题审查过程．

构建基本主题块

在构建块时，您将在节文件的模式区域内花费一些时间，定义块的各种值和设置。如果您还不熟悉节模式的格式，您可以在我们的开发人员文档．

在本例中，我们将创建一个非常简单的页脚，以演示如何在一个节中包含多个块。最简单的方法可能是看整个部分，然后单独OB欧宝娱乐APP分析每个部分:

在上面的例子中，我们有两个内容元素，我们希望在我们的简单页脚中可用-一个超链接和一个自定义文本字段。每个元素都被包装在它们自己的容器中，使用“link”和“text”类。我们也会用block.shopify_attributes向元素添加数据属性。主题编辑器的JavaScript API使用了一个块shopify_attributes识别块并监听事件。

与节类似，块对象被添加到Liquid节文件中，其设置在模式标记中定义。使用块，这些对象的语法看起来像{{block.settings.id}}在哪里id在模式部分中引用。

对于我们的链接块，我们有两个设置，我们将在section模式中引用:链接的URL (block.settings.linkurl)，以及超连结文本(block.settings.linktext）.

同样重要的是，块容器被包装在{% for %}中的每个块进行迭代section.blocks．你可以看到{% for %}在section文件的顶部附近循环:

{%表示节中的块。块%}

在这个forloop我们将使用情况下和当控制流标签渲染单个块。我们可以设定条件，目标是类型，并将在商家在主题编辑器上添加特定块时输出标记。

下面是为我们的链接和自定义文本块设置控制流标签的方式:

在我们的第一个块元素中，我们将输出一个链接，这意味着我们可以使用link_to液体URL过滤器生成一个HTML链接。当我们为这个块创建设置时，链接url将是传递给这个过滤器的参数，以生成链接。

如果我们看一下section模式，我们可以看到可以添加的块数量是有限制的:“max_blocks”:8．这意味着商家可以添加8个可用区块的任意组合。在这一点上还值得记住的是，一个section中的块的最大限制是16。

接下来是块属性，我们可以在其中为两个块创建数组。我们可以为每个块指定类型(这可以是您决定的任何值)，以及将出现在主题编辑器上的名称，以及设置对于这些块，它们各自形成单独的数组。

每个块设置都有自己的设置id我们可以在标记中引用，以及类型来定义它是什么样的设置，a标签它将出现在主题编辑器UI中。块设置的所有可用输入设置类型属性可以找到我们的开发者文档．

我们的链接块有两个设置:允许商家填充URL，并为超链接输入文本。

我们的自定义文本块只有一个设置，即包含多行文本，这要归功于我们的文本区域输入类型，我们可以在标记中使用custom-text-fieldID (block.settings.custom-text-field）.

在这个部分没有预设，因为它是一个静态页脚部分。所以我们需要在theme.liquid布局文件，使用部分标记，引用文件的名称。在我的例子中，它看起来像这样:

{% section 'footer-simple' %}

添加后，我们将看到该部分出现在店面上，并且可以在主题编辑器上自定义和重新定位块。

您将注意到，链接和自定义文本元素的任何组合都可以添加到我们指定的8个限制内。虽然CSS确实需要添加到我们的容器类中，以使块具有适当的样式，但现在这是一个功能部分，演示如何为主题构建更复杂的块配置。

如果您想看到使用块的页脚部分的更全面的版本，您可以探索黎明的脚在这个GitHub的回购．

你可能还喜欢:什么需要建立成功的Shopify主题商店．

对节中的大多数元素使用主题块

由于商家可能有各种各样的布局要求，所以在开发主题时，“融入”尽可能多的灵活性和可定制选项是一个很好的做法。区段块允许开发人员实现这一点，并且可能在在线商店的某些区域，您希望对区段的大多数元素进行非常细粒度的控制。欧宝体育官网入口首页

其中一个领域的例子是产品表单或主要产品部分。这是商店中最关键的区域之一，也是商家通常需要高度控制的区域。事实上，其中一个要求是向Shopify主题商店提交主题主题必须支持产品页面主要部分的所有或大部分元素的块。

“向Shopify主题商店提交主题的要求之一是主题必须支持产品页面主部分的所有或大多数元素的块。”

在实践中，这意味着产品标题、价格、产品描述、供应商和购买按钮等元素都应该是单独的块。这种方法允许商家重新定位页面周围的任何这些元素，以适应他们自己独特的设计偏好。我们可以看到这是如何出现在黎明主题上的:

通过拖放元素，商家可以快速找到他们想要的产品页面外观，而无需深入设置或编辑主题代码。为了达到这种效果，我们可以将每个单独的元素重新创建为一个块。

例如，一个简单的主要产品部分可以写成如下:

如果我们想为产品标题、产品价格、产品供应商和产品描述添加块支持，我们需要首先在section模式中添加“blocks”属性，并为每个元素创建JSON对象。

接下来，我们将把所有的HTML和Liquid元素包装在同一个容器中{% for %}Loop和case/when语句，我们之前使用过，它们将遍历section中的块以呈现我们的每个块:

现在我们所有的元素都是块，但是如果我们导航到产品页面，我们不会在页面上看到它们，尽管它们在主题编辑器上是可选择的块。这个过程的最后一步是编辑product.json模板文件来定义哪些块在默认情况下出现，并为每个块分配默认顺序。

在JSON模板中，我们将添加以下内容来确定默认情况下应该添加哪些块，以及块的顺序:

一旦加上这个，整个product.json文件应该看起来像这样:

现在，当我们导航到产品页面时，我们看到我们的元素出现了，它们可以在部分中垂直重新定位。

对于商家可能需要拖放的页面上的任何其他元素，可以重复此过程。有关此方法的更全面的示例，您可以探索我们的黎明主题的主要产品部分．

增加对应用程序块的支持

在线商店2.0的推出引入了欧宝体育官网入口首页主题应用扩展这是一种改进应用程序与店面整合的方法。主题应用扩展允许应用开发者在页面上注入内联内容和组件作为应用块，商家可以通过主题编辑器直接添加和配置。

为了将应用程序块添加到页面中，节需要支持应用程序块，方法是将其包含在节模式中，并在标记中添加渲染标记。主题开发者也可以创建一个apps.liquid专门针对包装应用程序块．

“当向Shopify主题商店提交主题时，主要产品部分和特色产品部分都需要支持应用程序块。”

提交主题到Shopify主题商店，这是一个要求，主要产品部分和特色产品部分都支持应用程序块。理想情况下，你可以更进一步，在其他适当的部分(如购物车部分)添加对应用程序块的支持。这将增加您的主题与应用程序的兼容性，并改善商家的整体体验。

所有的应用block都有一个类型@app因此，添加对应用程序块的支持将成为所有应用程序和主题的标准方法。第一步是定义这种标准类型的块@app在节模式中。如果我们看一下之前的例子main-product.liquid部分，它可能像这样出现:

接下来，我们需要创建一个新的当语句，用于应用程序块中已有的section.blocksforloop和使用{%渲染块%}所以应用程序块可以在主题编辑器上访问。

现在，当你导航到主题编辑器并自定义这个部分时，我们将能够添加我们的应用程序块。只有已安装的应用程序已更新为使用主题应用程序扩展将在这里可用。

添加对应用程序块的支持可以使您的主题脱颖而出，并增强您的主题对商家的一般可用性。开发者可以使用演示产品评论应用程序它已经迁移到使用主题应用程序扩展。

“添加对应用程序块的支持可以让你的主题脱颖而出，并提高你的主题对商家的总体可用性。”

用积木释放机会

现在您已经了解了如何在主题中支持块，您可以向商家的商店添加无尽的选项。

要了解更多关于如何显示和设计块的UX注意事项，请查看我们的块布局的开发人员文档．在构建块时，强烈建议在不同的屏幕尺寸上进行测试，以确保所有元素都按预期显示。

通过在部分上实现块，允许元素在主页部分周围移动，并添加对应用程序块的支持，您可以确保为商家提供灵活且功能强大的主题。