如何在Shopify中创建一个可定制的公告栏

去年,总销售额超过15亿美元在黑色星期五/网络星期一(BFCM)期间，全球各地的Shopify商家将推出一款新产品，这意味着这是Shopify合作伙伴提供服务的绝佳机会，帮助客户在这一繁忙时期获得知名度。

在BFCM的筹备过程中，重要的是你的客户的主题让他们可以选择让他们的买家知道有销售或促销活动。公告条是一种简单而有效的方法，可以利用每年的这个时候，提高对交易或折扣代码的认识。

公告栏在其他情况下也很有用，比如显示重要的运输信息，展示新的忠诚度计划，或推广客户想要呈现的任何自定义消息。

在本文中，我将演示如何使用Liquid构建公告栏部分，扩展自定义主题的特性集，或提供客户端服务。我还将研究如何利用Liquid的部分设置来允许可定制的选项，这使客户能够个性化他们的销售公告。

创建一个新的公告栏部分

在开始创建公告栏之前，我们需OB欧宝娱乐APP要决定在这个部分中包含什么类型的元素。根据客户的要求，您可能需要文本，标题或其他输入设置．下面是一些你可以添加的设置:

• 文本
• 超链接
• 颜色
• 字体大小
• 复选框

在本教程中，我将创建启用公告栏、选择背景和文本颜色、添加文本以及嵌入超链接的设置。通过使用Liquid的section对象，我们可以创建设置，这些设置将从主题编辑器中访问，以分配标题文本，链接url，并选择我们想要出现的图像。

我们需要采取的第一步是在我们的主题中创建一个新文件/部分目录中,名为announcement-bar.liquid．您可以向现有设置添加新的设置头Section文件，但是为了本教程的目的，我们将创建一个新的Section，它将位于头部的上方。

一旦创建了这个部分文件，我们就可以添加包含公告消息的基本标记，以及简单的标记如果与section设置相对应的语句:

我们将在这里创建的部分设置将允许我们在启用特定选项时显示公告栏。我们还将添加一个复选框，只在主页上启用公告栏，因为您的客户可能不希望它出现在商店的每一页。下面我们添加了HTML，我们将包括这些模式标签和JSON:

的JSON数组中的id<模式>与我们在标记中看到的对象对应。例如section.settings.show_announcement在模式标记中具有相应的值，该值创建两个元素之间的连接，并指示主题编辑器哪些属性对其可用。

在这种情况下，主题编辑器上将出现一个复选框，如果选中该复选框，将显示公告容器和消息。我们还将有第二个复选框，允许我们在非主页上隐藏公告栏。现在让我们添加一些内容选项。

你可能还会喜欢:如何使用Shopify主题设置创建特定于移动设备的标志．

内容的选择

我们希望在公告栏上允许文本和超链接，因此我们将添加可以访问文本字段和URL值的对象。同样，我们可以用如果语句隐藏这些内容，如果它们没有被使用:

两个新的section.settings一旦我们在模式标签中创建了相应的值，对象将允许我们创建添加文本和URL的选项。两者都有特定的输入类型文本而且url这将在主题编辑器中生成选项:

本节最后要添加的是为announcement部分添加选择背景和文本颜色的选项。非常有用的是，可以根据模式标记中的值调整主题的CSS。例如，我们可以创建一个类型为的设置颜色它会将选定的颜色值发送到CSS属性。

在我们的例子中，这看起来像一个这样的section设置:

我们可以给公告栏一个默认的黑色，当在主题编辑器中查看时，您的客户端将看到一个颜色选择工具。的announcement_bar_colorID将被引用<时尚>节上的标签:

现在用主题编辑器上的颜色选择器选择的十六进制代码将由section.settings.announcement_bar_color属性值，客户端将能够轻松调整颜色。同样的方法也可以用在公告栏的文本颜色上。

在这个阶段，你还可以在我们的<时尚>标记，以确保文本位置正确，并且有足够的填充。一旦整个section创建完成，你应该会看到如下内容:

添加到主题布局

最后一步是将此部分包含在主题布局中。我们希望该部分可以在商店的每个页面上使用，因此我们将此添加到theme.liquid文件在布局文件夹。

要将节文件导入布局文件，可以使用节主题标签，并引用Liquid文件的名称。我们希望此部分出现在标题上方，因此我们将寻找{% section“header”%}和地点{% section "announcement-bar" %}在上面的直线上。

现在，当我们导航到主题编辑器时，我们将看到自定义这个公告栏部分的选项:

你可能还会喜欢:15定制终端和命令行工具．

除了公告

这是确保您的自定义主题有一个公告栏的最佳时机，不仅适用于即将到来的BFCM季节，而且适用于您的客户希望在他们的商店中推广信息的任何场合。

无论您如何在自定义主题构建中使用公告栏，毫无疑问，它们都是查看关键信息的强大工具。希望通过您的合作伙伴工具包中的这些技能，您可以帮助您的客户为即将到来的BFCM季节做好准备，甚至更远。