选择组件布局和背景装饰
本指南介绍组合组件的三项外观设置:整体布局、容器最大宽度,以及可选的已选优惠背景装饰。打开 Style 标签页即可设置布局、宽度和装饰。
设置组件布局
布局用于控制优惠卡片(即数量档位)在组件中的排列方式。
- 打开要编辑的组合。
- 打开 Style 标签页。
- 在 Widget layout 下选择以下选项:
- Stacked - 优惠卡片上下排列。这是默认布局。
- Grid - 优惠卡片并排排列。
使用实时预览检查哪种排列方式最适合你的产品页面。
此设置用于排列优惠卡片。若要排列产品组合优惠中的产品,请使用该优惠单独的 bundle layout 设置。
选择容器最大宽度
最大宽度决定整个组件容器在产品页面上可以扩展到多宽。此设置位于 Container 部分的 Style 标签页中。
- 在 Style 标签页中,打开 Container 部分。
- 使用 Max width 下拉菜单选择以下选项之一:
- Shopify default (44rem) - 在可用空间内将组件宽度限制为 44rem。
- 全宽(100%) - 小组件会填充其所在列中的可用空间。这是新建组合时的默认设置。
- 自定义 - 设置您自己的值。
- 如果选择自定义,则会显示宽度字段。请输入以像素(px)为单位的值。
全宽会填充父容器中的可用空间,但不会扩大主题的商品信息列。如需调整小组件上下方的间距,请在同一个容器面板中使用上边距和下边距。如果周围的主题布局限制了宽度,请参阅小组件宽度和对齐。
添加背景装饰
装饰会为优惠卡片添加动态背景效果。装饰仅在选中的优惠上播放,因此会突出显示客户选择的优惠档位。
- 在样式标签页中,打开装饰开关。该选项默认关闭,关闭后会移除装饰。
- 从显示的样式中选择一种:
- 斑点
- 圆环
- 爱心
- 星爆
- 百分比
- 星星
- 时钟
- 金钱
选择器中的每个选项都有自己的图标,方便您区分不同样式。这些图标是简单的字形,并不代表效果的精确呈现,因此请查看实时预览,了解动画的实际外观,并确认它在您为选中优惠设置的背景色上显示清晰。
提示:让赠品区块透明
如果您的组合提供免费赠品,并且您启用了装饰,赠品区块可能会覆盖在效果上方,将其遮挡。此时,Bundlex 会在装饰样式下方显示建议:使赠品区块透明。
点击该建议中的应用,即可将选中赠品的背景色设为透明,让装饰效果从其背后显示出来。您也可以在赠品和追加销售部分中手动降低选中优惠赠品背景色的不透明度。
仅当装饰处于启用状态、组合中至少包含一个赠品,并且选中赠品的背景色仍完全不透明(尚未设置透明度)时,才会显示此建议。
这篇文章对您有帮助吗?
您的反馈有助于我们改进文档。