Skip to main content
⚠️ 重要提示 下方的主题代码片段适用于两个版本的 Upcart 购物车模块——它会让 Shopify 在页面上渲染加速结账（accelerated-checkout）按钮，无论模块版本如何，这都是 Upcart 所需要的。 下方的 .additional-checkout-buttons 选择器是 Shopify 自身用于加速结账容器的类名，并非 Upcart 模块的类名，因此在任一购物车版本上都相同。

​
概述

有时快捷结账按钮在 Upcart 中无法点击或不显示。这是一个常见问题，原因在于 Shopify 控制着快捷支付按钮在主题中的渲染方式。 本指南解释了出现此问题的原因以及修复方法。

​
新模块的必要设置

⚠️ 重要： 这些步骤适用于 Upcart 中的新版 Express Payments 模块，而非旧版。 要让快捷结账按钮在 Upcart 中正常工作，你必须在 Shopify 主题中添加一小段代码。没有这段代码，Shopify 将无法在购物车抽屉内正确加载支付按钮。在进行这些更改之前，请确认相关支付方式（例如 Shop Pay、PayPal、Apple Pay、Google Pay）已在 Shopify 后台账户设置中启用。如果未启用这些支付方式，按钮将不可见。此外，请确保代码片段直接放置在主题文件中 <body> 开始标签的下方（例如 <body class="...">）。如果放置位置不正确，例如放在 </body> 结束标签之后，快捷结账按钮可能无法正常工作。

​
如何修复

  1. 前往你的 Shopify 后台。
  2. 导航到 Online Store > Themes > Edit Code。
  3. 打开 layout/theme.liquid，找到 <body> 所在行，并在其正下方新起一行添加以下代码片段。它必须放在这里——而不是 cart-drawer.liquid 或其他位置——因为按钮必须存在于购物车可能打开的每个页面上。
  1. 保存更改并刷新你的店面。
  2. 重新打开购物车抽屉，验证快捷结账按钮（例如 Shop Pay、PayPal、Apple Pay 或 Google Pay）现在能否显示并可点击。
完整的设置说明请参阅 Express Payments 模块指南。

​
为什么会发生这种情况

快捷支付按钮完全由 Shopify 管理，而非 Upcart。这意味着：
  • Upcart 不会渲染自己的按钮。它会将页面上 Shopify 的加速结账按钮克隆到购物车抽屉中，这就是为什么这些按钮必须首先存在于页面上——而上方的主题代码片段正是为此提供保障。
  • Apple Pay 只会在已设置 Apple Pay 的 Apple 设备上显示。
  • Upcart 无法控制显示哪些快捷按钮，因为其内容和功能均由 Shopify 处理。
🎨 注意：
Upcart 中的按钮充当视觉容器，而 Shopify 控制其显示和行为。Upcart 无法修改它们的外观或功能。

​
常见问题及修复方法

​
1. 按钮未在页面上渲染

这是最常见的原因。Upcart 从页面上克隆 Shopify 的按钮，因此如果页面没有渲染它们，就没有可克隆的内容，购物车会显示一片空白。 解决方法：
  • 按照上方如何修复中的说明，在 layout/theme.liquid 中 <body> 行的正下方添加主题代码片段。
不要为了”避免冲突”而移除主题自身的快捷按钮。 Upcart 依赖它们的存在。从主题中移除它们，或在主题设置中关闭它们，会移除 Upcart 克隆的来源——这会让问题变得更糟，而不是更好。

​
3. CSS 阻止了按钮显示

一些主题默认使用 CSS 隐藏快捷按钮。例如：
解决方法：
  • 检查你主题的 CSS。
  • 请你的主题开发者确保没有 CSS 规则在 Upcart 抽屉中隐藏或禁用这些按钮。

​
4. 旧版设置产生干扰

如果你使用过旧版本的 Express Payments 模块，已保存的设置可能会与新设置冲突。 解决方法：
  • 打开旧版 Express Payments 模块（如果仍然可见）。
  • 取消勾选所有先前的选项并保存。
  • 使用新模块再次测试。

​
仍然有问题？

​
在 Upcart 中禁用 Shadow DOM

在某些情况下，快捷支付按钮可能因为 Upcart 启用了 Shadow DOM 而无法加载或更新。 什么是 Shadow DOM？
Shadow DOM 将 Upcart 与商店的其他代码隔离，以提高稳定性。但在极少数情况下，这种隔离会阻止 Shopify 的快捷按钮正确更新。 如何禁用 Shadow DOM：
  1. 前往 Upcart > Cart Editor > Settings > Cart settings，然后展开 Advanced Settings。
  2. 取消勾选 Render Cart in Shadow DOM。
  3. 保存并再次测试。
⚠️ 重要：
关闭 Shadow DOM 后请务必测试你的购物车，因为这可能会影响其他应用或主题元素与 Upcart 的交互方式。 💡 注意： 禁用 Shadow DOM 可能会解决此问题，但可能会引入与主题的 CSS 冲突。有关完整的利弊权衡，请参阅 Shadow DOM 设置文档。

​
需要更多帮助？

如果完成这些步骤后问题仍然存在：
  • 联系你的主题开发者，帮助移除产生冲突的代码或设置。
  • 你也可以联系 Shopify 专家获取高级主题编辑或集成方面的协助。

​
参考资料

  • Shopify 帮助 – 加速结账（Accelerated Checkouts）
  • Shopify 开发者文档 – 快捷支付按钮（Express Payment Buttons）