时间:2019-08-06
编辑:网站制作公司
748
0
当设计人员和开发人员为客户构建网站时,了解访问者如何浏览网站非常重要。通过在每个接触点提供最有用的选项,设计人员和开发人员可以从头到尾提供轻松的用户体验。郑州企业网站建设
在此背景下,产品页面可能会带来独特的机遇和挑战。虽然主要关注的是产品,但也有机会展示和交叉销售互补产品。
通过将推荐的产品放置在产品页面上可见且适当的位置,您可以轻松地让客户继续购物并为您的客户带来转化。然而,经常被忽视的是哪些产品作为推荐选项出现。
在这篇文章中,我们将研究开发人员如何利用Liquid建议对象为客户提供在其产品页面上展示数据驱动的产品推荐的能力。我还将向您展示如何创建一个按标签显示相关产品的部分,这将使您的客户能够个性化他们的产品推荐。
该recommendations对象是Liquid对象,用于产品页面以输出自动生成的相关产品列表。通过使用数据驱动方法显示合适的产品推荐,您的客户可以提高新产品的可发现性。
当一个部分设置为使用该recommendations对象时,它可能看起来像这样:
该recommendations对象有三个属性。返回产品对象列表的属性是recommendations.products。这可以与其他两个属性一起使用,recommendations.performed并recommendations.products_count创建显示产品列表的条件。
使用recommendations对象时,有许多因素会影响产品的显示。根据您的客户的Shopify计划类型,库存产品的数量以及客户商店的语言,可能会推荐不同的产品。
这些是根据客户的Shopify计划和商店配置输出的不同类型的推荐:
购买历史记录和产品说明:适用于Shopify Plus计划中有<7000个产品在其在线商店发布的英语店面
仅限购买历史记录:适用于Shopify Plus计划中在其在线商店中发布<7000个产品且非英语店面的人员
仅限购买历史记录:那些不在Shopify Plus计划中且在其在线商店中发布<7000个产品的人员
收藏:适用于在其商店中发布> 7000种产品的商家的任何计划
随着新订单和产品数据的推出,出现的产品推荐将变得更加准确。
客户还可以直接从Shopify管理员的“ 分析”页面跟踪产品推荐在提高销售额方面的效果。该产品推荐转换随着时间的推移报告显示各种不同的指标对于理解产品的建议性能。
例如,客户可以在点击会话中的产品推荐之后查看买方购买产品的频率,以及转换为购买的产品推荐的点击百分比。
郑州企业网站建设
在客户的产品页面上显示数据驱动的产品推荐的第一步/sections是在主题目录中创建一个新的Liquid文件。我们可以称之为product-recommendations.liquid。
该部分将使用HTML,Liquid和Javascript的混合来呈现产品列表。Liquid允许我们设置输出推荐产品的条件,而Javascript通过将产品装入部分来处理繁重的工作。
在这种情况下,Liquid和HTML将如下所示:
我们可以在这里看到,我们正在使用recommendations.products_countwith control-flow标签来设置条件,以确保只有在有推荐的产品时才会出现标题和产品列表。
在此之下,我们创建一个for循环,recommendations.products迭代当前产品的相关推荐产品,并输出它们。在这种情况下,推荐产品的限制设置为4,data-limit即开放容器标签中的值。
可以增加,data-limit因为推荐算法按照相关性顺序将每个产品最多十个产品相关联。但是,如果您只想宣传最相关的建议,建议每个产品页面显示不超过四种产品。
接下来,我们可以将javascript添加到{% javascript %}部分标记中包含的部分:
我们在代码中包含了注释,因此您可以看到每个函数执行的描述。实质上,我们正在请求在产品推荐部分中读取容器的数据,并在页面上动态插入响应的标记。
最后,要在产品页面上显示产品推荐,我们需要在主题product.liquid文件中包含该部分。我们通常会在下面添加主要内容的位置,因此您的product.liquid文件可能如下所示:
{% section 'product-template' %} {% section 'product-recommendations' %}
现在,当您导航到产品页面时,您将看到基于购买数据或在同一集合中显示的推荐产品列表。
为了使客户能够调整此部分的显示方式,我们还可以使用部分设置更进一步自定义此功能。例如,我们可以创建启用或禁用该部分的部分设置,还允许您的客户编辑推荐产品上方显示的标题。
为了达到这个效果,我们需要在{% schema %}该部分添加标签并使用JSON来创建设置和值。这些设置将与标记中的元素相对应,并允许客户端通过主题编辑器与它们进行交互。
要打开和关闭该部分,我们将产品推荐容器包装在一个if语句中,该语句将被分配一个ID。这可能看起来像:
{%- if section.settings.show_product_recommendations -%} <code for section> {% endif %}
相应的架构设置将添加到此部分中,如下所示:
同样,我们可以创建一个以标题为目标的节设置变量,并且会出现在标记中,如下所示:
<h2>{{ section.settings.heading }}</h2>
我们希望这是一个可编辑的文本框,因此相应的架构设置如下所示:
一旦全部加入,整个部分将如下所示:
现在,当客户使用主题编辑器并导航到产品页面时,他们会看到编辑产品推荐部分的选项:
郑州企业网站建设
如果您的客户希望手动控制哪些产品作为建议出现,那么您可以实施一种替代方法,按标签匹配产品。使用Liquid在不同的产品模板上设置基于标签的规则意味着您的客户将能够个性化其产品页面上显示的相关产品。
由于此替代方法早于recommendations对象的引入,因此使用此方法的客户端将无法利用数据驱动方法收集的分析。
此外,由于此方法涉及搜索所有产品以查找和显示共享特定标记的产品,因此与此查找相关的性能成本。因此,只有当您的客户需要将特定产品相互匹配时,才建议使用此解决方案。
第一步是在主题部分文件夹中创建一个新的空白部分。为了简单起见,我们可以命名这一部分related-products-by-tag.liquid。接下来,您需要将此要点中的代码复制并粘贴到新的空白部分:
使用此方法,关键操作由第104行上的控制流标记实现,该控制流标记基于指定的标记创建条件:
这意味着包含标签的任何产品’test’现在都将作为相关产品显示在产品页面上。客户端可以更改’test’为他们喜欢的任何标记,并且可以为每个标记创建此文件的替代版本。您可以从我们的帮助文档中了解如何创建替代产品模板。
创建此部分后,您需要将其包含在product.liquid模板文件或首选的备用product.liquid模板文件中。你可以在
{% section.related-products-by-tag.liquid %}
下面的地方添加你看到的内容{% section 'product-template' %}。
现在,当产品应用此模板时,您将看到包含该部分代码中指定的标记的相关产品。
无论您采用哪种方法,在自定义主题上提供直观的相关产品,都可以在客户需要引导客户使用特定产品时为其提供竞争优势。
通过整合交叉销售建议,并考虑最合适的方法,您可以为您的客户提供更多机会来推动转化,并提高网站的一般可用性。
郑州企业网站建设
3
s后返回登录3
s后返回登录