Icons Zahlungsarten unter Button Warenkorb

[D-PG]

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.

VG 

DPG

[Gabe · Accepted solution]

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 <div> Class Code:

<div class="prd-Detail_PaymentProviders">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/visa_small.png?v=30543114866172798991676019365" alt="Visa" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/klarna_small.png?v=148591013865061732251676019135" alt="Klarna" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/amex_small.png?v=112203696602527797761676019031" alt="AMEX" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/paypal_small.png?v=44085568587676070151676019204" alt="PayPal" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/apple-pay_small.png?v=97199256565114539251676019034" alt="Apple Pay" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/mastercard_small.png?v=50999728448583360301676019177" alt="Mastercard" width="40" height="30" loading="lazy">
</div>

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: ',' %}
<div class="prd-Detail_PaymentProviders">
  {% 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 != '' %}
      <img class="prd-Detail_PaymentProvider" src="{{ icon_url }}" alt="{{ icon | capitalize }}" width="40" height="30" loading="lazy">
    {% endif %}
  {% endfor %}
</div>

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.

• Hier ein cooler Video der das auch zeigt.

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

Hoffe das hilft! 😉

[Gabe · Accepted solution]

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 <div> Class Code:

<div class="prd-Detail_PaymentProviders">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/visa_small.png?v=30543114866172798991676019365" alt="Visa" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/klarna_small.png?v=148591013865061732251676019135" alt="Klarna" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/amex_small.png?v=112203696602527797761676019031" alt="AMEX" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/paypal_small.png?v=44085568587676070151676019204" alt="PayPal" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/apple-pay_small.png?v=97199256565114539251676019034" alt="Apple Pay" width="40" height="30" loading="lazy">
<img class="prd-Detail_PaymentProvider" src="//cdn.shopify.com/s/files/1/1328/6091/t/458/assets/mastercard_small.png?v=50999728448583360301676019177" alt="Mastercard" width="40" height="30" loading="lazy">
</div>

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: ',' %}
<div class="prd-Detail_PaymentProviders">
  {% 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 != '' %}
      <img class="prd-Detail_PaymentProvider" src="{{ icon_url }}" alt="{{ icon | capitalize }}" width="40" height="30" loading="lazy">
    {% endif %}
  {% endfor %}
</div>

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.

• Hier ein cooler Video der das auch zeigt.

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

Hoffe das hilft! 😉

[D-PG]

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

[Gabe · Accepted solution]

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):

• Scrolle auch hier runter bis zum Abschnitt: Images on Another Server/Website