跳转到主要内容
店面组件和展示

如何让顾客为每件商品选择变体(色板)

对于数量折扣优惠,启用变体选择器后,顾客可以为每件商品选择尺寸、颜色或其他选项。例如,买 2 件优惠可以包含一个小号象牙色包和一个大号腮红色包。选择下拉菜单、颜色色板、按钮或变体图片,让这些选项更加清晰。

启用变体选择器

此设置位于组合编辑器的变体选择器卡片,位于加购项标签页中。卡片标题中的开关会显示该功能处于开启还是关闭状态。

  1. 打开要编辑的组合,进入加购项标签页,然后找到变体选择器卡片。
  2. 打开卡片标题中的开关。

对于普通数量折扣和买 X 送 Y 优惠,启用此设置后,每件商品都可以单独选择。关闭时,未固定的普通优惠会跟随主题中选定的变体。商品组合卡片以及固定为一组变体的主商品仍可在卡片内使用选择器。

Bundlex B06 加购项标签页,已启用变体选择器,显示颜色色板、尺寸胶囊按钮、每件商品的图片,以及袋子预览旁隐藏的主题选择器设置。
在加购项中,(1)启用变体选择器,(2)选择每个选项的显示类型和预设,(3)检查颜色值。预览会显示已保存的选择。

开关控制的内容

普通优惠使用此开关控制主商品的每件商品选择器。即使关闭开关,商品组合主卡片仍会保留卡片内选择器,因此顾客可以与其他必需商品一起进行选择。适用时,必需的组合商品、赠品和可选额外商品也会保留各自的选择器。即使关闭开关,固定的主商品也可以保留普通选择器,但仅限于你固定的变体。

关闭开关时,商品组合行使用普通下拉菜单。打开开关后,配置的显示类型也会应用于必需的组合商品行。赠品和可选额外商品的选择器使用各自的控件。只有一个可选变体的商品可以直接以文本显示其信息,而不显示不必要的下拉菜单。

设置每个选项的显示类型

打开开关后,Bundlex 会加载此组合所适用商品中的变体选项,并在包含三列的表格中列出:选项、显示类型和预设。每一行代表一个选项,例如尺寸或颜色。

在显示类型列中,选择该选项在商品页面上的显示方式:

  • 下拉菜单,标准选择菜单。
  • 颜色色板,小型颜色色块。你可以为每个值分配颜色,请参阅下文。
  • 胶囊按钮 / 按钮,可点击的胶囊按钮或按钮,也可以选择显示变体图片。
  • 变体图片,将每个值显示为其商品图片。

你可以在不同选项之间混合使用显示类型,例如在同一商品中为颜色使用颜色色板,为尺寸使用下拉菜单。点击选项名称旁的查看眼睛图标,可在预览面板中显示包含该选项的商品。

选择共享预设

预设列用于设置显示类型的视觉样式。预设按类型共享:使用相同显示类型的所有选项共享一个预设,因此更改一个选项的预设会更新该类型的所有其他选项。颜色色板、胶囊按钮 / 按钮和变体图片各自拥有独立的预设集合,下拉菜单类型没有预设。

在预设菜单中选择自定义,打开色板样式部分,以便在内置预设之外进一步微调样式。

为颜色色板分配颜色

当某个选项使用颜色色板显示类型时,其每个值都会获得一个带颜色选择器的颜色字段。你可以:

  • 使用选择器手动设置每种颜色,或输入十六进制值。
  • 点击自动检测颜色,根据值名称自动填充颜色,例如“海军蓝”或“森林绿”。自动检测只会填充仍为空的值,当所有颜色都已设置后,该功能不可用。

在桌面设备上显示颜色名称

打开色板样式 > 颜色色板,然后启用悬停时显示颜色名称,以显示颜色名称提示。该设置仅适用于颜色色块,不适用于所有显示类型。触摸设备不支持悬停提示。

显示变体图片

启用显示变体图片(启用选择器后即可使用),在变体选择器旁显示所选变体的图片。该功能适用于任何选择器类型,不仅限于变体图片显示类型。

隐藏主题变体选择器

启用选择器后,你还会看到隐藏主题变体选择器。此设置会隐藏主题默认的变体选择器,仅显示 Bundlex 的选择器。主题选择器会通过 CSS 隐藏,而不是移除,这样主题的常规集成仍可让主商品图片保持同步。请在你的主题中测试此行为。

