回到所有的课程
课程库

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

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

这个视频的特点是一个旧的UI。更新版本即将发布!
克隆此项目

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

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

在这节课中:

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

添加和管理选项集

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

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

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

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

添加选项

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

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

编辑选项

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

蓝色选项变体编辑下拉菜单突出显示在选项部分。下拉菜单中的两个项目是“重命名”选项和“删除”选项。

还可以通过双击选项重命名它。另一种按从最后到第一个顺序删除选项的方法是,当光标位于选项字段中时,按退格键。

管理选项集

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

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

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

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

删除一个选项集将删除变量列表中与之相关的所有变量。

更新版本

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

一个图表包括三个选项集列,分别是尺寸、颜色、设计和变量。

但我不卖这些变种吗?

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

更新变体详细信息

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

您可以手动更新和替换任何继承的值,方法是单击变量或鼠标悬停在其上时出现的设置图标。

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

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

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

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

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

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

更改默认变量

要将不同的变体设置为默认变体,请单击变体清单中的名称以访问详细信息,然后单击名为“缺席“就是这样!”

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

可变设计

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

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

了解更多:设计电子商务收藏

添加到购物车体验中的选项

对于具有欧宝体育在线首页变体的产品,“添加到购物车”组件将显示一个额外的包装器选项列表.这让用户在将商品添加到购物车之前,可以从该产品的不同选项中进行选择。欧宝体育在线首页

Navigator包含一个称为Option List的包装器。此包装器被选中并突出显示。

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

在左边,选项1是一个尺寸小的银坐垫产品。欧宝体育在线首页右边的选项2是中型银坐垫产品。欧宝体育在线首页

作为设计人员,您可以在可变下拉元素的设置中替换默认的“select”文本。

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

结帐体验中的选项和变体

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

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

您可以像自定义和设计集合列表一样自定义该选项列表。

顾客推车里有三个产品,每个产品的数量是1个。欧宝体育在线首页产品名称欧宝体育在线首页,价格和尺寸也包括在内。每个项目都有一个删除按钮。在底部是59.97美元的小计和一个继续结帐按钮。
这就是变量在购物车中出现的方式。注意图片、价格和选项列表显示了所选变体的详细信息。

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

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