自定义组合商品的展示样式

【组合销售】应用中【自定义样式】功能让您能更灵活地控制组合商品在商品页上的展示样式。通过此功能，您可以个性化组合商品的布局、颜色、字体、按钮等，从而更好地展示组合商品，提升顾客的购物体验。

本指南将带您了解如何进入并使用【自定义样式】的设置选项，轻松自定义您的产品组合样式。 

组合商品样式的套用逻辑

在开始自定义组合商品的显示样式之前，了解样式设置的套用逻辑非常重要。本节将说明影响样式配置的关键规则和条件，帮助您确保自定义设置按预期生效。

自定义样式适用条件

只有在活动页的【展示设置】区块中启用了【跟随高级设置】的组合活动，才能套用自定义样式功能中的样式设定。

CSS 代码优先级

如在【自定义样式】中添加了【自定义 CSS】代码，该样式将优先生效，并覆盖通过自定义模板配置的样式设置。

示例：若您在自定义样式中设置按钮颜色为红色，但在 CSS 代码中添加了 .bundle-product-title { color: blue; }，按钮将显示为蓝色。

多个匹配活动的展示方式

当某商品同时匹配多个「使用相同模板」的组合活动时（比如：这些组合商品在活动页的【样式设置】中均设定跟随高级设置，或皆不跟随高级设置且选用了相同模板），将套用【自定义样式】>【多个组合】中的展示配置。

示例：某一商品匹配到 A 与 B 两个组合商品活动

组合商品	选用样式	是否套用【多个组合】展示
A	A 与 B 皆选择【跟随高级设置】	是
B
A	A 与 B 皆选择【在商品模块下方，采用全宽】	是
B
A	A 选择【跟随高级设置】，且【自定义样式】中选择了【加购按钮下：整合展示】模板	否。两个组合商品活动将根据各自的设置，在同一商品页面以不同样式展示。
B	B 选择【在商品模块下方，采用全宽】

组合商品的展示位置

当组合活动启用了【跟随高级设置】，那么组合商品的展示位置由【高级设置】中的【展示设置】所选择的方式决定：

• 若选择【自动嵌入组件】，则位置将依据【自定义样式】中所选的模板进行展示。
• 若选择【手动添加组合组件至主题】，则位置将根据主题编辑器中设置的布局进行展示。

配置自定义样式设置

在了解样式设置的应用逻辑之后，您可以开始为符合条件的组合活动自定义模板。

1. 打开【组合销售】应用，进入【组合商品】标签页。找到【自定义样式】区块并点击【立即设置】。
2. 自定义组合商品的模板：
   
   要为单组合商品设置模板，请在【单个组合】区块中调整以下设置。您可以在【单个组合】面板中预览更改效果。
   

   备注：若您在【高级设置】中选择了【手动添加组合组件至主题】，组合的位置将根据主题编辑器中定义的组件样式展示，不受【自定义样式】区块中的模板设置影响。

• • • 模板：可选择以下模板：
      • 加购按钮下：整合展示
      • 加购按钮下：分开展示
      • 商品模块下：全宽展示
    • 标题电脑端字号：设置组合标题在桌面端的字体大小。
    • 标题移动端字号：设置组合标题在移动端的字体大小。
    • 标题颜色：自定义标题颜色。若要匹配商店主题，请勾选【跟随主题的颜色】。
    • 标题字重：可勾选【字体加粗】使标题加粗。

若某商品匹配多个组合活动，您可以在【多个组合】区块进一步配置其展示方式，并在【多个组合】面板中预览更改。

• • • 模板：选择组合的展示方式：
      • Tab 模式：组合将以标签形式展示，用户可切换查看。选择该模式后可进一步设置：
        • Tab 标题：为每组组合命名标签标题。
        • Tab 标题电脑端字号：设置标签标题在桌面端的字体大小。
        • Tab 标题移动端字号：设置标签标题在移动端的字体大小。
        • Tab 标题颜色：自定义标签颜色。若要匹配商店主题，请勾选【跟随主题的颜色】。
        • Tab 标题字重：可勾选【字体加粗】使标签标题加粗。
      • 平铺模式：组合将以平铺布局展示。

3. 在【组合商品】区块中配置组合商品相关设置：

• • 商品图片比例：设置商品图片比例。
  • 图片展示规则：可选择【适应】或【填充】。
  • 颜色：自定义【商品标题】、【售价】、【优惠金额或比例】的颜色。若希望颜色匹配商店主题，请勾选【跟随主题的颜色】。
  • 选中商品：自定义可凸显所选商品的高亮颜色。

4. 在【购买按钮】区块配置购买按钮的样式：

• • 按钮文字电脑端字号：设置购买按钮文字在桌面端的字体大小。
  • 按钮文字移动端字号：设置购买按钮文字在移动端的字体大小。
  • 按钮颜色：自定义【按钮背景】和【按钮文字】的颜色。若要匹配商店主题，请勾选【跟随主题的颜色】。
  • 按钮圆角：调整购买按钮的圆角样式。若要跟随主题设计，勾选【跟随主题的圆角设置】。

5. 如果您具备编码背景并熟悉 CSS，可使用【自定义 CSS】区块进一步自定义组合商品样式。
   

   备注： 若部署了自定义 CSS 代码，该样式将优先生效，并覆盖通过【自定义样式】设置的任何冲突项。 预览处不会展示 CSS 的配置效果。请保存设置后至前台店舖查看效果。

6. 切换【桌面端】和【移动端】模式以预览效果。确认无误后，点击【更新】保存并应用你的设置。