如何使用液体自定义Shopify主题博客模板

Shopify博客模板

对于许多在线零售商来说,博客文章是将他们的品牌与受众联系起来、突出特定产品或宣传当前促销活动的独特机会。开发人员可以通过向文章页面添加功能和改善博客订阅者的用户体验来为客户的商店增加价值。

博客作为一种内容营销技术已经存在一段时间了,ob欧宝娱乐app下载地址而且没有迹象表明它的价值在短期内会减少。最近,Hubspot发现55%的营销人员表示博客内容创作是他们的工作ob欧宝娱乐app下载地址最优先的入站营销ob欧宝娱乐app下载地址他是一名社交媒体审查员报告发现,58%的营销人员ob欧宝娱乐app下载地址他说,“原创内容”是最重要的内容类型,超过了视觉和视频。

在构建或自定义主题时,通过改进文章页面的外观和感觉,开发人员可以提高客户的转化率。仔细使用Liquid,可以提高Shopify博客文章的可用性,并解锁潜在的成功机会。

在构建或定制主题时,通过改善文章页面的外观和感觉,开发人员可以提高客户的转化率。”

在本文中,我将演示定制博客文章页面的实用方法,通过设计一种直观的方法来显示作者的自定义名称,以及改进使用上一步和下一步按钮的导航。

来了解更多关于构建主题的信息Shopify主题套件

借助Shopify合作伙伴计划发展您的业务

无论您提供营销、定制还是网页设计和开ob欧宝娱乐app下载地址发服务,Shopify合作伙伴计划都将为您的成功奠定基础。免费加入并获得收入分享机会、发展业务的工具和充满激情的商业社区。

报名

使用博客文章对象

在构建或自定义Shopify的博客文章模板时,您可能会发现自己使用两个不同但相关的Liquid对象-文章博客。让我们看看可以使用这些对象访问哪些属性。

正如它所暗示的那样文章对象与单个文章相关,并允许您输出单个博客文章的属性,例如文章标题、文章作者和文章发布日期。的可用属性的完整列表文章对象在我们的帮助中心。

博客对象与连接到特定博客的元素相关。在这种情况下,您可以将博客视为其相关文章的“父”或“子”。通常,一个商人可能有一系列不同的博客,涵盖不同的主题。

例如,客户端可以有一个博客用于“新闻”,另一个博客用于“案例研究”,每个博客都有不同的文章关联。的属性的完整列表博客对象可以找到在我们的帮助中心。

在本教程中,我们将了解如何以不同的方式使用这些对象来优化客户和买家的体验。

找到你的新宠减价编辑器在我们的综述中。

显示带有标记的自定义作者名称

有时,客户可能想用别名写博客文章,或者他们可能会邀请他们想要署名的客座博客作者。默认情况下,Shopify主题将根据员工管理帐户显示博客文章的作者,但也可以编辑文章模板并显示您想要的任何作者名称。

理想情况下,我们希望自定义名称出现在博客文章中,而不需要客户端访问主题的代码,因此我们可以设置一些规则,根据与博客文章相关的标记输出特定的作者名称。这样,你就可以为你的客户提供尽可能无摩擦的体验。

让我们想象一下,我们的客户有一个名叫Ana Smyth的客座博主,他为我们客户的内容营销策略撰写文章。ob欧宝娱乐app下载地址默认情况下,Ana需要一个管理帐户,以便她的名字成为一个可选择的作者名称——但是客户端宁愿显示她的名字而不给她分配帐户。

这里的第一步是定位Liquid对象article.author,它返回文章作者的全名。如果您使用的是分段主题,则该对象可能位于article-template.liquidsection目录下的文件。否则,您可能会在article.liquid模板文件。

您可能会看到如下所示的内容article.author对象包含:

我们将希望使用控制流标记来添加将覆盖的条件article.author并在满足这些特定条件时输出自定义作者名称。在我们的示例中,我们希望这些条件与与文章关联的标记相关。

