自定义每个组件元素的外观

组件样式部分会将商品页面组件拆分为单独的元素，让你分别设置每个元素的样式。在组合编辑器中打开该部分，你会看到一组折叠面板，每个元素对应一个面板，可用于控制颜色、字体、边框、间距、徽章等。

组件样式部分的使用方式

打开组合的样式标签页，然后找到组件样式。点击面板标题即可显示该元素的控件。将鼠标悬停在标题上时，预览中的对应元素会高亮显示。只有当组合中提供相应功能时，部分面板才会出现。

大多数面板都包含相同的基本控件：颜色选择器、字号和字体样式选择器。用于设置方框样式的面板，例如优惠卡片或徽章，还会提供背景颜色、边框颜色、边框宽度和圆角设置。你的更改会与组合的其他设置一起保存。

逐个了解各个面板

页眉

用于控制组件页眉的文字颜色、字号和字体样式。在样式标签页上方输入页眉文字后，会显示页眉对齐方式选项，包括左对齐、居中、居中穿线或右对齐。当对齐方式设置为居中穿线时，此面板中会额外显示穿线颜色和粗细控件。

优惠卡片

这是每个优惠（数量层级）周围的方框。由于涵盖三种视觉状态，因此它是最大的面板：

• 未选中优惠：用于默认状态的背景颜色、边框颜色和边框宽度。
• 优惠悬停：顾客将鼠标悬停在卡片上时应用的相同三个控件。
• 已选优惠：用于当前所选优惠的相同三个控件。

此面板还可设置卡片的通用属性：圆角半径、卡片之间的间距、水平和垂直内边距，以及用于显示或隐藏单选按钮的 Radio 选项。动画背景效果需通过 Style 标签页上方的 Decoration 开关单独设置，可选效果包括 Blobs、Rings、Hearts、Starburst、Percent、Stars、Clock 和 Money，并且仅显示在已选优惠上。优惠卡片的颜色也会控制单选按钮的外观。

优惠标题和优惠副标题

两个独立面板分别用于设置优惠标题行和副标题行的颜色、字号和字体样式。

折扣标签

用于设置折扣标签的文字颜色、背景颜色、字号和字体样式。请注意，这些设置也会影响赠品附加徽章。

优惠图片

用于设置优惠图片的尺寸、圆角半径、边框颜色、边框宽度和 Shadow（None、Small、Medium 或 Large）。还可设置图片的显示方式：

• Original：保留图片的原始宽高比。
• Square：将图片裁剪为正方形。
• Square (top)：将图片裁剪为正方形，并保留图片顶部区域。
• Square (fit)：将完整图片放入正方形区域，不进行裁剪。

数量徽章

用于设置显示在优惠图片上的小型数量数字。你可以设置其文字颜色、背景颜色、圆角半径、字号、字体样式和 Position（Top right、Top left、Bottom right 或 Bottom left）。启用“Show quantity badge”后，该数字会显示在优惠图片上。

变体标签

用于设置变体选项标题（例如 Size 或 Color）及其行号的颜色、字号和字体样式。

下拉菜单

对于变体下拉菜单，请使用单独的 Dropdown 面板调整文字、背景、边框、圆角和内边距。

优惠徽章

徽章是显示在优惠上的醒目标注，例如“Most popular”。除了常规的文字颜色、背景颜色、字号和字体样式外，此面板还提供 Badge shape 选择器，其中包含多种预设形状：

• Default、Folded、Pill
• Arrow Right、Arrow Left
• Square
• Banner、Banner Rounded
• Corner Ribbon、Side Ribbon、Side Ribbon Alt、Side Ribbon Rounded

价格

Price 面板包含三种文字样式，每种样式都可以单独设置颜色、字号和字体样式：

• Main price：当前销售价格。
• Compare price：带删除线的“原价”。
• Per item text：每件商品的价格文字。

Bundle

产品组合还提供一个 Bundle 面板，用于设置产品标题文字、组合商品之间的边框以及产品之间的加号。

权益

用于设置权益项目列表。你可以在此设置统一的字号和字体样式，并分别设置 Text color 和 Icon color，让图标和文字使用不同颜色。

赠品和追加销售

用于设置免费赠品区块的两种状态，每种状态都可以设置背景颜色、标题颜色、字号和字体样式：

• Selected offer gift：已选优惠中的赠品区块。
• Not selected offer gift：其他优惠中的赠品区块。

第三组设置 Gift image，用于控制赠品图片的宽度和圆角半径。

赠品和混搭弹窗图片

打开 Style > Modal style > Gift modal，找到 Image fit。你也可以在赠品或混搭选择器旁边点击 Customize modal style 进入这些设置。选择 Original 可保留整张图片的比例，选择 Square 可使用统一的缩略图尺寸。此设置会同时应用于此折扣中的赠品选择弹窗和组合池弹窗，主组件中的图片则使用单独的 Offer image 设置。

页脚

用于设置组件页脚文字的颜色、字号和字体样式。

容器和最大宽度

Container 面板通过 Max width 设置控制组件的整体宽度：

• Shopify default (44rem)：在可用空间内将组件宽度限制为 44rem。
• Full width (100%)：让组件延伸至容器宽度。
• Custom：显示 Width 字段，你可以在其中输入像素值。

此面板还包含用于低库存提示文字的 Alert color。

在此使用 Margin top 和 Margin bottom 调整此折扣组件周围的空间，然后再添加自定义 CSS。

Full width 会填满组件的父容器，但无法扩大主题中较窄的产品信息栏。

编辑提示

• 编辑时请查看实时预览。将鼠标悬停在面板标题上会高亮对应元素，因此你可以在修改数值前确认正在编辑正确的部分。
• 统一设置优惠卡片的三种状态（未选中、悬停、已选中），让已选中状态与其他状态形成清晰对比。
• 如果面板未提供你需要的样式设置，可以使用此部分底部的 Custom CSS 面板添加 CSS，以覆盖组件样式。