Icons Zahlungsarten unter Button Warenkorb

Deutsch Diskussion Technische Fragen & Antworten
1

Hi zusammen,

hat jemand eine Idee, wie wir die angebotenen Zahlungsarten im Bereich des “In den Warenkorb-Buttons” zeigen können.

Ähnlich wie auf purelei.com.

DPG_0-1676457913533.png
DPG_0-1676457913533.png690×418 14.4 KB

VG

DPG

2

Hey @D-PG

Danke für die Angaben und Purelei scheint das ueber eine Eigenanasspung in der Produktvorlage eingebaut zu haben mit dem folgenden HTML und

Class Code:

image.png
image.png1164×634 466 KB

Das folgende ist ohne Gewähr und bitte immer zuerst in einer Testumgebung testen:

Du kannst an der richtigen Stelle in eurem Produkt Liquid den folgenden Liquid-Code einpflegen, um eine Liste von Zahlungssymbolen für die verfügbaren Zahlungsmethoden in deinem Laden zu erstellen:

{% assign payment_icons = 'visa,klarna,amex,paypal,apple-pay,mastercard' | split: ',' %}

  {% for icon in payment_icons %}
    {% capture icon_url %}//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/{{ icon }}_small.png?v=1234567890{% endcapture %}
    {% if icon_url != '' %}
      
    {% endif %}
  {% endfor %}

Dieser Code erstellt ein Array mit den Namen der Zahlungssymbole, durchläuft dann jeden Symbolnamen und erzeugt ein Bild-Tag mit der entsprechenden URL für das Symbol.

Du kannst den folgenden CSS-Code verwenden, um die Zahlungssymbole zu gestalten:

.prd-Detail_PaymentProviders {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.prd-Detail_PaymentProvider {
  margin: 0 10px;
}

Dieser Code erstellt den Container der Zahlungsanbieter zu einem Flex-Container, zentriert die Zahlungssymbole horizontal und vertikal und fügt einen Rand am oberen Rand des Containers hinzu. Außerdem wird für jedes Zahlungssymbol ein Rand gesetzt, um sie horizontal zu zentrieren.

Eine weitere Anleitung von uns findest du hier allerdings geht es darum die Icons im Footer einzubetten was aber im Grunde ähnlich ist. Einen weitere Leitfaden zum Thema findest du hier.

Ansonsten gibt es auch Apps mit dem man das machen kann. Bei weitere Fragen bitte einen Experten konsultieren!

Hoffe das hilft! :wink:

3

Hervorragend @Gabe

Soweit so gut, das hat geklappt ;)…

Next Stepp: Vorhanden sind ja derzeit lediglich die Standard-Icons.

Ist es möglich, dass ich diese durch eigene Bilder/ Icons ersetze?

VG

DPG

4

Hey @D-PG

Super und in meinem Code siehst du die “Container” für die “IMG URLs” mit den CDN Links. Hier kannst du deine eigenen Bilder URLs einbauen, der Bilder die du selber erstellt hast. Diese können beispielsweise pngs oder svgs sein die du vielleicht zu deinem Dateien Bereich hochlädst um die CDN Url zu bekommen das du in den Code einbauen kannst.

Im Video siehst du wie er es macht im Custom Liquid hier (auf ca. 2:30 min auf dem Videozähler):

image.png
image.png498×642 95.3 KB