向小组件添加自定义 CSS

Bundlex 为小组件样式提供了完整的可视化编辑器，但有时你需要调整编辑器未提供的细节，或覆盖主题强制应用到小组件的样式。自定义 CSS 正是为此准备的高级调整方式。本文介绍可以添加自定义 CSS 的两个位置，以及如何可靠地定位小组件。

添加自定义 CSS 的两个位置

有两个独立的“自定义 CSS”字段，它们的作用范围不同。

组合的“自定义 CSS”字段

每个组合都有自己的 自定义 CSS 部分，可在样式选项卡中找到。你在此处粘贴的 CSS 会随该组合一起保存，因此当调整只应应用于显示该特定组合的位置时，应选择此字段。

1. 在 Bundlex 控制面板中打开该组合。
2. 打开样式选项卡，并展开自定义 CSS，它位于小组件样式下方的最后一项。
3. 将规则粘贴到代码编辑器中。该字段通过占位符提示格式：.bx-widget-container {margin-bottom: 10px;}。
4. 保存组合。

应用嵌入的“自定义 CSS”字段

Bundlex 应用嵌入（你在 Shopify 主题编辑器的“应用嵌入”下启用的主题应用扩展）也有一个自定义 CSS字段，启用显示高级设置后即可看到。在此处添加的 CSS 会应用于嵌入显示的所有位置，因此适合用于需要在小组件出现的每个产品页面上生效的主题级调整。

1. 在 Shopify 后台中打开在线商店，然后点击编辑主题。
2. 打开 应用嵌入，找到 Bundlex Bundles。
3. 启用显示高级设置，然后将规则粘贴到自定义 CSS字段中。
4. 保存主题。

一般来说：针对单个组合的调整，请使用组合字段；针对小组件所有显示位置的调整，请使用应用嵌入字段。

定位小组件

Bundlex 标记使用 bx- 类。这些类可用于定位当前小组件中的以下元素：

• .bx-widget-container - 小组件容器。
• .bx-widget - 小组件内容。
• .bx-offer-wrap - 优惠包装器。
• .bx-offer - 该包装器内的优惠卡片。
• .bx-active .bx-offer - 已选优惠卡片，active 类位于其包装器上。
• .bx-offer-title 和 .bx-offer-subtitle - 优惠文本。
• .bx-original-price 和 .bx-discounted-price - 原价和折后价格文本。

将规则限定在小组件容器内。例如：

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

在设置样式前，请先检查产品页面上的元素。标记会根据启用的功能而变化，从旧版小组件复制的选择器可能不再匹配。

使用 !important 覆盖主题样式

请先使用内置控件。对于小组件宽度，请尝试样式 > 小组件样式 > 容器 > 最大宽度 > 全宽（100%）。如果主题规则仍然覆盖结果，请检查受影响的元素，并仅在需要的声明上使用 !important。例如：

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

此示例会填满可用的父容器，但无法使主题中较窄的列变宽。如果规则没有效果，请检查选择器是否匹配已渲染的元素、样式表是否已加载，以及声明是否有效。然后检查哪个冲突规则优先级更高。使用更具体的选择器后，可能无需 !important。

何时向支持团队寻求帮助

两个“自定义 CSS”字段都说明，如需帮助可以联系 Bundlex 支持团队，这项支持确实可用。如果你无法确定正确的选择器，或自定义主题以 !important 无法解决的方式与覆盖规则冲突，请将产品页面链接和你希望进行的更改说明发送给支持团队。他们可以提供经过测试的选择器，供你直接粘贴使用。

嵌入的显示高级设置选项所显示的选择器字段也是如此，这些字段用于自定义位置、加购按钮、产品表单以及数量或变体区块。它们同样是 CSS 选择器，对于无法自动检测的自定义主题，支持团队可以帮助你填写这些字段。

CSS 不会改变折扣规则，但可能隐藏价格、选项或按钮，导致买家无法使用小组件。应用规则后，请在桌面设备和移动设备上测试所有优惠状态、变体选项以及“加购”。