Skip to main content
⚠️ 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.

​
Übersicht

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.

​
Erforderliche Einrichtung für das neue Modul

⚠️ 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.

​
So behebst du das Problem

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

​
Warum das passiert

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.

​
Häufige Probleme und Lösungen

​
1. Die Schaltflächen werden nicht auf der Seite gerendert

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

​
3. CSS blockiert die Schaltflächen

Einige Themes blenden Express-Schaltflächen standardmäßig per CSS aus. Zum Beispiel:
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.

​
4. Legacy-Einstellungen stören

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.

​
Immer noch Probleme?

​
Shadow DOM in Upcart deaktivieren

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.

​
Brauchst du weitere Hilfe?

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 wenden, um Hilfe bei fortgeschrittenen Theme-Änderungen oder Integrationen zu erhalten.

​
Referenzen

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