> ## 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-Payments-Modul

> Zeige Schaltflächen für den beschleunigten Checkout unterhalb der Haupt-Checkout-Schaltfläche im Upcart Drawer an.

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

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](https://help.shopify.com/en/manual/payments/accelerated-checkouts) und [Shopifys Release Notes zu Schaltflächen für den beschleunigten Checkout](https://shopify.dev/changelog/developer-preview-accelerated-checkout-buttons-on-storefront-now-support-shopify-functions-bundles-and-have-improved-performance).

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-shop-pay-paypal-google.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=dece6cba6c512237980466fd1b02dd87" alt="Express-Schaltflächen für Shop Pay, PayPal und Google Pay unterhalb der Upcart-Checkout-Schaltfläche" width="600" data-path="images/upcart/express-payments-shop-pay-paypal-google.png" />

<div id="getting-express-payments-to-show">
  # **So bringst du Express Payments zur Anzeige**
</div>

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:

     ```
     {% if additional_checkout_buttons %} <div style="display: none !important"> {{ content_for_additional_checkout_buttons }} </div> {% endif %}
     ```
2. Speichere die Datei

Hier ist ein Beispiel, wie es aussehen sollte:

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/express-payments-additional-checkout-buttons-liquid.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=25dd197de897db2a448ed1d15c4a8b1e" alt="Das Liquid-Snippet für additional checkout buttons, eingefügt unterhalb des body-Tags in theme.liquid" width="1076" height="388" data-path="images/upcart/express-payments-additional-checkout-buttons-liquid.png" />

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](https://experts.shopify.com).

<div id="payment-gateways">
  # Zahlungs-Gateways
</div>

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.

<Note>
  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](https://help.shopify.com/en/manual/payments/accelerated-checkouts) für die Aktivierung von Gateways und die jeweiligen Berechtigungsregeln.
</Note>

<div id="accelerated-checkout-buttons-design">
  # Design der Schaltflächen für den beschleunigten Checkout
</div>

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

<div id="button-height">
  ## **Schaltflächenhöhe**
</div>

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

<div id="checkout-button-alignment">
  ## **Ausrichtung der Checkout-Schaltflächen**
</div>

* Wähle, wie die Express-Schaltflächen ausgerichtet werden:

  * **Left**
  * **Right**
  * **Center**
  * **Space Between**

<div id="row-gap">
  ## **Zeilenabstand**
</div>

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

<div id="advanced-display-options">
  # **Erweiterte Anzeigeoptionen**
</div>

<div id="hide-buyer-consent">
  ## **Käuferzustimmung ausblenden**
</div>

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.

<div id="render-cart-in-shadow-dom">
  ## **Warenkorb im Shadow DOM rendern**
</div>

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.

<div id="theme-compatibility-notes">
  ## **Hinweise zur Theme-Kompatibilität**
</div>

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