电子商务购物车页面设计的 8 个最佳示例

您的购物车页面设计可以促成或破坏转化。 数据显示，购物车的可用性直接影响转化率。

在本文中，我们将向您展示顶级在线商店品牌如何战略性地设计其购物车页面。 但首先，让我们介绍一下有关购物车页面的基础知识。

您的电子商务购物车允许访问者购买产品或服务。 客户还可以查看您的产品详细信息、输入优惠券代码并选择他们的付款方式以进行结帐。

尽管购物车对在线商店的利润非常重要，但我们发现许多购物车页面设计不佳。

以下是令人印象深刻的电子商务购物车的真实示例，可帮助您改造商店。 目标始终是客户的体验。

我们来看一下！

你想看更多的例子吗？ 下载我们的免费滑动文件并从 26 个购物车示例中获得灵感。

目录

8个电子商务购物车设计示例

您需要了解的电子商务购物车最佳实践

如何减少购物车放弃并增加销售额

令人高兴的是，我们对流行电子商务网站的研究并不全是坏消息。 我们发现了几家具有创新购物车页面设计的在线商店，这些设计推动了转化。 将这些视为模板并根据您的品牌风格更改规格。

这里有八个鼓舞人心的购物车设计。

1. B&H
2. 蒂莉的
3. 全鸟
4. 永远21
5. 耐克
6. 丝芙兰
7. 稀有美女
8. 露露柠檬

乍一看，B&H 的“添加到购物车”屏幕与任何其他销售电子产品的网站相似。 但是，当您单击“添加到购物车”按钮时，客户可以在其简单的设计中执行数量惊人的操作。

例如，该页面显示与所选产品完美搭配的配件——让客户有理由将更多商品添加到他们的购物车中。

此外，该页面还提示客户考虑其产品的保修。

单击购物车图标会将客户重定向到更标准的页面。 它提醒他们那些相关的产品推荐。

这让他们有另一个机会将这些物品添加到他们的购物车中，以防他们忘记了这些物品或改变了主意。

Tilly 的在线服装店简单易用。 该页面仅显示最必要的信息以及大量引人注目的图片以吸引访问者。

他们巧妙的“加入购物车”设计改善了客户的购物体验。

当客户将产品放入购物车时，“迷你购物车”会在右侧展开。 它让用户一目了然地跟踪他们的项目。

当他们完成时，它还有一个“结帐”按钮。 因此客户可以毫不费力地直接结账。 这个“加入购物车”示例展示了一种鼓励冲动购买的好方法。

侧消息是从屏幕左侧或右侧滑动的网站元素。 当您需要显示需要大量空间的重要信息时，您可以使用它。

Allbird 的购物车侧面板设计与网站的整体主题融为一体。 它显示了客户需要知道的一切。

这是弹出的消息：“恭喜！ 您可以获得免费的标准送货服务。” 这是从一开始就反对放弃购物车的好方法。 他们告诉客户运费不会意外变化（这是潜在客户留下购物车的最大原因之一）。

在该消息下方，购物车页面显示添加的产品及其价格。 它还统计小计并推荐其他类似项目。

Forever 21 的“添加到购物车”的免费送货标准是透明的。 但是，他们要求购物者花费一定的金额才能获得免费送货的资格。 您可以看到，这辆购物车距离免费送货的资格仅 10.01 美元。

他们还有一个大的优惠券代码字段，可以轻松添加折扣。

即使在客户进入结账页面之前，这两个省钱功能也会培养一种积极的情绪。 结果：更高的销售额。

当购物者点击耐克网站上的“加入购物车”按钮时，他们会在屏幕右上角收到一个小通知。

迷你购物车窗口中有两个选项：查看您的包或直接结帐。

这是一个鼓励客户立即购买或继续浏览网站的选择。

耐克还发布了诸如“仅剩几件，立即订购”之类的信息，以指导购物者完成结账流程。 以这种方式吸引顾客的注意力可以带来更多的销售，因为没有人愿意失去一双好鞋。 这被称为 FOMO 或害怕错过策略。

耐克购物车页面的另一个亮点是预计发货日期。 它让购物者有机会在特定日期想象自己穿着新鞋。 诸如此类的细节很重要！

