如何更改 Shopify 中的继续购物链接.
目录
介绍
想象一下,您是一个正在浏览在线商店的顾客,对潜在的购买感到兴奋。您将几个商品添加到购物车中,但在完成结账之前,您想要探索更多的产品。如果有一种简单的方法可以返回购物页面而不会丢失购物车中的商品呢?这就是“继续购物”链接发挥作用的地方。它是一个小而重要的功能,可以增强用户体验并潜在地促进销售。
在不断发展的电子商务世界中,优化客户旅程至关重要。一个适当放置的“继续购物”链接可以鼓励用户继续浏览,从而增加额外购买的可能性。随着在线购物的持续增长,了解如何在 Shopify 商店中有效实施和自定义此功能变得至关重要。
本博文将指导您如何在 Shopify 中更改“继续购物”链接。在本文结束时,您不仅将学习如何修改链接,还将了解其在增强用户体验和参与度方面的重要性。我们将涵盖从添加链接的基本步骤到探索高级自定义选项的所有内容,确保您具备有效优化商店的知识。
让我们一起探讨如何实施这些更改,我将提供实用的见解,帮助您为客户创造一个难忘的购物体验。让我们深入了解如何在 Shopify 中更改“继续购物”链接,并发现它如何使您的在线商店受益。
理解“继续购物”链接的重要性
为什么这很重要
“继续购物”链接在购物车和商店的其他部分之间起到桥梁作用。它允许客户在不必重新开始的情况下返回产品页面。这种无缝的过渡是至关重要的,原因有很多:
- 用户便利: 它为客户提供了一种简单直接的方式,让他们可以在不失去购物车中商品的情况下继续浏览。
- 减少购物车放弃率: 适当放置的链接可以通过鼓励用户继续购物旅程来降低购物车放弃的可能性。
- 增强用户体验: 用户友好的界面在电子商务中至关重要,而“继续购物”链接有助于提供更流畅的导航体验。
用户体验(UX)设计的角色
“继续购物”链接的位置和可见性受到用户体验设计原则的影响。基于数据的 UX 设计方法确保链接在购物车页面内战略性地定位,方便用户找到。对于希望通过卓越设计提升品牌并实现愿景的组织,Praella 的用户体验和设计服务可以提供量身定制的解决方案。
如何更改 Shopify 中的“继续购物”链接
在 Shopify 中更改“继续购物”链接是一个相对简单的过程,可以通过基本编码完成。下面,我将引导您完成这些步骤。
步骤 1:访问您的 Shopify 管理后台
- 登录到您的 Shopify 管理面板。
- 导航到在线商店,然后点击主题。
步骤 2:编辑您的主题代码
- 找到您要编辑的主题并点击操作按钮。
- 从下拉菜单中选择编辑代码。
步骤 3:找到购物车模板
- 在Sections目录中,查找
cart-template.liquid
文件。如果不存在,请检查Templates目录中的cart.liquid
。 - 打开文件查看代码。
步骤 4:找到结账按钮代码
- 搜索与结账按钮相关的代码。它通常看起来像这样:
<button type="submit" id="checkout" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button>
步骤 5:添加继续购物链接
现在,您将添加“继续购物”链接。根据您希望链接去往的位置,使用以下代码片段之一:
-
链接到目录页面:
<a href="/zh-hans/collections/all" title="继续购物">继续购物</a>
-
链接到主页:
<a href="/zh-hans" title="继续购物">继续购物</a>
-
链接到最后查看的集合:
<a id="continue-shopping" href="" title="继续购物">继续购物</a>
在结账按钮代码之前或之后粘贴相应的代码。
步骤 6:保存更改
添加合适的链接后,点击保存以应用更改。
步骤 7:(可选)添加 JavaScript 以链接最后查看的集合
如果您选择链接到最后查看的集合,您需要添加一些 JavaScript:
-
在Layout目录中,打开
theme.liquid
。 -
在文件底部找到闭合的
</body>
标签。 -
在闭合的
</body>
标签上方粘贴以下代码:<script> if(Storage !== undefined) { var defaultLink = "/collections/all"; {% if template contains 'collection' %} sessionStorage.collection = "{{ collection.url }}"; {% endif %} {% if template contains 'cart' %} if( !sessionStorage.collection ) { sessionStorage.collection = defaultLink; } document.getElementById("continue-shopping").href = sessionStorage.collection; {% endif %} } </script>
-
再次点击保存。
步骤 8:样式您的链接(可选)
如果您希望您的“继续购物”链接看起来像按钮,则可以添加样式:
-
对于主要按钮样式,修改链接代码如下:
<a href="/zh-hans/collections/all" title="继续购物" class="btn">继续购物</a>
-
对于次要按钮样式,使用:
<a href="/zh-hans/collections/all" title="继续购物" class="btn--secondary">继续购物</a>
测试您的更改
在实施更改后,测试功能至关重要:
- 访问您的在线商店并向购物车添加商品。
- 导航到购物车页面。
- 点击“继续购物”链接以确保它可以将您重定向到正确的页面。
如果链接按预期工作,您就成功自定义了“继续购物”链接!
持续改进的影响
电子商务是一个不断变化的市场,保持领先地位要求持续改进。定期分析用户行为并进行调整可以显著提升您的商店表现。考虑使用Praella 的战略、连续性和增长服务开发以数据驱动的策略,重点提升网页速度、数据采集、技术 SEO 及可及性。
结论
“继续购物”链接不仅仅是一个导航工具;它是客户旅程中的一个强大组成部分,可以提升销售并改善用户体验。通过遵循本博文中概述的步骤,您可以轻松地在您的 Shopify 商店中更改“继续购物”链接,以更好地满足您的客户需求。
记住,优化您的商店是一个持续的过程,可以从专家指导中受益。如果您在电子商务旅程中寻找合作伙伴,考虑探索Praella 的咨询服务以帮助您应对在线零售的复杂性。
常见问题解答
Q1: 我可以在没有编码的情况下自定义“继续购物”链接吗?
A1: 虽然编码是更改链接的主要方法,但某些 Shopify 主题可能通过主题编辑器提供自定义选项。检查您的主题设置以获得所有可用选项。
Q2: 如果我想将用户引导到特定的集合怎么办?
A2: 您可以将链接中的 URL 更替为您希望客户访问的具体集合 URL。
Q3: 我应该多长时间审阅一次商店的用户体验元素?
A3: 建议定期审核,特别是在重大更新或产品提供发生变化后。分析用户行为可以为需要改进的领域提供见解。
Q4: 能否添加多个“继续购物”链接?
A4: 是的,您可以添加多个指向不同页面的链接,但建议保持简单以便用户清晰。
Q5: 我该如何追踪“继续购物”链接的有效性?
A5: 利用分析工具追踪用户在您网站上的行为,查看更改是否导致浏览时间或转化率的提升。
通过实施这些策略并专注于用户体验,您不仅可以提升 Shopify 商店的功能,同时也能为客户创造更具吸引力的购物体验。