建立产品选择和多样性

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

选择 使您能够营销各种 品种 同一件商品,例如不同尺寸和颜色的衣服。每种独特的选择组合都会产生一种变体。每种变体都被视为一种独特的产品,并且具有您可以配置的特定产品字段。

重要的:
每种产品变体都会影响您网站订阅的产品上限。了解您网站计划的产品限制。

在此会话期间:

  1. 整合并监督选择包
  2. 修改多样性
  3. 建立默认产品变体

整合并监督选择包

假设您销售的产品具有多种选择,例如不同的尺寸和颜色,则可以为每个选择类别添加选择包。适合这些选项组合的产品的单个版本是一种选择。例如,如果您销售多种尺寸、颜色和图案的 T 恤,则需要添加三个选择包:一个用于尺寸,一个用于颜色,一个用于图案。

一张图表,展示了产品、选项集和选项的三列。这三列包含 1 个产品(T 恤)的视觉效果,以及尺寸、色调和图案的颜色协调细节。

要添加选择包,请启动带有选项的产品详细视图,滚动到选项部分,然后 + 整合 一个 选择包.

选项部分展示了一个加号图标,用于合并选择包。
您可以为产品系列中的个别产品项目创建选择包。
必须注意
每个产品最多可以创建 3 个选择包。

融入选择

定义 标题 选择选项包(大小、色调……),然后开始输入选项。输入每个选项并按 Enter 键确定选项。大小选项可以是:S、M、L、XL。色调选项可以是:黑色、白色、蓝色等。

选项部分有一个新的选择包部分,其中包含用于输入标题和选项的文本输入字段。有一个暗淡的加号,表示包含选择包。此外还有删除图标、取消和完成按钮。
必须注意
每个产品项目最多可以拥有 50 种多样性。这限制了您可以添加的选择数量。例如,如果您为选择包 1 有 5 个选择,那么您将无法为选择包 2 添加超过 10 个选择。(5*10=50)。

调整选择

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

选项部分突出显示了蓝色选择多样性编辑下拉菜单。下拉菜单中的两项是重命名选择和删除选择。

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

监督选择包

您可以通过单击选择包标题或悬停时显示的设置图标来修改选择包创建后。

选项部分突出显示了具有两种分集的幅度分集。幅度分集包含 XL 和 L 选项。

此时,您可以通过选择垃圾桶图标来更改选择包标题,管理选择或删除选择包。

选项部分包含一个名为“尺寸”的标题文本字段,两个选项,XL 和 L。其中包括删除图标、取消和完成按钮。

删除选择包将会清除多样性清单中任何相关的多样性。

修改多样性

添加选项后,您会发现,系统会自动为选项包中的每个选项组合生成变体。因此,不同尺寸、颜色和图案的 T 恤的变体将包括:s/黑色/纯色、m/黑色/圆点、大/黄色/条纹等。

该图表包含三个选择包列(分别为“尺寸”、“颜色”、“设计”)和一个多样性列。

但这些品种我都不卖啊?

也许您没有黑色条纹衬衫,或者黄色衬衫只有小号尺码。您如何确保您的买家不会选择您不销售的款式?对于任何无法购买的款式,请调整款式详细信息,启用库存监控,并将数量指定为 0。这将使这些选项无法在备选列表下拉列表中选择。

修改变体详情

每个变体代表一种独特的产品,并具有可配置的单独产品字段。指定给主要产品的主要描述、补充视觉效果、SKU、成本、价格比较和测量指标将传递给所有变体。指定的数量将归属于形成的初始变体。

通过选择变体或将鼠标悬停在其上以显示齿轮图标,您可以手动调整和替换任何继承的值。

