如何让组件匹配主题颜色

Bundlex 只需几次点击，就能让组合组件匹配店铺外观。组件颜色预设面板会读取 Shopify 主题的配色方案，并推荐现成的颜色组合，让优惠看起来像页面原生的一部分，而不是后加的元素。

在哪里找到颜色预设

在编辑器中打开一个组合，然后转到样式标签页。组件颜色预设面板位于详细的组件样式控件上方。使用预设一次性设置所有内容，然后根据需要在下方的组件样式部分微调各个元素的颜色。

选择主色

主色行是整个调色板的起点。你可以通过四种方式进行设置：

• 推荐色板，彩色色板直接取自 Shopify 主题的配色方案，例如按钮颜色、文字颜色和背景颜色等。点击其中一个即可应用。
• 默认颜色，主题色板后面的深灰色色板可恢复组件默认的黑白配色。
• 自定义颜色，点击带加号图标的色板打开颜色选择器，并选择任意十六进制值。输入十六进制值后按 Enter，并检查预览是否发生变化。
• 随机颜色，如果只是想探索不同选项，可以点击刷新色板生成随机颜色。

无论选择哪种方式，Bundlex 都会立即围绕该颜色重新生成组件的其余颜色，并将结果应用到实时预览中。

选择强调色（次要颜色）

次要颜色是用于徽章、激活状态和高亮显示的强调色。Bundlex 会自动生成与主色协调的颜色，并提供几种和谐配色选项供你点击切换。

如果你希望自行设置强调色，次要颜色行也提供与主色行相同的两种覆盖选项：

• 自定义强调色，点击加号色板打开选择器，输入准确的十六进制值。
• 随机和谐色，刷新色板会从色轮中选择与主色形成对比且仍然协调的颜色。

透明优惠切换开关

在主色旁边，你会看到一个透明切换开关，用于控制未选中优惠卡片的背景：

• 关闭，未选中优惠的背景会显示为纯色。如果颜色来自预设，则会使用你所选颜色的浅色调，因此每个优惠层级都会显示为独立卡片。
• 开启，未选中优惠的背景会保持透明，呈现更简洁、扁平的外观，并融入页面。

切换开关只会改变未选中优惠背景的透明度。已选中和悬停状态的背景、文字、徽章及边框颜色均保持不变。关闭后，背景会重新变为完全不透明。开启透明选项时点击的色板，会应用该预设的透明版本。

“应用边框圆角”建议

Bundlex 不仅可以借用主题的颜色。如果检测到主题圆角与组件当前圆角不同，就会显示应用边框圆角横幅，并附带提示“让组件圆角匹配主题”。

1. 点击横幅上的应用，即可将主题圆角应用到组件的优惠卡片、优惠图片和交叉销售图片。
2. 如果你希望保留当前圆角，也可以点击关闭图标将其关闭。

如果未检测到差异、主题未提供可用的圆角，或你已关闭建议，则可能不会显示该建议。你仍然可以在组件样式下自行设置圆角。

微调各个元素

选择调色板后，在组件样式下展开一个元素。优惠卡片可让你分别调整圆角、间距，以及已选中、悬停和未选中状态。在此示例中，我们将卡片圆角设置为 8 像素。请先应用预设，再进行这些最终调整，因为选择其他预设可能会替换单独设置的颜色。

保存并检查店面

点击保存。在目标商品页面上测试有效的折扣。选择每个优惠，检查文字和徽章的对比度，选择变体并使用“加入购物车”。请在桌面端和移动端检查页面，因为编辑器预览无法显示所有主题背景或屏幕尺寸。

我们的示例保留相同的数量折扣规则：购买两只 Ivory Small 包，享受 10% 折扣后的商品小计为 $43.20。样式只会改变展示效果，不会改变折扣计算。请将购物车和结账检查作为最终审核的一部分。

建议的生成方式

Bundlex 会读取主题的颜色设置，并生成匹配的色调。对于相同的主题设置，基于主题生成的建议结果保持一致。随机颜色和随机和谐色控件则会有意生成新的选项。

提示

• 预设是快速开始的方式。应用预设后，你仍然可以在组件样式中调整任意单个元素的颜色。
• 如果没有显示推荐色板，说明 Bundlex 无法从当前启用的主题中读取颜色值。你仍然可以使用自定义和随机选项。
• 使用实时预览检查对比度，尤其是在开启透明切换开关时，确保徽章和文字在页面背景上仍然清晰易读。