Sephora 的购物车通知系统结合了购物车页面设计功能的大量最佳实践。

它们显示一个预总金额。 它还向客户展示了他们需要花费多少才能获得免费送货的资格。 他们还为每位客户提供个性化的产品推荐。

Sephora 通过在购物车通知页面上提供易于访问的链接提供免费样品（以及奖励和促销），超越了这些其他网站。

客户最多可以选择两个免费样品添加到他们的购物车。 这是为客户提供附加值的绝佳解决方案，并鼓励他们尝试新产品。

Rare Beauty 是另一个在网上占有重要地位的化妆品牌。 像丝芙兰一样，他们为客户提供与订单相同的免费商品。

它们还显示需要向订单添加多少资金。 然后购物者知道他们何时有资格获得免费送货。

Rare Beauty 非常规地使用大 X，因此客户可以轻松地从购物车中取出商品。 这使得编辑他们的订单变得容易。

您可以了解他们的客户为什么喜欢在线购买——这是一种快速、轻松的结账方式。

在 Lululemon 的购物车中，您首先注意到的是顶部的大信息：“您的品味很棒。”

这样的消息让用户想要点击购物车图标！

赞美您的客户是感谢他们在购物车中添加商品的好方法。 并表现出善意。 这对 Lululemon 尤其有效，因为它们具有积极和肯定的品牌形象。

Lululemon 的结账按钮很大且颜色鲜艳。 它吸引了用户的眼球，他们推荐互补的产品，以鼓励客户“继续购物”。

创建在线购物车页面时：从多个不同角度考虑挑战。

出色的购物车设计需要显示客户的订单摘要。 但这也应该让他们感到舒服，要么继续购物，要么立即结账。

您可以像上面的示例一样获得出色的结果，并通过我们的最佳实践提高您的转化率。

以下是电子商务购物车页面设计的基础知识摘要：

• 向用户显示您支持的购物车的总成本、运输详情和付款方式。
• 推荐更多与客户购物车中已有产品相匹配的产品。
• 网站用户应该能够毫不费力地了解如何定制他们的购买（通过选择颜色、数量、尺寸等）。
• 通过在购物车中使用大型、高质量的产品图像来减少混淆。
• 清楚了解运费将花费多少或客户必须花费多少才能获得免费送货。
• 突出显示您的网站接受哪些支付网关。
• 显示证明您的付款流程安全可靠的符号。
• 添加促销代码框以承诺真正的价值。

您需要设计从产品浏览到将商品添加到购物车，再到实际结账的无缝过渡。 这是转化率优化的一个关键方面。

即使有最好的购物车设计，也不能保证顾客会完成他们的结账过程。

研究人员发现，2019 年的平均购物车放弃率达到了惊人的 77.13% 。

正在改进其购物车页面的企业在其电子商务报告中发现，弹出窗口往往是鼓励访问者结账的最有效方式之一。

例如，雅芳在采用 OptiMonk 的购物车放弃预防系统后，其购物车放弃率下降了 16.5% 。 它检测商店访客何时可能放弃他们的购物车，并向他们发送一个弹出窗口，鼓励购物者完成购买。

让我们从最好的弹出示例开始。

购物车放弃弹出窗口的 3 个示例

1. 推广不可抗拒的报价

您可以使用弹出窗口在有限的时间内提供免费送货或其他店内折扣。

由于购物者对其订单的运费非常敏感，因此这是减少购物车放弃的最佳方法之一。

查看 OptiMonk 的弹出模板库，找到一个非常适合您的商店设计和结帐页面设计的模板。

2.通过限时优惠增加紧迫感

使用时间压力感可以说服网站访问者结账。 让购物者知道他们对产品可用性的看法。 这增加了他们购买决定的紧迫感。

例如，SwissWatchExpo 是一家销售二手豪华手表的商店。 他们使用弹出窗口明确表示手表只会为他们保留 15 分钟。 这种紧迫感导致转化率提高了 25% 。

3.推荐相关产品重新获得关注

如果用户在没有结账的情况下离开，很可能他们只是在浏览您的商店时将商品保存为可能的购买选项。

您可以通过显示替代产品的弹出窗口来吸引他们的注意力——类似于他们在购物车中的产品。 您可以通过让他们快速查看商店中的更多选项来提高转化率。