变体部分包括三款 S 尺寸(小号)的产品。这三种选择拥有不同的设计:纯色、圆点和条纹。
单击某个变体可以细化其细节。
有价值的提示
如果您的产品变体的尺寸不同(或几乎相同),则在构建任何选项集合(和变体)之前清除主产品中这些字段的数据可能会很有帮助。这种做法在涉及大量变体的情况下非常有用。由于这些值在所有变体中继承,您可能会忽略更新其中一些继承字段的值。相反,识别空字段并进行相应修改会更容易。
变体部分包括缩略图、用于上传更多图片的区域、用于库存跟踪和下载包含的切换按钮。此外,还提供了用于输入数量、SKU、成本、价格比较、重量、宽度、高度、长度、文件名和文件 URL 的字段。
参照每个变体,可以配置以下字段的选项:变体图像、价格、价格比较、宽度、高度、长度和重量。还可以激活库存跟踪来确定数量。

建立主要产品变体

在附加变体时,最初建立的变体将承担主要变体的角色。这种指定由 星星 ⭑ 在变体库存清单内。

突出显示的默认小尺寸变体在变体部分中展示。产品预览旁边有一个星号。
在您的设计中,与产品字段相关的元素(如价格和图像)展示了与主要变体相关的值。

保存产品后,产品的主要字段(包括图片、附加图片、数量、SKU、价格、价格比较和尺寸(宽度、高度、长度、重量))将不再可用。链接到默认变体的值将作为此产品的默认值。因此,任何产品汇编或产品页面上链接到这些字段的任何元素都将显示默认变体的值。

基本信息
删除所有选项集(变体)将恢复该产品的默认收集字段及其对应的值。

修改主要变体

要将替代变体指定为主要变体,请在变体库存列表中选择变体名称以访问详细信息,然后单击“设为默认”按钮。就是这样!

选择了小尺寸的产品。亮点在

制作变体

在设计时 产品收藏列表产品页面,用于数据检索的集合字段在所有产品中都是统一的,无论它们是否具有变体。这是由于默认变体和主要产品的合并。因此,对于具有变体的产品,这些字段从默认变体中提取详细信息。

左侧的蓝色枕套产品图片与中间的“产品”系列的“主图”字段相对应。右侧的灰色罗纹枕套产品图片由于此产品有多个变体,因此显示默认变体的“变体图片”。
此图像组件对应于“产品”集合中的“主图像”字段。左图展示没有任何变体的产品的“主图像”。相反,由于产品有多个变体,右图显示默认变体的“变体图像”。

发现更多: 探索电子商务收藏

加入购物车过程中的选择

对于带有变体的产品,“添加到购物车”机制应显示一个附加附件,称为 备选列表. 这使得用户可以在将该产品添加到购物车之前从该产品的不同选项中进行选择。

在导航器中,有一个名为选项列表的部分。这个部分是被选择和强调的部分。

当消费者浏览这些选择时,任何显示来自默认变体的数据的组件都将进行调整,以展示所选选项的信息。

左侧选择1为小号银色枕头产品,右侧选择2为中号银色枕头产品。

设计人员可以用配置中的默认“选择”文本替换变量下拉组件。

左侧是选择字段。右侧是选择字段的选项面板,其中“Pick”一词取代了之前的默认文本“Select”。

结账流程中的选择和变化

所选选项将显示在列表中 篮子, 这 查看 部分,以及 结帐确认 部分。

左侧是在导航器中选择了选项列表包装器。右侧是在条纹垫选项的结帐部分中选择了选项列表包装器。

您可以个性化此选择列表,类似于您自定义和设计集合列表的方式。

购物车中有三件商品,每件数量为 1 件。还指定了产品名称、价格和尺寸。每件商品都有一个删除按钮。底部有总计 $59.97 美元和一个继续结帐按钮。
这是购物车中变体的显示方式。观察图片、价格和选项列表,了解所选变体的详细信息。

发现更多: 定制购物体验

特征提及
我们已经发布了变体的初始版本。 探索我们正在考虑的附加功能和增强功能。如果您希望看到变化的进一步改进——或者对于一般的在线交易——请随时在我们的 建议列表。我们提前感谢您的贡献!
麦宜云
Ewan Mak 的最新帖子 (查看全部)