Skip to main content

​
Übersicht

Mit dieser Funktion kannst du die Express-Payment-Optionen von Shopify (wie Shop Pay, Apple Pay oder Google Pay) anzeigen, um mit den gespeicherten Zahlungsmethoden der Käuferin oder des Käufers ein schnelleres Checkout-Erlebnis zu bieten. Express- oder beschleunigte Checkout-Schaltflächen helfen wiederkehrenden Kundinnen und Kunden, Käufe schneller abzuschließen, indem die manuelle Eingabe von Zahlungs- und Versandinformationen übersprungen wird. Diese Schaltflächen erscheinen unterhalb der Haupt-Checkout-Schaltfläche im Warenkorb und werden von Shopify bereitgestellt. Upcart unterstützt diese Schaltflächen visuell und strukturell, aber Shopify steuert ihr Verhalten und ihre Sichtbarkeit. 📘 Mehr erfährst du in Shopifys Dokumentation zu beschleunigten Checkouts und Shopifys Release Notes zu Schaltflächen für den beschleunigten Checkout. Express-Schaltflächen für Shop Pay, PayPal und Google Pay unterhalb der Upcart-Checkout-Schaltfläche

​
So bringst du Express Payments zur Anzeige

Um Schaltflächen für den beschleunigten Checkout in Upcart anzuzeigen, muss dein Shopify-Theme sie bereits im Storefront enthalten. Das erreichst du folgendermaßen:
  1. Ein Snippet zu deinem Theme-Code hinzufügen
    • Gehe zu Onlineshop > Themes > Code bearbeiten
    • Öffne die Datei layout/theme.liquid
    • Suche den öffnenden <body>-Tag (nicht </body>)
    • Füge unterhalb dieses Tags den folgenden Code ein:
  2. Speichere die Datei
Hier ist ein Beispiel, wie es aussehen sollte: Das Liquid-Snippet für additional checkout buttons, eingefügt unterhalb des body-Tags in theme.liquid Sobald dies erledigt ist, kann Upcart deine Express-Payment-Optionen erkennen und rendern. 💡 Wenn du den Code lieber nicht selbst bearbeiten möchtest, wende dich an deinen Entwickler oder einen Shopify-Experten.

​
Zahlungs-Gateways

Die Karte Payment gateways gehört zum Legacy-Express-Payments-Modul — du siehst sie nur, wenn dein Shop noch die ältere Version verwendet. Sie listet die Express-Gateways auf, die Upcart im Warenkorb anzeigen kann, und lässt dich jedes einzeln ein- oder ausschalten sowie die Reihenfolge festlegen, in der sie erscheinen. Sechs Gateways sind aufgelistet:
  • Shop Pay
  • PayPal
  • Apple Pay
  • Amazon Pay
  • Meta Pay
  • Google Pay — aufgelistet, aber als Coming Soon markiert und nicht auswählbar
Google Pay wird absichtlich zurückgehalten: Es aktualisiert sich nicht, wenn sich der Warenkorb ändert, und würde daher jedem, der seinen Warenkorb vor dem Klicken bearbeitet, einen veralteten Preis anzeigen. Die anderen fünf können aktiviert und neu angeordnet werden — aktivierte Gateways stehen in einer geordneten Liste, mit den Auf- und Ab-Pfeilen neben jeder Zeile änderst du die Reihenfolge, und deaktivierte stehen darunter, wo ein Klick sie wieder hinzufügt.
Das Aktivieren eines Gateways hier garantiert nicht, dass es angezeigt wird. Ein Gateway wird im echten Warenkorb ausgeblendet, wenn es in deinem Shopify-Shop nicht aktiviert ist oder wenn die Käuferin oder der Käufer dafür nicht berechtigt ist — eine Apple-Pay-Schaltfläche wird beispielsweise nur auf einem unterstützten Gerät und Browser angezeigt. Siehe Shopifys Dokumentation zu beschleunigten Checkouts für die Aktivierung von Gateways und die jeweiligen Berechtigungsregeln.

​
Design der Schaltflächen für den beschleunigten Checkout

Sobald deine Schaltflächen eingerichtet sind, kannst du anpassen, wie sie in Upcart erscheinen.

​
Schaltflächenhöhe

  • Default button height und Mobile button height werden separat festgelegt, jeweils von 25 px bis 55 px
  • Jede hat ein Zahlenfeld und einen Schieberegler, die mit demselben Wert verbunden sind — verwende, was einfacher ist

​
Ausrichtung der Checkout-Schaltflächen

  • Wähle, wie die Express-Schaltflächen ausgerichtet werden:
    • Left
    • Right
    • Center
    • Space Between

​
Zeilenabstand

  • Lege den vertikalen Abstand zwischen gestapelten Schaltflächen fest, von 0 px bis 40 px

​
Erweiterte Anzeigeoptionen

Wenn aktiviert, blendet dies die Zustimmungsmeldung für Käuferinnen und Käufer aus, die normalerweise angezeigt wird, wenn sich ein Abonnementprodukt im Warenkorb befindet. Das kann helfen, die visuelle Überladung zu reduzieren, wenn du entsprechende Informationen bereits an anderer Stelle bereitstellst.

​
Warenkorb im Shadow DOM rendern

Aktiviere dies, um zu verhindern, dass das CSS deines Shopify-Themes das Styling von Upcart beeinträchtigt.
Das sorgt für ein konsistentes Design in allen Browsern und auf allen Geräten. Die Aktivierung wendet außerdem dieselbe Einstellung aus Settings > Cart settings > Advanced Settings an.

​
Hinweise zur Theme-Kompatibilität

  • Shopify erzwingt jetzt strenge Styling-Regeln für Schaltflächen des beschleunigten Checkouts.
  • Die neue Version von Upcart unterstützt diese Regeln vollständig und folgt dem Styling-Verhalten von Shopify.
⚠️ Im aktuellen Modul erscheint oben ein Banner Revert To Old Version mit einer Schaltfläche Revert To Legacy Express Payments. Sie wird nur für veraltete Themes benötigt — das Zurücksetzen versetzt dich zurück in das Verhalten vor dem Shopify-Styling, also lass sie in Ruhe, sofern dein Theme sie nicht wirklich erfordert. Falls du doch zurücksetzt, deaktiviere alle gespeicherten Styling-Optionen aus dem vorherigen Modul, damit sie die neue Version nicht beeinträchtigen.