你已经知道你的购物车网页是一个重要的齿轮在您的电子商务机器。但是，你的移动购物车页面-页面访问者看到之前，他们结帐-拉他们的重量？

在 Growcode，我们反复发现购物车页面是我们客户商店中最容易被忽视的部分之一，尤其是在移动设备方面。结果是显著的，严重损害了他们的底线。

到2021年，移动端电子商务的销售额预计将占到所有电子商务销售额的52.9% 。然而，在2017年，移动购物车的平均弃购率高达85.65% 。

这意味着，在所有向购物车添加产品或产品的客户中，近90% 的人没有完成购买。

到2021年，移动电子商务销售额预计将占到所有电子商务销售额的52.9% 。请记住，如上图所示，聚合数据并不能解释行业之间的巨大差异。资料来源。在这篇文章中，我们将看到六个购物车评论页面的例子。前三个例子使用了可靠的设计实践，您应该考虑复制这些实践，而其余的例子包含了最好避免的元素。

值得一提的是，虽然我们关注的是某些购物车设计的错误，但这并不意味着它们总体上是完全糟糕的。让我们一头扎进移动购物车的最佳实践。

1. 做: 亚马逊

亚马逊的手机网站购物车就是一个很好的手机购物车设计的典范。这里并不拥挤，但也不是过于简陋。所有必要的元素都包括在内，而不会将注意力从主要 CTA 上移开。还有一些不显眼的“附加”，可以选择增加订单价值，从礼品包装到相关项目。亚马逊的移动购物车用户体验。所有必要的元素都包括在内。

技巧 # 1: 在页面顶部设置一个清晰的 CTA，颜色对比鲜明。当用户向下滚动时，这个 CTA 继续在屏幕顶部浮动。

技巧 # 2: CTA 是屏幕范围的，所以对于惯用左手和惯用右手的用户来说很容易点击它。

提示3: 在页面顶部重申免运费，以消除任何疑虑并“使交易更甜蜜”。

技巧 # 4: 产品图片和名称链接到那些想要重新检查产品详细信息的人的描述页面。

提示 # 5: 有清晰和容易点击按钮来更改订单数量，删除项目和保存他们。

技巧 # 6: “库存”通知向客户保证，他们不必等待产品。

贴士 # 7: 亚马逊展示了已经“保存以后”的产品，下面有一个简单的“移动到购物车”按钮。以后保存的项目清晰可见。

提示 # 8: 包含相关产品-“顾客也购买了”-可以添加到购物车而不离开页面。额外的加号为这个元素的设计作为第三个项目是没有完全显示，因此建议一个滑动动作。

技巧 # 9: 大量的空白和没有不必要的“填充”细节。亚马逊只收录了绝对必要的内容。

提示 # 10: 链接到页脚的“页面顶部”。

2. 做: 订书钉

史泰博购物车设计的高明之处在于它的简单。产品可以在几秒钟内进行评审。其结果是更加强调包括在内的选项。美丽的史泰博购物车是它的简单。最好的移动电子商务推车之一。

技巧 # 1: 像亚马逊一样，人们注意到这样一个事实，即产品将免费发货，无论是在页面顶部还是在付款汇总中。更重要的是，文本是绿色的，这使得通知更加突出。“预期交货”的确切日期也显示。

技巧 # 2: 设计超级简单，并且很好的利用了空白。客户可以快速检查他们的订单，不用离开页面就可以进行任何必要的更改，并验证总数。

贴士 # 3: “优惠券和奖励”的盒子并不显眼。重要的选择“提取在商店”也提供了没有分散注意力从主要的 CTA。

技巧 # 4: “安全”这个词包含在结帐 CTA 中。

有什么问题吗？虽然 Staples 做得很好，但是这个购物车设计的一个问题是标题的简单性，它没有包括可扩展的菜单或搜索表单。如果一个公司只销售一种产品，这可能是一个可行的解决方案。然而，对于多产品网站，如果客户想再次浏览，那么给他们一个选择总是值得的。

3. 做: 西尔斯百货

西尔斯提供了许多额外的选择，包括付款计划，店内取货，礼品选择和促销。他们的购物车是一个很好的例子，零售商希望在一个页面上结合许多不同的元素，而不破坏设计，防止移动购物车废弃。西尔斯手机购物车设计包含了很多元素，但仍然保持简单。

技巧 # 1: CTA 与小计一起包含在页面顶部。锁定图标进一步建立信任和选择结帐使用贝宝也提供。

提示 # 2: 作为一个高价项目，付款计划被包括在内，以消除任何犹豫在这个阶段。

提示 # 3: 在订单摘要部分，销售节省包括在红色部分，通过建立紧急性和减少疑虑，鼓励客户点击结账。

提示 # 4: 提供了一个链接来登录忠诚度计划，这个计划可以进一步激励新客户。需要注意的是，这并不是一个设置商店帐户而没有任何好处的链接，这种好处可以更好地整合到结账表单中。

提示 # 5: 在页面的底部有一个“安全结账”的封条。有什么问题吗？只是有点太多了，这种效应很可能分散了一些顾客的注意力。例如，没有必要在底部提供杂志订阅和忠诚度计划的链接。

4. 不要: Vitacost

尽管 Vitacost 使用了上面描述的许多元素，但是它们的实现经常是有缺陷的。结果是一个设计糟糕的购物车网页，可能会看到一些小的调整增加购物车转换。使用了上面描述的许多元素，但是它们的实现经常是有缺陷的。错误 # 1: 添加了一个显眼的搜索栏，让人们远离购物车页面。这是一个好主意，包括一个搜索栏图标(在亚马逊的例子)的人谁想继续浏览。但是不要做得太大。

错误 #1： 购物车优化提示: 不要包括一个突出的搜索栏，这会导致人们远离购物车。

错误 # 2: 自动添加不清楚的“ BOGO”产品(买一送一) ，这可能会迷惑或惹恼顾客。

错误 # 3: 显眼的宣传条形码。这分散了注意力，从主要的 CTA，并鼓励客户离开购物车，以搜索在线促销。宣传盒应该是可见的，但不要过度。他们当然应该追求一个 CTA。

错误 # 4: 运输成本被设置为“ TBD”，这就增加了疑问(一般来说你应该避免使用缩写

)错误 # 5: 页脚太大了。是否希望用户完成购买或下载应用程序？

错误 # 6: 用于删除或增加项目的产品选项太小而且难以使用。错误 # 7: 在截图的底部可以看到浮动条，它在小型手机上占用了太多的屏幕空间。

5. 不要: Lonely Planet

在 Staples 页面有效地利用了最小化的设计，Lonely Planet 排除了太多的元素。没有减少犹豫和建立信任的功能，没有推荐或产品建议来增加购买的价值，许多按钮很难点击。孤独星球排除了太多元素。他们留下了很多空间，可以用来改善购物车用户体验。误区1: 空间利用不当。最好让购物车填充整个页面，并利用空白，而不是在当前内容上弹出。错误 # 2: 没有关于送货、折扣或付款方式的信息。这可能会消除不确定客户的疑虑和担忧。错误 # 3: 没有相关的产品建议。错误 # 4: 用于增加或减少产品数量的按钮太小以至于几乎无法点击。错误 # 5: CTA ——“继续结账”——看起来不像一个按钮。错误 # 6: 弹出格式使得从左侧点击 CTA 变得困难。让客户使用他们的拇指！

6. 不要: 耐克

耐克页面的主要问题在于各种元素被随机包含的方式，很少考虑如果将它们放在一起或者放在页面的不同位置，它们将如何工作。关于 CTA 也有一些混淆。在耐克的页面上，各种元素都是随机添加的。错误 # 1: 只有会员才能享受发货折扣。这增加了不必要的摩擦，可能会抑制那些不想加入的客户，他们会认为自己正在失败。提供客户选择登录在结帐阶段，随着选择注册为新客户。购物车页面应该专门用于检查订单。

错误 # 2: 使用两个 cta。它几乎总是更好的有一个 CTA 的购物车页面，因为你正在寻求一个具体的行动过程。提供多个 cta 的唯一原因是让客户在不同的结账选项之间做出选择。在用户提供了他的电子邮件地址后，最好显示一个正确的表单(登录表单或地址表单)。

错误 # 3: “可接受的付款类型”没有列在结帐 CTA 附近。这是一个好主意，包括这些徽章在您的购物车页面，特别是如果你不像耐克知名，但页脚不是他们的地方。

错误 # 4: 如果顾客不以那种方式自我认同，“客人”这个词可能会导致混淆(如果作为客人购物，你能成为会员吗?)

移动购物车设计的整合

大多数性能最好的购物车页面都有一个干净简单的设计，同时也提供了正确的类型和信息量。当你重新设计你自己的产品时，请记住购物车页面的目的是为了让购物者审查和确认他们的订单，删除任何不必要的项目和添加类似的产品。任何其他需要的操作，如登录到他们的帐户或注册，可以留在结帐页面。所以请记住这些移动购物车的最佳实践和其他购物车优化技术。

记住，对比测试是关键！使用这里描述的策略来形成你自己的测试，并承诺长期调整元素。如果你这样做，你几乎肯定会看到你的转化率稳步增长。