回到所有的课程
课程库

定制购物车和结帐体验

了解和定制您的购物车,结帐,和订单确认。

本视频采用了旧的用户界面。更新版本即将到来!
克隆这个项目

通过Webflow电子商务,您可以使结帐体验与整个购物体验无缝集成。让我们看看如何定制和样式您的电子商务实用程序页面-购物车,结帐和订单确认。

在这节课中
  1. 指定Cart类型
  2. 定制购物车动画
  3. 风格不同的Cart状态
  4. 设计Cart包装器的样式
  5. 了解付款流
  6. 定制Checkout页面
  7. 定制贝宝付款
  8. 自定义签出页面错误消息
  9. 了解订单确认页面和相关元素
  10. 了解最低和最高交易金额
  11. 理解免费订单


添加、自定义和样式化Cart按钮之后,您可以自定义Cart本身。您可以选择类型、打开和关闭动画的缓和和持续时间,以及要在Cart预览中显示的项目数量。还可以指定在添加产品时是否打开Cart。欧宝体育在线首页

指定Cart类型

选择画布上的Cart元素,然后打开车元素设置面板(D).然后选择类型

定制购物车动画

通过设置转换来修改购物车打开和关闭的方式宽松而且持续时间的动画。您可以在预览模式下测试效果。

风格不同的Cart状态

现在你已经设置了购物车的打开方式,你可以在3种状态下对不同的元素进行样式设置:

  1. 默认设置(Cart预览)
  2. 空的(当购物车没有物品时)
  3. 错误(当出现错误而无法继续签出时)。

控件中可以在这些状态之间切换车包装器设置

了解更多:Cart元素

为不同的状态定制购物车

默认的状态时,您可以指定在购物车预览中应该显示多少项。

错误状态时,自定义签出失败时可能出现的错误消息。选择错误消息文本块来访问错误消息设置.在设置中选择每条消息,以便在画布上查看它。要编辑消息,请单击铅笔图标当您将鼠标悬停在消息上时,它会出现在设置中的消息旁边。

你可以恢复默认下的错误消息编辑错误消息

一旦您完成了对购物车的造型和定制,就按照打开它的方式关闭它元素设置面板>打开车

设计Cart包装器的样式

当您打开Cart时,您将看到围绕Cart的半透明覆盖在页面上。这就是“购物车包装”。

更改包装器的背景颜色:

  1. 选择车包装(你可以用导航器精度)
  2. 中更改背景颜色风格的面板
  3. 选择一个不透明的颜色,并添加一些不透明度,以使购物车在同一页面上是一个弹出式模式

您可以随时通过从Cart包装器的background-color属性中删除应用的样式来恢复默认样式。

了解付款流

从产品页面或产欧宝体育在线首页品列表中,购物者可以选择其中之一添加到购物车或者直接拿去收银台结账立即购买选择。

请注意PayPal结账采用了不同的流程,立即购买只适用于启用条纹的商店。

了解更多:加入购物车,现在购买

付款操作

一旦顾客将产品添加到购物车中,他们可以通过三种方式完欧宝体育在线首页成结帐,具体取决于你的商店设置:

  1. 结帐页面以完成信用卡付款。在Checkout页面上,他们还可以应用一个折扣代码和/或提供额外的信息对他们的订单。注意:该选项需要Stripe
  2. 使用网络支付(比如Apple Pay或谷歌Pay),它可以绕过本地支付方式快速结账结帐页面注意:这个选项需要Stripe和启用web支付设置
  3. 使用贝宝付款打开一个新的模式,购物者可以授权PayPal。然后,购物者被带到付款(贝宝)页面完成他们的购买,申请折扣,并提供额外的信息。如果你启用了PayPal,确保你已经设计好了页面。
请注意:您也可以添加网络支付而且贝宝按钮和你的母语比起来结帐在购物者离开购物车后,页面会为他们提供更多的选择。

定制签出页面

一旦在线购物者将产品添加到购物车中,并准备提交订单,他们将打开购物欧宝体育在线首页车,选择继续结账,然后被带到结账页面(/结账)。

要进入结帐页面,请打开购物车并单击继续结帐。


这是您可以定制的第一个电子商务实用程序页面。它在页面的面板并附带默认组件。您还可以更新所有电子商务页面,其中包括:

  • 结帐
  • 付款(贝宝)-只需要定制,如果贝宝启用
  • 订单确认
电子商务模板页面和实用程序页面

您可以通过重新排序和样式化组件和元素来定制签出页面。请注意,删除或隐藏带有必需字段的组件可能会破坏签出表单。您可以重新添加订单项订单汇总,网络支付无论何时你喜欢从添加面板结帐页面

付款形式

包含整个签出页面表单模板元素。如果您想恢复默认的签出页面模板,可以添加它。

订单项

显示购物车中的所有产品和变体欧宝体育在线首页。在完成结账过程之前,购物者可以确认这些是他们想要购买的产品。欧宝体育在线首页

订单汇总

显示购物车的小计,任何税和运输费率,以及订单的总数。这有助于购物者看到他们所支付的价格的细目。

网络支付

允许您的客户跳过默认的结帐过程,使用他们的数字钱包(如Apple Pay或谷歌Pay)快速结帐。

了解更多关于启用网络支付

额外的信息

显示在签出时收集的任何附加信息字段中输入的信息。注意:请确保更新订单和签出确认,因为这些包含独立的标签和字段,不会自动同步。

设计提示:你也可以添加导航条和页脚到这个页面,甚至一个“继续购物”按钮,把用户带回到主商店页面。

