> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Upcart 中快捷支付按钮无法点击
> 本文介绍当 Shopify 快捷结账按钮在 Upcart 中无法正常工作时如何进行故障排查
⚠️ **重要提示**
下方的主题代码片段适用于两个版本的 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 后台账户设置中启用。如果未启用这些支付方式，按钮将不可见。此外，请确保代码片段直接放置在主题文件中 `` 开始标签的下方（例如 ``）。如果放置位置不正确，例如放在 `` 结束标签之后，快捷结账按钮可能无法正常工作。
***
## 如何修复
1. 前往你的 **Shopify 后台**。
2. 导航到 **Online Store > Themes > Edit Code**。
3. 打开 **layout/theme.liquid**，找到 `` 所在行，并在其正下方新起一行添加以下代码片段。它必须放在这里——而不是 `cart-drawer.liquid` 或其他位置——因为按钮必须存在于购物车可能打开的每个页面上。
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{% if additional_checkout_buttons %} {{ content_for_additional_checkout_buttons }}
{% endif %}
```
1. 保存更改并刷新你的店面。
2. 重新打开购物车抽屉，验证快捷结账按钮（例如 Shop Pay、PayPal、Apple Pay 或 Google Pay）现在能否显示并可点击。
完整的设置说明请参阅 [**Express Payments 模块**](/zh/upcart/express_payments_module)**指南**。
***
## 为什么会发生这种情况
快捷支付按钮完全由 **Shopify** 管理，而非 Upcart。这意味着：
* Upcart 不会渲染自己的按钮。它会将页面上 **Shopify 的**加速结账按钮**克隆**到购物车抽屉中，这就是为什么这些按钮必须首先存在于页面上——而上方的主题代码片段正是为此提供保障。
* **Apple Pay** 只会在已设置 Apple Pay 的 Apple 设备上显示。
* Upcart 无法控制显示哪些快捷按钮，因为其内容和功能均由 Shopify 处理。
🎨 **注意：**\
Upcart 中的按钮充当视觉容器，而 Shopify 控制其显示和行为。Upcart 无法修改它们的外观或功能。
***
## 常见问题及修复方法
## 1. 按钮未在页面上渲染
这是最常见的原因。Upcart 从页面上克隆 Shopify 的按钮，因此如果页面没有渲染它们，就没有可克隆的内容，购物车会显示一片空白。
**解决方法：**
* 按照上方**如何修复**中的说明，在 `layout/theme.liquid` 中 `` 行的正下方添加主题代码片段。
**不要为了"避免冲突"而移除主题自身的快捷按钮。** Upcart 依赖它们的存在。从主题中移除它们，或在主题设置中关闭它们，会移除 Upcart 克隆的来源——这会让问题变得更糟，而不是更好。
***
## 3. CSS 阻止了按钮显示
一些主题默认使用 CSS 隐藏快捷按钮。例如：
```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.additional-checkout-buttons { display: none !important; }
```
**解决方法：**
* 检查你主题的 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 设置](/zh/upcart/render_cart_in_shadow_dom_setting)文档。
***
## 需要更多帮助？
如果完成这些步骤后问题仍然存在：
* 联系你的**主题开发者**，帮助移除产生冲突的代码或设置。
* 你也可以联系 [**Shopify 专家**](https://www.shopify.com/partners/directory)获取高级主题编辑或集成方面的协助。
***
## 参考资料
* Shopify 帮助 – 加速结账（Accelerated Checkouts）
* Shopify 开发者文档 – 快捷支付按钮（Express Payment Buttons）