我们可以用如果如果博客文章被标记为“Ana”,Liquid标签将输出我们的客座博客作者Ana Smyth的名字。这意味着我们可以这样设置控制流标签:

你还可以看到我们添加了an其他的标记,它允许在不满足前一个条件时执行后续代码段。如果博客文章没有标记为“ana”,这允许您输出从管理员分配的作者作为后备。

现在,当Ana提交她的文章,我们可以添加一个“Ana”的标签编辑文章页面:

Shopify博客模板自定义标签

一旦添加了这个,我们就可以查看文章,她的名字将作为文章作者出现:

Shopify博客模板标签视图

如果你有一系列不同的客座作者,你可以添加额外的如果条件,并创建相应的博客标签。对于客户希望显示的假名或通用品牌名称,也可以使用相同的流程,而无需创建特定的员工帐户。

你可能还喜欢:如何使用翻译键创建国际化主题

使用液体添加上一篇和下一篇文章按钮

当买家阅读你客户的博客文章时,他们可能会想继续阅读类似的文章,减少访问这些文章的障碍将提高他们在线商店的可用性。欧宝体育官网入口首页可选的“上一篇”和“下一篇”按钮的设置为用户提供了另一个层次的导航,并允许他们轻松浏览更多的博客文章。

值得庆幸的是,blog Liquid对象具有返回旧的或新的blog文章的url的现有属性。我们可以将这些对象属性链接到文章页面上的按钮,并使用部分设置创建一个选项来显示按钮。

这里的第一步是创建按钮,并包含指向上一篇和下一篇博客文章的链接。在这种情况下,我已经添加了带有按钮和链接液体对象的容器到我的article-template.liquidSection文件,位于社交共享按钮所在位置的正上方。一个基本的容器可以是这样的:

你可以看到这里有两个链接元素指向我们的Liquid对象,blog.previous_articleblog.next_article。它们返回新旧博客文章的url。这些链接元素有一个类btn。您可以为这个类设置自己的样式,或者在主题的样式表中添加自己的样式。

一旦你把这些元素设计成你想要的样子,它们就会像这样出现在文章页面上:

Shopify博客模板添加上一篇和下一篇文章按钮

但是,我们希望在这里更进一步,允许客户端选择是否应该显示这些按钮。我们可以使用节设置在主题编辑器上创建一个选项,允许您的客户端切换打开和关闭上一级和下一级按钮。

模式标记,我们可以定义这些按钮的设置如何显示在主题编辑器上。有关如何创建节设置的完整说明,请阅读这篇文章在Shopify的网页设计和开发博客。

我们想在主题编辑器上创建一个复选框,可用于切换打开和关闭上一个和下一个按钮,但我们希望将它们显示为默认值。在这种情况下,部分设置可以出现在模式标签如下:

{"type": "checkbox", "id": "show_previous_next_buttons", "label": "显示上一个和下一个按钮","default": true},

现在我们可以将previous和next按钮容器包装在引用我们上面创建的ID的控制流标记中。包装后,容器可能是这样的:

这里我们可以看到,部分设置ID与我们在模式设置中创建的ID相对应。当从主题编辑器中打开此设置时,控制流标记中的代码(previous和next按钮)将执行。

当我们导航到主题编辑器并进行测试时,当我们切换设置时,我们会看到previous和next按钮出现或消失:

Shopify博客模板主题编辑器测试

写博客文章要有创意

通过使博客文章页面功能更丰富,具有直观的设置和导航,您可以为自定义主题项目添加额外的价值。您还可以尝试自定义现有的动态部分,使其更适合博客文章。

当你的客户在设计他们的博客文章时,灵活性对他们来说是至关重要的,所以如果你能以一种可以授权给你的客户的方式为文章页面添加功能,你就可以为他们的成功做好准备。

你是否尝试过定制Shopify博客模板?请在下面的评论中告诉我们你的经验!

借助Shopify合作伙伴计划发展您的业务

了解更多