回到所有的课程
课程库

创建产品选项和欧宝体育在线首页变体

在Webflow电子商务中生成特定产品的变体,自动考虑大小或颜色欧宝体育在线首页选项。

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

选项允许你出售不同的变体同样的产品,就像不同尺寸欧宝体育在线首页和颜色的衣服。每个选项的独特组合都会产生一个变体。每个变体都被视为一个单独的产品,并且有自己的产品字段,您可以设置。欧宝体育在线首页

重要的是:
每种产品变欧宝体育在线首页体都计入站点计划的项目限制。了解站点规划的项目限制

在这节课中:

  1. 添加和管理选项集
  2. 更新版本
  3. 设置默认产品变量欧宝体育在线首页

添加和管理选项集

如果您销售的产品带有不同欧宝体育在线首页的选项,例如不同的大小和颜色,那么您可以为每种选项类型添加选项集。与这些选项的组合相匹配的产品的单个版本就是变体。欧宝体育在线首页例如,如果您销售多种尺寸、颜色和设计的t恤,您需要添加三个选项集:一个用于尺寸、一个用于颜色和一个用于设计。

显示产品、选项集和选项三列的图表。欧宝体育在线首页这三个包含一个产品的视觉,t恤和颜色协调的尺寸,颜色和设计细节。欧宝体育在线首页

要添加选项集,请打开具有选项的产品的详细信息视图,滚动到选项部分,然后欧宝体育在线首页+添加一个选项设置

选项部分显示一个加号图标,用于添加选项集。
您可以为产品集合中的各个产品项创建选项集。欧宝体育在线首页
必须知道
您可以为每个产品创建最多3个选项集。欧宝体育在线首页

添加选项

定义的名字你的选项集(大小,颜色…),并开始添加你的选项。输入每个选项并按Enter键创建该选项。尺寸可选:S, M, L, XL。颜色可选:黑色、白色、蓝色等。

Options部分包括一个新的选项集部分,其中有用于名称和选项的文本输入字段。有一个灰色的加号用于添加选项集。还显示了一个删除图标,取消和完成按钮。
必须知道
每个产品项欧宝体育在线首页目可以有50个变种。这限制了您可以添加的选项的数量。例如,如果您为选项集1添加了5个选项,那么您将不能为选项集2添加超过10个选项。(5 * 10 = 50)。

编辑选项

如果您犯了一个错误,需要重命名或删除选项,将鼠标悬停在选项名称上,然后单击出现在选项上的箭头。选择重命名或删除它。

蓝色选项变体编辑下拉菜单在选项部分突出显示。下拉菜单中的两项分别是Rename选项和Delete选项。

您也可以通过双击重命名一个选项。另一种按顺序从后到前删除选项的方法是当光标在选项字段中时按退格键。

管理选项集

创建选项集后,您可以通过单击选项集名称或悬停在其上时出现的设置图标来编辑该选项集。

选项部分突出显示了具有两个变体的大小变体。尺寸变体包含XL和L选项。

在这里,您可以重命名选项集、管理选项或通过单击垃圾桶图标删除选项集。

Options部分包括一个名为Size的名称文本字段,有两个变体,XL和L作为选项。还包括一个删除图标,取消和完成按钮。

删除选项集将删除变量清单中与之相关的任何变量。

更新版本

当您添加选项时,您将看到为选项集中的每个选项组合自动创建变量。因此,不同尺寸、颜色和设计的t恤的变体包括:s/黑色/普通,m/黑色/虚线,大/黄色/条纹等等。

一个图表,包括三个选项设置列,称为大小,颜色,设计和一个列的变量。

但我不卖其中的一些变种?

也许你没有黑色条纹衬衫,或者黄色衬衫只有小号。您如何确保您的顾客不会订购您不出售的变体?对于任何不可用的变体,更新变体细节,启用库存跟踪,并设置数量为0。这将使这些选项在下拉列表中不可选。

更新版本的细节

每个变体都是一个单独的产品,并且有自己的产品字段可以设欧宝体育在线首页置。所有变体都继承在主要产品上设置的主图像、更多图像、SKU、价格、比较价格和测量值。欧宝体育在线首页如果设置了数量,则由创建的第一个变量继承。

您可以通过单击变体或悬停在其上时出现的设置图标来手动更新和替换任何继承的值。