定制贝宝付款

如果你想使用PayPal,你需要设计一个单独的Checkout (PayPal)模板页面。

如果你不打算在你的网站上使用PayPal,你不需要担心这个页面。如果不启用支付服务提供商,PayPal将无法访问。


在发布的网站上,当使用PayPal时,购物流程是这样的:

  1. 顾客点击贝宝付款或(常规)结帐页面
  2. PayPal支付模式打开并提示购物者登录或输入支付细节和送货地址
  3. 购物者返回结帐页面(贝宝)PayPal认证后
  4. 购物者从中选择配送方法结帐页面(贝宝)(如果适用)
  5. 消费者完成购买
  6. 购物者被带到订单确认页面一旦购买完成

设计Checkout (PayPal)页面

结帐页面(贝宝)是自动创建时,电子商务启用。

请注意:对于电子商务项目启用贝宝功能之前可用,页面是自动创建后添加贝宝按钮到结帐页面.如果你没有这个页面,试着添加一个PayPal按钮到购物车。

类似于结帐页面,贝宝页面自带默认元素,但你可以添加和替换它们添加面板

PayPal Checkout表单包含所有默认元素。添加它可将页面还原为默认状态。


上面的元素结帐页面(贝宝)工作方式与结帐页面,但这两个页面没有链接。您需要手动为它们提供类似的结构和外观。

如果你想用折扣或收集额外的信息签出时,请确保将这些元素添加到两个结帐而且付款(贝宝)页面

PayPal Checkout页面与Checkout有何不同

  • 因为你的购物者是用PayPal支付的,所以不需要输入支付信息
  • 您的购物者必须在此页面上提供的唯一信息是一种送货方法
  • 如果订单中只有不需要运输的商品,购物者就不需要选择运输方法。在这种情况下,页面的工作方式更像是完成购买之前的最后确认。
请注意PayPal不会将你的购物者的整个账单地址发送到Webflow -在发布的网站上付款信息部分只显示姓名和帐单地址国家

自定义签出页面错误消息

如果结账时出现错误,购物者将看到各种错误消息。您可以通过选择。来预览和定制这些消息付款形式元素并切换到错误在设置面板中的状态。

然后,单击错误消息元素来访问错误消息设置.在设置中选择每条消息,以便在画布上查看它。若要编辑消息,请单击设置中悬停在消息旁边时出现的铅笔图标。

请注意:如果您的商店使用PayPal,您将需要自定义相同的错误消息结帐页面(贝宝)

了解订单确认页面和相关元素

一旦提交订单,在线购物者将被带到订单确认页面。这是另一个电子商务实用程序页面页面的面板>电子商务页面部分

订单确认页面附带一个默认模板,您可以完全自定义和样式。不像结帐页面,此页面上的所有组件都可以删除并从添加面板.您可以通过拖动顺序确认组件来添加整个模板和所有块。

您可以在订单确认容器中单独添加以下组件:

  • 订单确认
  • 订单项
  • 客户信息
  • 送货方式
  • 付款信息
  • 订单汇总
  • 额外的信息
  • 下载(β)

订单确认

包含整个订单确认页面模板元素。如果您想恢复默认的页面模板,可以添加它。

订单项

显示购物车中的所有产品和变体欧宝体育在线首页。在完成结账过程之前,购物者可以确认这些是他们想要购买的产品。欧宝体育在线首页

客户信息

显示了电子邮件而且送货地址客户在结帐表单中提供的。

送货方式

显示了送货方式选择在结帐。

付款信息

显示了付款信息而且帐单地址顾客在结帐时提供的。

请注意:对于PayPal订单,这将只显示一个名称和账单地址国家,因为PayPal不发送完整的账单地址到Webflow。

订单汇总

显示了小计马车,任何而且运费,总计的订单。这有助于购物者看到他们所支付的价格的细目。

额外的信息

可用于收集客户数据,如电话号码、礼物信息和个性化指示。

下载(β)

按顺序列出所有可下载文件的列表。了解更多关于数字下载

设计提示:您可以添加导航栏和页脚到这个页面。您还可以添加一个按钮,将用户带回主商店页面或您的主页。

了解最低和最高交易金额

支付处理程序有交易限制。如果购物者的订单总数低于最低或高于最高,他们将在结帐时收到一条错误消息。

交易限制取决于支付处理器和商店货币:

  • 贝宝的最低限额是0.01,但使用贝宝的购物者可能会有交易的最高限额。详见PayPal文档
  • Stripe的限制取决于商店的货币。例如,以美元计算,最低为0.50美元。看到条纹文档

当订单低于最低要求时,购物者将在结帐时看到“未满足最低要求”的错误,您可以自定义该错误。了解有关自定义错误消息的更多信息。

理解免费订单

有时,购物者可能会因为你送东西或他们申请了100%的折扣而订单总额为零。在这种情况下,Webflow将从结帐处理订单,而不将其发送给支付处理器。

免费订购须知:

免费订单将显示在您的Webflow订单管理器,但不是在您的Stripe或PayPal仪表板,因为我们不发送这些订单到支付处理器。

由于是计算发货前启动PayPal checkout,所以发货前的小计为0时,我们无法启动PayPal checkout。这意味着在只使用paypal的商店中,当订单小计为0时,购物者将无法完成交易,但他们需要支付运费。

我们建议只使用paypal的商店提供免费送货服务,或者只使用不需要送货的免费订单。欧宝体育在线首页在本例中,购物者将使用本机结帐页面而不是结帐页面(贝宝)

尝试Webflow——它是免费的
Baidu
map