FROM CACHE - de_header
Gelöst

Icons Zahlungsarten unter Button Warenkorb

D-PG
Shopify Partner
53 2 11

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

VG 

DPG

2 AKZEPTIERTE LÖSUNGEN

Gabe
Shopify Staff
17909 2841 4177

Erfolg.

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>

 

 

image.png

 

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.

 

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

 

Hoffe das hilft! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

Gabe
Shopify Staff
17909 2841 4177

Erfolg.

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

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

3 ANTWORTEN 3

Gabe
Shopify Staff
17909 2841 4177

Erfolg.

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>

 

 

image.png

 

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.

 

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

 

Hoffe das hilft! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

D-PG
Shopify Partner
53 2 11

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
Shopify Staff
17909 2841 4177

Erfolg.

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

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog