动态结帐按钮元素

关于动态结账按钮

此 动态结帐按钮 可作为“添加到购物车”按钮的替代方案，使顾客能够跳过购物车步骤并直接购买。

当动态结账按钮放置在 产品模块， 它用 仅限该模块中选择的产品和变体 开始结账。

实际上，这意味着：

• 顾客只能购买该产品的其中一个指定型号。
• 点击按钮后，系统根本不会使用购物车。
• 之前添加到购物车中的任何商品都将被完全忽略，并从结账流程中移除。
• 客户将直接跳转到 Shopify 结账页面，页面中仅显示当前产品模块中选定的产品变体。

例如，如果顾客已将产品 A 添加到购物车，然后访问另一个产品并点击动态结算按钮，则结算页面中只会显示当前产品模块中显示的产品，产品 A 将不会包含在内。

动态结账按钮主要有两种类型

品牌按钮

当您的商店启用 Shopify 支持的第三方快捷结账方式时，会出现品牌按钮。这些按钮会显示提供商的官方徽标，方便顾客识别并使用他们喜欢的服务完成结账。

支持的提供商包括：

• 亚马逊支付
• 苹果支付 (Apple Pay)
• Google Pay
• 贝宝
• 店铺付款
• Venmo

如果你看到 店铺付款, 苹果支付 (Apple Pay)或者在您的实时页面上出现类似的品牌按钮，那就是动态结账按钮，它会自动向客户显示可用的加速结账方式。

欲了解更多信息，您可以查看此 Shopify 文章.

无品牌按钮 

无品牌按钮显示文本 “现在购买” 当未启用任何支付网关时。一旦客户点击，他们将跳过购物车，直接进入 Shopify Checkout。

无品牌按钮的显示可能会因多种因素而有所不同，例如：

• Shopify 后台中的付款设置
• 客户的设备和浏览器
• 客户之前的付款历史记录

向您的页面添加动态结帐按钮元素

要将动态结帐按钮添加到您的页面，请按照以下步骤操作：

第四步：去吧 GemPages 仪表板 > 前往 并选择您想要处理的页面以进入编辑器。

第三步： 从左侧边栏输入 动态结帐 然后将元素拖放到 产品模块，将其放置在您喜欢的位置。

第三步： 点击元素即可打开其设置。在这里，您可以根据自己的喜好进行自定义 个人设置 以及 先进的 标签。

配置设置选项卡

此 个人设置 选项卡为您提供了一系列选项来配置和自定义动态结帐按钮的行为和外观。

产品来源

由于此元素嵌套在产品模块内，产品源将自动与模块同步。

但是，如果您更喜欢其他产品，请单击当前产品以在产品元素中进行管理。

尺寸

在下面 尺寸 部分，调整按钮的宽度、高度和填充：

• 宽度： 从下拉选项中选择，包括适合内容（自动）、完整（100%）、小（100像素）、中（116像素）和大（132像素）。您也可以在框中输入所需的精确百分比。
• 起升高度： 自定义高度，或从可用选项中选择：适合内容（自动）、小（28px）、中（36px）和大（44px）。
• 填充： 单击“+ 添加...”框以打开填充的设置面板。 

背景

GemPages 允许您通过选择颜色或使用图像来设置按钮的背景：

• 颜色： 打开设置面板，选择按钮的首选颜色。您可以使用纯色背景或渐变色背景。

• 图片： 上传新图片或从媒体库中选择。接下来，在设置面板中根据您的喜好修改图片。

形状

为了改善按钮的外观，您可以添加形状、调整角半径，并在 形状 部分：

• 边界： 选择边框的颜色、粗细和边框描边（线、虚线或点）

• 角： 调整边框的角半径
  • 值越高 = 角越圆
  • 0 值 = 尖锐、方形的角
  • 您可以链接或取消链接角以将相同的半径应用于所有边或单独设置每个角。

举个例子，我们将角半径设置为 100，以创建药丸形状的按钮外观。

• 阴影：通过应用阴影为按钮添加深度，这使得按钮脱颖而出并确保更具动态的外观。

文本

在下面 文本 部分，您可以按照自己的方式自定义按钮文本。点击 显示更多 查看所有文本设置。

影响

在这里，为您的按钮添加悬停效果。自定义访客将鼠标悬停在按钮上时按钮的外观。

对齐

如果按钮的宽度低于 100%，您可以更改按钮对齐方式：左对齐、居中对齐或右对齐。

配置高级选项卡

如需更多高级定制，请导航至 先进的 选项卡并按照 本文.

您还可以在以下网址找到更多有用的提示和视频教程 GemPages 学院.

关于动态结账按钮的常见问题

1. “添加到购物车（跳转到结账页面）”和“动态结账按钮”有什么区别？

两个按钮 跳过购物车的方式有很多种.

• 加入购物车 → 跳转至结算页面 仍然使用购物车。只是在视觉上跳过了购物车页面，因此所有已在购物车中的商品都会包含在结算单中。
• 动态结帐按钮 完全跳过购物车。它只将当前产品模块中显示的产品直接发送到结算页面，忽略购物车中的所有其他商品。

计费示例：

买家已添加 产品A 加入购物车。
然后他们去了 产品B 然后点击行动号召按钮进入结账页面。

• 如果页面使用 加入购物车 → 结算, 产品A和产品B 将显示在结账页面上。
• 如果页面使用 动态结帐按钮, 仅限产品 B 将在结账时显示。 产品 A 被跳过，不包含在内。

2. 品牌动态结账按钮和非品牌动态结账按钮有什么区别？

• 品牌按钮 当您的 Shopify 商店启用了相应的支付网关（Shop Pay、Apple Pay、PayPal 等）时，显示官方支付徽标。
• 无品牌纽扣 显示文本 “现在购买” 当没有加速付款方式可用时。

3. 我应该把动态结账按钮放在布局中的什么位置？

此 动态结帐按钮 必须嵌套在 产品模块 为了使其正常运行，如果您的页面上还没有产品元素，请先添加一个，然后将按钮拖放到其中。

4. 我可以自定义动态结账按钮的样式和大小吗？

是的。 您可以调整 宽度、高度、内边距、背景颜色、圆角半径和阴影 在“设置”选项卡下。要添加悬停动画或高级效果，请打开 高级选项卡 更多详细的自定义选项。

5. 为什么显示的是“购买付款”按钮而不是“添加到购物车”按钮？

当 动态结帐按钮 已激活。然后，Shopify 会自动显示品牌化的加速结账页面（例如）。 店铺付款 or 苹果支付 (Apple Pay)) 代替标准的“添加到购物车”按钮。

要仅显示“添加到购物车”选项，请禁用 店铺付款 下 Shopify 设置 › 付款 › 加速结账 或者从 GemPages 布局中移除动态结账按钮元素。