> ## 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.

# Express-Payment-Schaltflächen in Upcart nicht anklickbar

> Dieser Artikel erklärt, wie du die Express-Checkout-Schaltflächen von Shopify behebst, wenn sie in Upcart nicht funktionieren

⚠️ **Wichtiger Hinweis**

Das folgende Theme-Snippet gilt für beide Versionen der Upcart-Warenkorbmodule — es sorgt dafür, dass Shopify die Schaltflächen für den beschleunigten Checkout auf der Seite rendert, was Upcart unabhängig von der Modulversion benötigt.

Der Selektor `.additional-checkout-buttons` unten ist Shopifys eigene Klasse für den Container des beschleunigten Checkouts und keine Upcart-Modulklasse, daher ist er in beiden Warenkorbversionen identisch.

<div id="overview">
  ## Übersicht
</div>

Manchmal sind Express-Checkout-Schaltflächen nicht anklickbar oder erscheinen nicht in Upcart. Dies ist ein häufiges Problem, das dadurch verursacht wird, wie **Shopify das Rendern von Express-Payment-Schaltflächen** in Themes steuert.

Diese Anleitung erklärt, warum das passiert und was du tun kannst, um es zu beheben.

***

<div id="required-setup-for-the-new-module">
  ## Erforderliche Einrichtung für das neue Modul
</div>

⚠️ **Wichtig:** Diese Schritte gelten für das **neue Express-Payments-Modul** in Upcart, nicht für die Legacy-Version.

Damit Express-Checkout-Schaltflächen in Upcart korrekt funktionieren, musst du ein kleines Code-Snippet zu deinem Shopify-Theme hinzufügen. Ohne dieses Snippet lädt Shopify die Zahlungsschaltflächen im Cart Drawer nicht richtig. Bevor du diese Änderungen vornimmst, überprüfe, ob die relevanten Zahlungsmethoden (z. B. Shop Pay, PayPal, Apple Pay, Google Pay) in den Kontoeinstellungen deines Shopify-Adminbereichs aktiviert sind. Ohne die Aktivierung dieser Methoden sind die Schaltflächen nicht sichtbar. Stelle außerdem sicher, dass das Snippet direkt unter dem öffnenden `<body>`-Tag in deiner Theme-Datei platziert wird (z. B. `<body class="...">`). Bei falscher Platzierung, etwa nach dem schließenden `</body>`-Tag, funktionieren die Express-Checkout-Schaltflächen möglicherweise nicht richtig.

***

<div id="how-to-fix">
  ## So behebst du das Problem
</div>

1. Gehe zu deinem **Shopify-Adminbereich**.
2. Navigiere zu **Onlineshop > Themes > Code bearbeiten**.
3. Öffne **layout/theme.liquid**, suche die Zeile mit `<body>` und füge das folgende Snippet in einer neuen Zeile direkt darunter ein. Es muss dorthin — nicht in `cart-drawer.liquid` oder anderswo —, weil die Schaltflächen auf jeder Seite vorhanden sein müssen, auf der sich der Warenkorb öffnen kann.

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
{% if additional_checkout_buttons %} <div style="display: none !important">     {{ content_for_additional_checkout_buttons }} </div> {% endif %}
```

1. Speichere deine Änderungen und aktualisiere dein Storefront.
2. Öffne den Cart Drawer erneut, um zu überprüfen, ob die Express-Checkout-Schaltflächen (wie Shop Pay, PayPal, Apple Pay oder Google Pay) jetzt erscheinen und anklickbar sind.

Vollständige Einrichtungsanweisungen findest du im [**Leitfaden zum Express-Payments-Modul**](/de/upcart/express_payments_module).

***

<div id="why-this-happens">
  ## Warum das passiert
</div>

Express-Payment-Schaltflächen werden vollständig von **Shopify** verwaltet, nicht von Upcart. Das bedeutet:

* Upcart rendert keine eigenen Schaltflächen. Es **klont die Schaltflächen von Shopify** für den beschleunigten Checkout von der Seite in den Cart Drawer, weshalb sie überhaupt erst auf der Seite vorhanden sein müssen — genau das garantiert das obige Theme-Snippet.
* **Apple Pay** wird nur auf Apple-Geräten angezeigt, auf denen Apple Pay eingerichtet ist.
* Upcart steuert nicht, welche Express-Schaltflächen erscheinen, da Inhalt und Funktionalität von Shopify verwaltet werden.

🎨 **Hinweis:**\
Die Schaltflächen in Upcart fungieren als visuelle Container, während Shopify ihre Anzeige und ihr Verhalten steuert. Upcart kann ihr Aussehen oder ihre Funktion nicht verändern.

***

<div id="common-problems-and-fixes">
  ## Häufige Probleme und Lösungen
</div>

<div id="1-the-buttons-arent-rendered-on-the-page">
  ## 1. Die Schaltflächen werden nicht auf der Seite gerendert
</div>

Dies ist die häufigste Ursache. Upcart klont die Schaltflächen von Shopify aus der Seite. Wenn die Seite sie nicht rendert, gibt es nichts zu klonen und der Warenkorb zeigt einen leeren Bereich an.

**Was du tun kannst:**

* Füge das Theme-Snippet aus dem Abschnitt **So behebst du das Problem** oben direkt unter der `<body>`-Zeile in `layout/theme.liquid` hinzu.

<Warning>
  **Entferne nicht die Express-Schaltflächen deines Themes, um „einen Konflikt zu vermeiden“.** Upcart ist darauf angewiesen, dass sie vorhanden sind. Sie aus dem Theme zu entfernen oder in den Theme-Einstellungen auszuschalten, entfernt die Quelle, aus der Upcart klont — was dieses Problem verschlimmert statt verbessert.
</Warning>

***

<div id="3-css-is-blocking-the-buttons">
  ## 3. CSS blockiert die Schaltflächen
</div>

Einige Themes blenden Express-Schaltflächen standardmäßig per CSS aus. Zum Beispiel:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
.additional-checkout-buttons {   display: none !important; }
```

**Was du tun kannst:**

* Überprüfe das CSS deines Themes.
* Bitte deinen Theme-Entwickler sicherzustellen, dass keine CSS-Regeln die Schaltflächen im Upcart Drawer ausblenden oder deaktivieren.

***

<div id="4-legacy-settings-are-interfering">
  ## 4. Legacy-Einstellungen stören
</div>

Wenn du die ältere Version des Express-Payments-Moduls verwendet hast, können gespeicherte Einstellungen mit der neuen Einrichtung in Konflikt geraten.

**Was du tun kannst:**

* Öffne das alte Express-Payments-Modul (falls noch sichtbar).
* Deaktiviere alle früheren Optionen und speichere.
* Teste erneut mit dem neuen Modul.

***

<div id="still-having-issues">
  ## Immer noch Probleme?
</div>

<div id="disable-shadow-dom-in-upcart">
  ## Shadow DOM in Upcart deaktivieren
</div>

In manchen Fällen werden Express-Payment-Schaltflächen nicht geladen oder aktualisiert, weil **Shadow DOM** in Upcart aktiviert ist.

**Was ist Shadow DOM?**\
Shadow DOM isoliert Upcart vom restlichen Code deines Shops, um die Stabilität zu verbessern. In seltenen Fällen kann diese Trennung jedoch verhindern, dass sich die Express-Schaltflächen von Shopify korrekt aktualisieren.

**So deaktivierst du Shadow DOM:**

1. Gehe zu **Upcart > Cart Editor > Settings > Cart settings** und erweitere dann **Advanced Settings**.
2. Deaktiviere **Render Cart in Shadow DOM**.
3. Speichere und teste erneut.

⚠️ **Wichtig:**\
Teste deinen Warenkorb immer, nachdem du Shadow DOM ausgeschaltet hast, da dies beeinflussen kann, wie andere Apps oder Theme-Elemente mit Upcart interagieren.

💡 **Hinweis:** Das Deaktivieren von Shadow DOM kann dieses Problem beheben, aber CSS-Konflikte mit deinem Theme verursachen. Den vollständigen Kompromiss findest du im Dokument [Shadow-DOM-Einstellung](/de/upcart/render_cart_in_shadow_dom_setting).

***

<div id="need-more-help">
  ## Brauchst du weitere Hilfe?
</div>

Wenn das Problem nach Abschluss dieser Schritte weiterhin besteht:

* Kontaktiere deinen **Theme-Entwickler**, um Code oder Einstellungen zu entfernen, die Konflikte verursachen.
* Du kannst dich auch an einen [**Shopify-Experten**](https://www.shopify.com/partners/directory) wenden, um Hilfe bei fortgeschrittenen Theme-Änderungen oder Integrationen zu erhalten.

***

<div id="references">
  ## Referenzen
</div>

* Shopify-Hilfe – Beschleunigte Checkouts
* Shopify-Entwicklerdokumentation – Express-Payment-Schaltflächen
