Zahlungsicons in Shopify einfügen, OHNE App. Kostenlos & schnell für schnelleren Ladezeiten

Es gibt verschiedene Methoden wie den UI-Element-Generator, x-Apps, etc., aber warum mehr Code oder Apps einfügen, wenn wir das in Shopify schon haben?

Wie geht das?

Einfach diese Datei herunterladen, danach ins Theme einfügen (siehe Bild) als Snippet z.B. mit dem Namen "payment-methodes-custom.liquid". Danach kann das Snippet überall verwendet im Theme verwendet werden mit:

{% include 'payment-methodes-custom' %}

ODER

{% render 'payment-methodes-custom' %}

Sollte der Fehler kommen, dass Include in diesem Kontext nicht erlaubt ist.

Als Beispiel sieht ihr die Screenshots von Debutify in der Produktseite & im Warenkorb.

Jedes Theme ist anders und Du musst den Ort selbst finden, wo Du es hinzufügen kannst. Bei Dawn ist es z.B. in der Datei main-product.liquid etc.

Alle verfügbaren Zahlungsmittel

• american_express
• apple_pay
• bitcoin
• dankort
• diners_club
• discover
• dogecoin
• dwolla
• forbrugsforeningen
• google_pay
• ideal
• jcb
• klarna
• klarna-pay-later
• litecoin
• maestro
• master
• paypal
• shopify_pay
• sofort
• visa
• amazon

Du kannst die Zahlungsmethoden ändern, in diesem Bereich (getrennt mit einem Komma):

assign enabled_payment_types = 'paypal,visa,master,klarna,google_pay'

Wichtig: Die Zahlungsmethoden immer nach der Beliebtheit des Landes sortieren!

Styling der Abstände, Farben etc.

Ich habe ein paar wenige CSS-Regeln eingefügt. Diese sind im CSS-Teil dokumentiert:

• Du kannst die Abstände ändern (vor/danach) in Pixel
• Mit "text-align" kannst Du steuern, ob die Icons/Text rechts (Wert: right), links (Wert: left) oder zentriert (Wert: center) sein sollen
• Die Schriftgröße kann verändert werden (aktuell in "em", kann aber auch mit Pixel gemacht werden, also z.B. Wert von 20px). Mit "font-weight" kannst Du steuern, ob es Fettschrift sein soll (Wert: 600) oder nicht (Wert: 400) und die Farbe kann auch noch geändert werden vom Titel. Aktuell ist dieser Schwarz (Wert: #000)
• Die Größe der Icons kannst Du auch angeben/ändern und der Abstand zum Titel
• Die letzten beiden Linien mit dem "filter" kannst Du entfernen, wenn die Icons farbig sein sollten. Hier kannst Du auch weiter mit Filter herumspielen für anderen Farben (siehe z.B. https://cssgenerator.org/filter-css-generator.html

So. Das war's auch schon 😀

PS: Wenn Du am Code arbeitest, vorher immer eine Kopie des Themes machen.