My Checkout Buttons dont show "More payment options" line below them

[ventures6k]

Hey there, so I have used many shops and themes over the last 2 years and they always automatically had the "More payment options" Line that linked them to the checkout displayed.
See the following image

The shop I am currently working with doesnt display that, and neither Shopify Support nor the Theme developer (Select) are really helping much. Its just a constant back and forth with them linking me articles about dynamic checkout buttons which are not useful for this problem at all.

Now I have already inquired about this once from the perspective of adding custom code to this, but I am simply not versed in coding. If someone has a solution to this please let me know.

Our product page looks like this 

So you see that there is no indication of "More payment options" or anything like that, which is not good for our funnel. I have had mutliple customers tell me that they wouldve liked to see this instead of only having their dynamic button show.


Thank you for your help!

[Gabe · Accepted solution]

Hey @ventures6k 

Du hast hier die deutsche Community erreicht also können wir das gerne auf Deutsch besprechen:

Apropos, super Theme - das Select Theme - gute Wahl! 😉

Dann ist es so, dass der "More Payment Options" Button im Prinzip nur ein Direktlink zum Checkout ist. Du müsstest dich entscheiden, ob dieser Direktlink zum Checkout ein wichtiger Bestandteil deines Klickfunnels und eurer Checkout Strategie ist. Viele Shops wollen diesen Link oft entfernen denn er leitet ja den Besucher weg vom Stöbern im Shop und kann somit einen negativen Impact auf eure allgemeine AOV KPIs haben.

Ich habe aber das Select Theme jetzt zu meinem Testshop hinzugefügt und es scheint mir der "More Payment Options" Button ist nicht Teil des Themes:

Das kannst du selber in einer frischen Kopie des Dawn Themes testen:

Der Code des Buttons ist der folgende falls du ihn selber einbauen möchtest. Allerdings ist das nicht ganz einfach!

<button class="shopify-payment-button__more-options BUz42FHpSPncCPJ4Pr_f" type="button" data-testid="sheet-open-button">More payment options</button>

Um den "More Payment Options"-Button auf der PDP im Select Theme zu ergänzen, musst du den HTML-Code für den Button in die Produktvorlage einfügen:

1. Öffne die Datei main-product.liquid im Verzeichnis sections.
2. Finde den Abschnitt, in dem die Schaltflächen für den Warenkorb und die Bezahloptionen hinzugefügt werden. Dies befindet sich in der Regel im Formular für das Hinzufügen zum Warenkorb (<form>-Tag).
3. Füge den obigen HTML-Code an der Stelle hinzu, an der der "More Payment Options"-Button angezeigt werden soll.

Ein Beispiel, wie du den Button hinzufügen könntest, sieht so aus:

<form method="post" action="/cart/add" id="product-form-{{ section.id }}" class="product-form">
  <!-- Existierende Inhalte des Formulars -->

  <!-- Hinzufügen des "More Payment Options"-Buttons -->
  <button class="shopify-payment-button__more-options BUz42FHpSPncCPJ4Pr_f" type="button" data-testid="sheet-open-button">More payment options</button>

  <!-- Weitere Inhalte des Formulars -->
</form>

Um sicherzustellen, dass der Button korrekt gestylt ist, überprüfe, ob die benötigten CSS-Klassen in deiner Theme-CSS-Datei (theme.css oder base.css) definiert sind. Falls nicht, füge die entsprechenden CSS-Stile hinzu. Falls die Klasse shopify-payment-button__more-options und BUz42FHpSPncCPJ4Pr_f nicht definiert sind, kannst du sie wie folgt hinzufügen:

.shopify-payment-button__more-options {
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.BUz42FHpSPncCPJ4Pr_f {
  /* Füge hier weitere Stile hinzu, falls benötigt */
}

Speichere die Änderungen in der main-product.liquid-Datei und in der CSS-Datei (falls Änderungen vorgenommen wurden). Gehe zu einer Produktseite in deinem Shopify-Store und überprüfe, ob der "More Payment Options"-Button korrekt angezeigt wird und funktioniert.

Wenn du es selber auf deiner PDP programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer. Du kannst ein Backup deines Themes erstellen, bevor man den Code bearbeitet, oder den Code wiederherstellen, falls dies nötig sein sollte. Du könntest auch 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. Das obige ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

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

[ventures6k]

Hi Gabe!

Danke für die schnelle Nachricht, ja durch das ganze Englisch Deutsch gewsitche habe ich das wohl etwas verschwitzt!

Leider hast du anscheinend vergessen den Code zu Posten bei deiner Lösungsmöglichkeit, könntest du das nochmal schicken? Dann schau ich mir das ganze genau an.

[Gabe]

Hey @ventures6k 

Du warst mir zu schnell haha. Kannst du mal meine Antwort oben refreshen? ^^^

[ventures6k]

Super danke dir! Ich werde mir das ganze ansehen und dann entscheiden wir ob wir das so implementieren möchten 🙂