Google Pay Button in express checkout looks bad - how to change

Topic summary

Problem: Auf Produktseiten sollen mehrere Express-Checkout-Buttons (Google Pay, Apple Pay, Shop Pay, PayPal) dauerhaft angezeigt werden. Nach Einbau von {{ content_for_additional_checkout_buttons }} im Theme (Liquid/CSS) erscheint Google Pay optisch fehlerhaft, während im Checkout der GPay-Button korrekt aussieht.

Aktueller Stand/Beobachtungen:

  • Dynamische Checkout-Buttons (DCB) sind aktiviert, dennoch zeigt das Theme standardmäßig nur PayPal.
  • Alle Zahlungsarten sind in Shopify Payments hinterlegt; weitere Admin-Optionen fehlen.
  • Screenshots (Vergleichsbeispiel, aktuelle Darstellung, Einstellungen) und ein GIF sind zentral für das Verständnis.

Hinweise/Erklärungen (Support):

  • DCB = dynamische Checkout-Buttons; Auswahl/Anzeige wird von Digital Wallets gesteuert (Browser, Kaufhistorie, Region). Eine erzwungene gleichzeitige Anzeige aller vier ist nicht vorgesehen.
  • Verdacht: Eigenes Code-Embedding weicht vom nativen GPay-Setup ab, daher abweichendes Styling.

Empfehlungen/Nächste Schritte:

  • Beispiel-URL bereitstellen oder an den Shopify-Support weiterleiten für eine Analyse des Themes.
  • Erwägung: zertifizierte Experten beauftragen; Hinweise auf mögliche Performance-Einbußen und Wegfall zukünftiger Theme-Updates durch Code-Anpassungen.

Status: Keine Lösung; Anfrage bleibt offen, da ein Beispiel-Link fehlt und das gewünschte Verhalten systembedingt limitiert ist.

Summarized with AI on December 28. AI used: gpt-5.

Hi,

wir möchten bereits auf unseren Produktseiten einen Express Checkout Button anbieten. Unser Theme (Halo) und auch alle anderen Themes die ich getestet habe (z.B. Dawn), bieten dafür jedoch nur den Paypal Button an. Da Paypal mit 2,99% jedoch doch etwas kostspielig ist möchten wir auch Google Pay, Apple Pay und Shop Pay auf unseren Produktseiten als Express Checkout Buttons anbieten.

Das soll so aussehen wie bei YFood:

Nun haben wir ein bisschen am Liquid und CSS geschraubt und bei uns sieht es jetzt so aus, womit wir zufrienden sind außer dass der Google Pay Button echt hässlich ist:

Hat jemand eine Idee wie wir das ändern können?

Um die Buttons anzeigen zu lassen, haben wir einfach im product-button.liquid den code :
{{ content_for_additional_checkout_buttons }}

hinzugefügt.

Vielleicht weiß jemand von euch was den Button so schlecht erscheinend lässt und ob man das irgendwie anpassen könnte.

Hey @Tekimpact

Danke für die Bilder und eigentlich richtest du den Digital Wallet “G-Pay” in deinen Shopify Payments Einstellungen ein und die zeigen sich wie in deinem ersten Bild. Somit bin ich mir nicht sicher, wie und warum genau ihr G-Pay über den von dir erwähnten Code einbindet denn das scheint nicht die native Methode G-Pay im Shop zu sein:

In meinen Themes zeigt sich der G-Pay DCB (dynamic checkout button) wie erwartet:

Hast du unsere Anleitung durchkämmen können? Wen ja, wo genau in den Anleitungen hapert es?

Wenn du mir die genaue Stelle in den Anleitungen zeigst, wo es hapert, und/oder einen Link zu einem Beispiel hier postest dann habe ich mehr Kontext das zu analysieren. Ansonsten wirst du das an unseren Support senden müssen denn die können einen Deep Dive in deine Einstellungen ausführen.

Hier unsere Anleitungen:

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:


Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Hi @Gabe ,

danke schon einmal, dass du uns helfen möchtest!:slight_smile: Wir haben die Dynamischen Checkout Buttons schon aktiviert, da erscheint aktuell leider dauerhaft nur Paypal:

Es gibt da auch nichts anderes was wir noch anpassen können.
Alle Zahlungsarten haben wir hinzugefügt:

Mehr als folgendes können wir auch nicht einstellen (mit Admin Zugriff):

In unserem Checkout Bereich wird der GPay Button auch richtig angezeigt:

@Tekimpact

Ah verstehe. Das ist weil das Erscheinen der Buttons von deinem Browser und von dem vergangenen Zahlungsverhalten des User beeinflusst wird. In einen der oben verlinkten Anleitungen wirst du folgendes lesen können:

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink:

Hey also die Antworten haben irgendwie die ganze Zeit recht wenig mit dem zu tun, was ich eigentlich erreichen will :disappointed_face:

Das letzte was du mir geschrieben hast ist mir auch bewusst - wir wollen trotzdem immer alle vier Express Checkout Optionen anbieten. Mir persönlich (als Kunde) würde auch immer Paypal angezeigt werden - würde aber auch eine Zahlung über den Google Pay Button in Erwägung ziehen.

Shopify sieht anscheined leider nicht vor dass dies angeboten wird. Wir haben es über den “Code” eingebunden - die Frage steht immernoch im Raum warum der G Pay Button jetzt so aussieht bei unseren Produkten und im Checkout Menü normal :confused:

Hey @Tekimpact

Ohne konkrete Beispiele, wie ein Link zu einem Beispiel, arbeiten wir hier ja blind und können nicht genau nachvollziehen, was ihr da im Theme eingebaut habt und warum euer G-Pay DCB nicht den standard Button anzeigt der in meinem Testshop angezeigt wird.

Das erwartete Systemverhalten der Buttons habe ich bereits erklärt und somit müsst ihr ggf. andere Wege einschlagen, als es zu versuchen, euren eigenen Custom DCB Button in das Theme einzucoden. Ihr könnt das gerne an unseren Support senden, so dass die einen tieferen :eye: in euer Theme werfen können, aber die werden dir womöglich dasselbe sagen, was ich gesagt habe.

  • wir wollen trotzdem immer alle vier Express Checkout Optionen anbieten. Mir persönlich (als Kunde) würde auch immer Paypal angezeigt werden - würde aber auch eine Zahlung über den Google Pay Button in Erwägung ziehen.

Das erwartete Systemverhalten wird von den Digital Wallets selber bestimmt, wie meine oben verlinkten Help Docs bereits erklären. Welcher DCB angezeigt wird, hängt von vielen Faktoren ab, wie z. B. welcher Browser, die Purchase-History des Kunden, oder aus welcher Region der Besucher zum Shop kommt.

Um dir das zu veranschaulichen habe ich ein Beispiel des Systemverhaltens auf diesem Testshop getestet und es zeigt ziemlich deutlich wie die DCBs funzen:

30-11-erilj-lt2pt.gif

Ich kann dir aber gerne einen unserer zertifizierten Experten empfehlen mit denen ihr eine Lösung bauen könnt. Somit einen unserer Experten engagieren indem du denen eine E-Mail rüberschießt. Unsere Experten antworten meist sehr schnell. Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negativ beeinflussen und 2) dein Theme aus den Theme Updates ausschließen.

Oder stelle deine Frage in unserem Experten Forum auf Englisch hier. Die werden aber einen Link zu einem Beispiel brauchen.

Hoffe das hilft dir weiter - lass wissen falls nicht! :wink: