Shopify-Hack: Die Express-Buttons aus der ersten Seite im Checkout entfernen.

‼ Update Juni/2023. Diese Methode funktioniert für den Shopify Checkout nicht mehr. Es geht nur noch für den Online-Shop. Es gibt eine neue Möglichkeit. Siehe Artikel: Express-Payment Buttons im Shopify Checkout entfernen und Zahlungsmethoden sortieren - ohne Shopify Plus!

Shopify hat ein Update von ihrer Anleitung gemacht in der Community, wie Du den Express-Checkout losbekommt (Bild 4).

Der Hack hat länger nicht mehr funktioniert, nun geht dieser wieder und das wurde von Shopify so bestätigt.

‼ Es müssen beide/alle Schritte gemacht werden/geprüft werden. Sonst funktioniert es nicht ‼

Warum sollte ich die Express-Checkout-Buttons entfernen?

Auf der Produktseite, dem Warenkorb und im Checkout-Prozess hat Shopify die sog. Express-Checkout-Buttons eingefügt (auch "dynamische Zahlungsmethoden" genannt).

Das Problem daran? Es verwirrt den Kunden, da er die anderen Zahlungsmethoden nicht sieht, wenn man nicht zusätzliche Zahlungsicons einfügt. Das wiederum sind zu viele grafische Informationen für das Auge des Kunden. Im Weiteren sind die Ladezeiten sehr lange (vorwiegend im Checkout-Prozesss) und das ist nicht gut für die Conversion-Rate generell.

Darum empfehlen wir in den meisten Online-Shops/Fällen, diese zu entfernen. ABER, auch hier gilt. Testen! Wir lagen auch schon einmal falsch bei einem Kunden. Dieses Learning findest Du in diesem Artikel.

SCHRITT 1*

Wir fügen den Code für den Express-Checkout Button in den Warenkorb ein.

• Onlineshop > Themes > Aktion > Code bearbeiten
• Sections, suche nach der "cart-template.liquid" Datei. Wenn Dein Theme kein "cart-template.liquid" hat, dann suche das "cart.liquid" direkt bei den Templates.
• Suche den Code darin "cart.general.checkout" (siehe Bild 1)
• Füge darunter den folgenden Code-Block ein auf einer neuen Linie.
  
  {% if additional_checkout_buttons %}
  <div class="additional-checkout-buttons">
  {{ content_for_additional_checkout_buttons }}
  </div>
  {% endif %}
• Die Datei sollte danach so (oder ähnlich) aussehen wie auf dem Bild 2.
• Speichern

* Dieser Schritt ist nur notwendig, wenn in Du in Deinem Warenkorb keinen Express-Checkout Button hast (kann manchmal im Theme aktiviert werden) oder diesen entfernt hast im Code.

SCHRITT 2

Wir werden nun die Express-Checkout-Schaltflächen auf der Warenkorbseite mit CSS-Code ausblenden:

• Onlineshop > Themes > Aktion > Code bearbeiten
• Assets, suche nach der "theme.scss.liquid"
• Füge den folgenden CSS-Code ganz am Schluss dieser Datei ein:
  
  .additional-checkout-buttons { display: none ; }
• Die Datei sollte danach so (oder ähnlich) aussehen wie auf dem Bild 3.
• Speichern
  

Ergebnis: Die Express-Checkout-Schaltflächen sollten nicht mehr in der ersten Seite im Checkout erscheinen.

Wenn die Schaltflächen (Apple Pay, Google Pay, Shop Pay oder PayPal Express) immer noch vorhanden sind, ist möglicherweise noch eine frühere Checkout-Sitzung aktiv. Lösche alle Cookies und den Cache des Browsers und versuche es nochmals.

Viel Spaß beim Ausprobieren! 😎