如果选择变体后主商品图片没有更新,你可能需要在 Bundlex 应用嵌入设置中调整变体区块选择器,使其与主题匹配。如果需要帮助,请联系支持团队。

折叠较长的每件商品列表

折叠变体选择器会将每件商品的选择折叠到一行中,并一次展开一行。这样可以让较大数量折扣优惠保持紧凑。该设置不适用于商品组合优惠。

测试选项、库存和价格

保存并激活折扣,然后在店面测试符合条件的商品。本示例使用立陶宛和 USD。在此示例中,小号象牙色包的价格为 $24,大号腮红色包的价格为 $30。买 2 件并享受 10% 折扣时,总价为 $48.60。使用实际的加购按钮添加商品,并确认购物车和结账页面中的两种颜色、两种尺寸及总价。

绗缝化妆包商品页面,在买 2 件优惠中显示独立的象牙色小号和腮红色大号选择,优惠总价为 $48.60,并已启用加购按钮。
(1)象牙色 / 小号和(2)腮红色 / 大号是独立选择。(3)两件商品折扣后的合计小计为 $48.60,实际购物车和结账页面均确认了这两个变体。

当隐藏不可用变体处于关闭状态时,已售罄的组合仍可显示并选择。在此示例中,选择腮红色 / 小号后会显示不可用消息,并阻止加购。选择有库存的大号后,按钮会恢复。完全不存在的组合则不同:选择器可能会将后续选项调整为有效组合,因此更改颜色后请检查最终尺寸。

绗缝化妆包页面,在第二行选中了已售罄的腮红色小号,显示不可用消息,并禁用了“已售罄”购买按钮。
(1)关闭隐藏设置后,腮红色 / 小号仍会显示。(2)不可用消息解释了原因,(3)普通购买按钮已被禁用。选择大号后,加购按钮会恢复。

要从支持的选择器中移除已售罄的值,请打开高级 > 优惠和库存 > 隐藏不可用变体。可用性遵循 Shopify 的库存政策,允许继续销售的零库存变体仍可能处于可用状态。请参阅变体选项可用性,了解适用范围和回退详情。

没有可供选择的内容时

当整个可选集合恰好只有一个变体时,下拉菜单会折叠为卡片上的变体名称。已配置的胶囊按钮或颜色色板仍可作为已选徽章显示。只有 Shopify 默认变体的产品不需要选择器。

这就是你预期的选择器可能未显示的原因。通常表示以下情况之一:

  • 该产品确实只有一个变体。
  • 你已将该商品固定为单个变体。
  • 隐藏不可用变体已开启,并且库存中只剩一个变体。

补充某个变体的库存,或扩大固定选择范围后,选择器会自动恢复显示。主要优惠和必选组合商品卡片都遵循这种从选择器到身份标识的显示逻辑。赠品、追加销售和附加项有各自的可用性筛选规则,只有一个可用选项时,可能不会单独显示变体名称。

编辑变体后重新加载选项

如果在完成设置后为产品添加、重命名或删除了变体,请点击变体选项表顶部的 重新加载选项,以获取最新选项。如果内容发生变化,Bundlex 会显示“变体已更新”;如果选项集已经是最新状态,则显示“已重新加载,没有变化”。在检查店面前,请保存由此产生的任何更改。编辑器中显示的新颜色在保存前不会发布。

如果没有显示选项

变体选项表需要产品选项数据,用于定位组合和必选组合商品。如果选项仍在加载,请等待加载完成后,再将空表视为配置问题。如果看到提示要求选择产品或产品系列,请先在 显示组件的位置部分完成设置。如果看到“所选产品没有可配置的变体选项”,则表示所选产品没有可配置的变体选项。

这篇文章对您有帮助吗?

您的反馈有助于我们改进文档。

谢谢,我们会继续改进这篇文章。

想与我们的团队聊天? 还有疑问?

仍需帮助?

我们的团队只需点击一下即可联系。给我们发送消息,我们会尽快回复。

我们使用少量 Cookie 来确保网站正常运行、衡量网站使用情况,并在您打开聊天组件时为其提供支持。请参阅我们的 Cookie 政策。