如何添加悬浮加购按钮

悬浮加购条会在顾客浏览商品页面时，让优惠始终触手可及。按钮可以滚动回优惠区域，也可以直接将所选优惠加入购物车。你可以设置在顾客滚动到小组件之外后显示，或从页面加载时就显示。

启用悬浮加购按钮

悬浮加购条需在组合编辑器中针对每个组合单独配置。

1. 打开要编辑的组合。
2. 打开附加项标签页，然后展开悬浮加购按钮。
3. 打开悬浮加购按钮标题旁的开关。

悬浮加购条会显示在此组合出现的商品页面上，因此请确保组合已发布，并将小组件设置为在正确的商品上显示。

选择按钮操作

按钮操作有两个选项：

• 滚动到优惠区域会将顾客带回小组件，以选择优惠。
• 将所选优惠加入购物车会显示所选优惠，并将其与所选商品、赠品和附加项一起加入购物车。

在添加到购物车模式下，悬浮加购条会跟随所选优惠、变体、数量、订阅和附加项的变化。总价与小组件页脚中的总价一致。你可以启用显示价格、显示原价、显示节省金额徽章和在按钮内显示价格。

如果顾客仍需选择变体或填写组合槽位，按钮会将其带到小组件以完成操作。如果尚未选择优惠，按钮会提示顾客选择选项。对于禁止直接添加的主题，按钮会改为滚动到小组件。仅包含可选附加项的折扣会使用滚动到优惠区域的操作，让顾客在小组件中完成选择。此按钮使用标准购物车流程，而不是立即购买。

选择按钮显示时机

在显示悬浮加购条下，选择小组件滚出视野后或始终显示，从页面加载时开始。两种设置都支持任一按钮操作。现有悬浮加购条会继续使用滚动后显示的行为，除非你进行更改。

选择始终显示后，添加到购物车模式会以预先选择的优惠开始，并跟随后续选择。如果你允许页面加载时不选择任何优惠，顾客必须先选择优惠，按钮才能将其加入购物车。

选择布局：浮动或固定

使用悬浮加购条布局选项，选择悬浮加购条在页面上的显示方式：

• 浮动，居中的卡片，与边缘保持小间距并向内缩进，同时保留圆角。
• 固定，固定在底部边缘的全宽悬浮加购条，从一侧延伸到另一侧。

两种布局对圆角的处理方式不同。切换到固定后，按钮的圆角半径会强制设为 0，以便贴合屏幕边缘。切换到浮动后，如果圆角半径为 0，则会恢复圆角。之后你可以在样式设置中进一步调整圆角半径，详见下文，但固定布局的设计是保持直角。

在桌面端和移动端显示

两个复选框用于控制悬浮加购条的显示位置：

• 在桌面端显示
• 在移动端显示

默认情况下两项均已启用。你可以关闭其中一项，例如仅在移动端显示悬浮加购条，因为原始的加入购物车按钮更可能在移动端滚出视野。

请使用最长的优惠标题和价格检查实际移动端页面。在窄屏上，为了确保操作区域清晰易读，按钮会简化部分原价、节省金额和按钮价格详情。不要期待小屏手机显示桌面端的所有详情。

设置标题和按钮文字

在滚动到优惠区域模式下，悬浮加购条包含两个文字字段：

• 标题，显示在按钮旁边的文字。它支持模板变量，因此你可以插入动态值，例如{{product_title}}（默认值）、{{saved_percentage}}或{{price_total}}。使用字段中的变量插入器添加变量。
• 按钮文字，显示在悬浮按钮上的标签。默认值为“选择组合”。

添加到购物车模式会显示所选优惠的标题，并使用其自身的加入购物车按钮文字字段。两种模式的按钮文字分别翻译，因此更改一种模式的文案不会覆盖另一种模式的文案。

在悬浮按钮文案下，你还可以更改免费赠品徽章、单个和多个附加项徽章，以及选择选项按钮的文字。请在多个附加项消息中保留{{count}}，这样才能显示实际数量。

添加嵌入式倒计时（可选）

你可以通过在悬浮按钮中显示倒计时复选框，在悬浮按钮内显示倒计时。

此选项要求在同一组合中启用倒计时。如果倒计时已关闭，该复选框会被禁用且无法选择。启用倒计时后，你就可以打开此选项。

嵌入式倒计时会复用倒计时设置中的简短标题，其样式则遵循悬浮按钮主题。

如果之后关闭倒计时，悬浮按钮中的倒计时也会自动关闭。

设置悬浮按钮样式

打开悬浮加购按钮样式组以调整外观。设置控件按以下折叠面板分组：

• 背景，悬浮栏的纯色或渐变背景。
• 容器，边框颜色、边框宽度、圆角半径、内边距和阴影。
• 标题，文字颜色、字号和字重。
• 价格，添加到购物车模式下的价格文字样式。
• 按钮，背景颜色、文字颜色、字号、字重、内边距和圆角半径。
• 商品图片，图片尺寸、圆角半径、边框宽度和边框颜色。
• 倒计时，背景颜色、文字颜色、字号、字重和内边距。仅在启用嵌入式倒计时时显示此组。

要快速获得协调一致的外观，请使用此部分顶部的预设颜色选择器。它还提供使悬浮 ATC 圆角与主小组件一致选项，可将按钮的圆角半径设置为与主组合小组件一致，让两者的视觉效果更加协调。

关于圆角半径的说明

请记住，固定布局会强制将圆角半径设为 0。如果你在容器样式中设置了圆角半径，但圆角看起来仍是直角，请检查布局是否设置为浮动。

保存并测试两种操作

保存后，打开已启用折扣的目标商品页面进行测试。在滚动模式下，滚过优惠区域，然后使用悬浮按钮返回。在添加到购物车模式下，选择优惠和变体，然后通过悬浮按钮添加。检查购物车和结账页面中的数量、变体和总价。在移动端重复测试，并测试不可用或未完成的选择：按钮应将顾客带回小组件以完成选择。

在我们的示例中，购买 2 件会添加两个象牙色小号包，享受 10% 折扣后商品小计为 $43.20。选择不可用的腮红色小号组合后，悬浮按钮操作会变为选择选项；改为可用的尺寸后，“加入购物车”会恢复显示。倒计时仅用于视觉提示，归零后不会停止折扣。有关到期行为，请参阅倒计时。