变体部分包括三个尺寸为S(小)的项目。这三种选择有不同的设计,平纹,虚线和条纹。
单击一个变体来编辑它的详细信息。
专业技巧
除非您的产品的变体具有相欧宝体育在线首页同(或几乎相同)的度量,否则最好在创建任何选项集(和变体)之前清除主产品的这些字段的值。如果您有许多变体,这是很有帮助的。由于这些值对于所有变体都是继承的,因此您可能会忘记更新其中一些继承字段的值。另一方面,更容易发现空字段并根据需要更新它们。
变体部分包括一个图像缩略图,更多的图像上传区域,跟踪库存,并包括下载开关按钮。还包括数量、SKU、价格、价格比较、重量、宽度、高度、长度、文件名和文件URL的输入字段。
对于每个变体,您可以设置以下字段的值:变体图像、价格、比较价格、宽度、高度、长度和重量。您还可以启用库存跟踪来设置数量

设置默认产品变量欧宝体育在线首页

一旦添加了变量,创建的第一个变量将成为默认变量。用a表示明星在变体目录列表中的⭑。

在变体部分突出显示了默认大小的小变体。产品缩略图旁边有一个星号。欧宝体育在线首页
在您的设计中,连接到产品字段(如价格和图像)的元素将显示默认变量的值。欧宝体育在线首页

一旦保存了产品,下次访问产品细节时,用于图像、更多图像、欧宝体育在线首页数量、SKU、价格、比较价格和尺寸(宽度、高度、长度、重量)的主要字段将不再适用于该产品。默认变量的值将成为该产品的默认值。欧宝体育在线首页这意味着,在任何产品集合列表或产欧宝体育在线首页品页面上,连接到这些字段的任何元素都将显示来自默认变体的值。

需要知道
删除所有选项集(变体)将恢复该产品的默认集合字段及其值。欧宝体育在线首页

更改默认变量

要将一个不同的变体设置为默认变体,请单击变体库存列表中的名称以访问详细信息,然后单击名为"缺席”。就是这样!

选择尺寸小的产品。欧宝体育在线首页变量部分突出显示了设置为默认按钮。

设计与变异

当涉及到设计时欧宝体育在线首页收集产品列表欧宝体育在线首页产品页面,您可以从中提取数据的集合字段对于所有产品都是相同的,无论它们是否有变体。欧宝体育在线首页这是因为默认变体和主要产品是同一个。欧宝体育在线首页因此,对于带有欧宝体育在线首页变体的产品,这些字段从默认变体中提取详细信息。

在左侧,蓝色枕套的产品图像连接欧宝体育在线首页到中间的“产品”集合的“主图像”字段。在右边,灰色罗纹枕套的产品图像显欧宝体育在线首页示默认变体的“变体图像”,因为该产品有多个变体。
这个image元素连接到“products”集合的“Main image”字段。欧宝体育在线首页左边的图片显示的是产品的“主图片”,没有任何变体。欧宝体育在线首页右边的图像显示默认变体的“变体图像”,因为这个产品有多个变体。欧宝体育在线首页

了解更多:设计电子商务集合

选择添加到购物车的经验

对于带有欧宝体育在线首页变体的产品,“添加到购物车”组件将显示一个名为选项列表.这允许用户在将商品添加到购物车之前,从该产品的不同选项中进行选择。欧宝体育在线首页

导航器包括一个名为Option List的包装器。这个包装器被选中并突出显示。

当购物者在这些选项之间进行选择时,显示默认变量数据的任何元素都将被更新,以显示所选选项的数据。

左边的选项1是一个小号的银色坐垫产品。欧宝体育在线首页右边选择2是中号银色坐垫产品。欧宝体育在线首页

作为设计者,您可以在变体下拉元素的设置中替换默认的“选择”文本。

在左侧,选择了一个选择字段。在右侧,选择字段的设置面板中填充了单词“Pick”,取代了之前的默认文本“select”。

checkout体验中的选项和变体

的选项列表中显示所选的选项,结帐页面,付款确认页面。

在左侧,在Navigator中选择了选项列表包装器。在右边,在条纹缓冲选项的签出部分选择了选项列表包装。

您可以像定制和设计集合列表一样定制这个选项列表。

客户购物车包含三个产品,每个产品的数量为1。欧宝体育在线首页产品名称欧宝体育在线首页,价格和尺寸也包括在内。每个项目都有一个移除按钮。在底部是59.97美元的小计和一个继续检查按钮。
这就是变量在购物车中出现的方式。注意显示所选变体细节的图像、价格和选项列表。

了解更多:自定义添加到购物车的体验

功能注意
这只是我们的第一个版本。了解我们正在考虑的附加功能和改进.如果您有额外的增强,您希望看到变体-或一般的电子商务-继续,并创建一个项目在我们的愿望列表.提前谢谢!
尝试Webflow——它是免费的
Baidu
map