回到所有的课程
课程库

设计你的商店

使用数据从您的电子商务收集设计您的Webflow电子商务产品页面。欧宝体育在线首页

本视频采用了旧的用户界面。更新版本即将到来!

一旦你建立了你的产品列表,你就可以在你的主页和欧宝体育在线首页其他静态或使用集合列表的集合页面上展示你的产品和产品类别。您可以筛选、排序、分页和限制集合列表中的项目数量。您将拥有一个完全自定义的产品库!欧宝体育在线首页

然后,您可以自定义“添加到购物车”组件、购物车组件和结帐过程的外观和感觉,以便购物体验与项目的其他部分无缝集成。

在这节课中
  1. 电子商务网页
  2. 电子商务的元素
  3. 电子商务集列表

电子商务网页

您可以构建和样式您的欧宝体育在线首页产品而且类别页面与CMS Collection页面完全相同。在Pages面板中,您会注意到还有两个新的实用程序页面,它们允许您自定义签出体验。的结帐Page是购物者完成购物并继续结账后看到的第一页。他们提交订单后,就会被送到订单确认页面。您可以定制这两个页面和它们的样式,以便它们与商店的其他部分无缝集成。

了解更多:

电子商务的元素

有了电子商务,您将获得一组新的元素和组件,允许您将电子商务功能与您的设计和指导在线购物者通过他们的购物旅程,从添加产品到他们的购物车,查看和更新他们的购物车,以检查和获得订单确认。欧宝体育在线首页

添加一个购物车到任何静态或集合页面完全自定义和样式的购物车按钮还有推车本身。你有很多选择定制购物车

添加到购物车

你可以添加添加到购物车元素到您的产品页面或欧宝体育在线首页连接到产品集合的任何集合列表。它允许购物者将产品添加到他们的购物车。欧宝体育在线首页你可以自定义按钮任何你想要的方式-选择是否包括一个数量输入字段,样式默认状态,以及断货和错误状态。

网络支付

它允许你添加网络支付放进你的付款单或购物车里。

检出元素

签出表单包含许多组件,其中一些对于其功能是绝对必要的,不能从父组件中删除。

订单确认的元素

订单确认组件还附带许多子组件。这个组件可以完全定制,任何子组件都可以从添加面板中添加。

电子商务集列表

您可以使用集合列表来创建产品网格,并在主页和其他静态或集合页面上显示类别列表。欧宝体育在线首页例如,如果您在博客集合中引用了产品,那么您欧宝体育在线首页还可以提取产品信息并在博客文章中显示它们。

了解更多:使用收集列表展示收集项目

欧宝体育在线首页产品搜索

您可以使用网站搜索创建一个自定义搜索引擎,允许购物者搜索您网站上的特定内容。

了解更多:设置网站搜索

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