Zahlungsmethoden - Shopify pay­ment icon

Es geht los! 🚀

Hier findest du die Installationsanleitung und den Code, um den Block mit den payment icons direkt in deinen Shop einzubinden. Nutze diese Anleitung, um deinen Shop schnell und unkompliziert zu verbessern.

Viel Erfolg beim Einrichten und Anpassen!

So sieht es in wenigen Minuten bei Dir aus! ⚡

  • Vertrauenssteigerung: Anzeige bekannter und vertrauens­würdiger payment icons erhöhen das Vertrau­en der Kunden.
  • Erhöhte Konver­sionen: Trans­parente und gut präsen­tierte Zahlungs­optionen fördern den Ab­schluss von Käufen.
Demo anzeigen

Und so funktioniert es!

1. Shopify Dash­board > Online­shop > Theme > Code bearbeiten

2. Sections (Abschnitte) > main-product.liquid (oder eine andere Produkt­seite)

3. Im Code nach "{%- case block.type -%} {%- when '@app' -%} {% render block %}" suchen > unter­halb davon den Code einfügen

{%- when ‘payment_methods’ -%}
<div class=”product__payment-methods” {{ block.shopify_attributes }}>
<h3 class=”payment-methods-title” style=”font-size: {{ block.settings.title_size }}px;”>
{{ block.settings.title }}
</h3>
<ul class=”payment-methods-list image-size-{{ block.settings.image_size }}”>
{% if block.settings.payment_visa %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/visa-DxUoA7kmA-Jc.svg” alt=”VISA”>
</li>
{% endif %}
{% if block.settings.payment_mastercard %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/mastercard-CTGikZxOFT4y.svg” alt=”Mastercard”>
</li>
{% endif %}
{% if block.settings.payment_amex %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/american-express-C5u3GtBWzgsC.svg” alt=”Amex”>
</li>
{% endif %}
{% if block.settings.payment_apple_pay %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/apple-pay-B98CHdTNQaKL.svg” alt=”Apple Pay”>
</li>
{% endif %}
{% if block.settings.payment_google_pay %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/google-pay-H96oay44mx5u.svg” alt=”Google Pay”>
</li>
{% endif %}
{% if block.settings.payment_klarna %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/klarna-pay-later-C4TEmeG5gk7J.svg” alt=”Klarna”>
</li>
{% endif %}
{% if block.settings.payment_shop_pay %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/shop-pay-BXFIrczgXY-c.svg” alt=”Shop Pay”>
</li>
{% endif %}
{% if block.settings.payment_union_pay %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/unionpay-BQUSQqcIKgHx.svg” alt=”Union Pay”>
</li>
{% endif %}
{% if block.settings.payment_paypal %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/paypal-express–XwN1he2Bl3G.svg” alt=”PayPal”>
</li>
{% endif %}
{% if block.settings.payment_maestro %}
<li class=”payment-method”>
<img src=”https://cdn.shopify.com/shopifycloud/web/assets/v1/vite/client/de/assets/maestro-CWRaJ3hXtJ4L.svg” alt=”Maestro”>
</li>
{% endif %}
<!– Weitere Bezahlmethoden hinzufügen, falls erforderlich –>
</ul>
</div>

4. nach "{% schema %}" suchen > nach ""blocks": [ { "type": "@app" }," den Code einfügen

{
“type”: “payment_methods”,
“name”: “Bezahlmethoden”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “Titel”,
“default”: “Zahlungsmethoden”
},
{
“type”: “range”,
“id”: “title_size”,
“label”: “Titelgröße (px)”,
“min”: 12,
“max”: 36,
“step”: 1,
“default”: 16
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “Bildgröße”,
“options”: [
{
“value”: “small”,
“label”: “Klein”
},
{
“value”: “medium”,
“label”: “Mittel”
},
{
“value”: “large”,
“label”: “Groß”
}
],
“default”: “medium”
},
{
“type”: “checkbox”,
“id”: “payment_visa”,
“label”: “Visa”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “payment_mastercard”,
“label”: “MasterCard”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_amex”,
“label”: “American Express”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_apple_pay”,
“label”: “Apple Pay”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_google_pay”,
“label”: “Google Pay”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_klarna”,
“label”: “Klarna”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_shop_pay”,
“label”: “Shop Pay”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_union_pay”,
“label”: “Union Pay”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_paypal”,
“label”: “PayPal”,
“default”: false
},
{
“type”: “checkbox”,
“id”: “payment_maestro”,
“label”: “Maestro”,
“default”: false
}
// Weitere Bezahlmethoden können hier hinzugefügt werden
]
},

5. "section-main-product.css" (oder andere dazugehörige .css) suchen und öffnen > suche nach "/* Product info */" > füge den Code unterhalb ein

.product__payment-methods {
margin-top: 20px;
}

.payment-methods-title {
margin-bottom: 10px;
}

.payment-methods-list {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: left;
gap: 15px;
padding: 0;
}

.payment-method {
display: flex;
align-items: center;
justify-content: center;
}

.payment-method img {
display: block;
max-width: 100%;
height: auto;
/* Standardstile ohne Rahmen und Eckenradius */
}

/* Selektiere alle Bilder außer Amex, Klarna, Shop Pay und Union Pay */
.payment-method img:not([alt=”Amex”]):not([alt=”Klarna”]):not([alt=”Shop Pay”]):not([alt=”Union Pay”]) {
border: 1px solid #d3d3d3; /* Leicht grauer Rand */
border-radius: 4px; /* Minimaler Eckenradius */
box-sizing: border-box; /* Stellt sicher, dass der Rahmen in der Gesamtbreite enthalten ist */
}

/* Bildgrößen */
.image-size-small .payment-method img {
width: 30px; /* Klein */
}

.image-size-medium .payment-method img {
width: 45px; /* Mittel */
}

.image-size-large .payment-method img {
width: 60px; /* Groß */
}

@media (max-width: 600px) {
.payment-methods-list {
gap: 10px;
}

.image-size-small .payment-method img {
width: 20px;
}

.image-size-medium .payment-method img {
width: 30px;
}

.image-size-large .payment-method img {
width: 40px;
}
}

6. Shopify-Dash­board > Online­shop > Theme anpassen > Produkt­informa­tionen > Block hinzufügen > Block auswählen

7. Alles erledigt! ✅ Der Block kann jetzt deiner Produkt­seite hinzugefügt und im Online­shop angezeigt werden!

  • Nico Münster
  • 23. September 2024

sayweb Zahlungsarten-Block für Shopify

Der kostenlose Shopify Block Zahlungsmethoden (Shopify payment icon) von sayweb ermöglicht es Ihnen, Ihre akzeptierten Zahlungsoptionen elegant und übersichtlich auf Ihrer Website zu präsentieren. Mit anpassbaren Titel- und Bildgrößen fügt sich der Block nahtlos in Ihr Design ein und stärkt das Vertrauen Ihrer Kunden. Das responsive Design sorgt für eine optimale Darstellung auf allen Endgeräten, wodurch das Einkaufserlebnis verbessert und die Conversion Rate Ihres Shops erhöht wird.

Gefällt Dir unsere Section?⭐

Lass als Dank eine kurze Bewertung da, um weiterhin kostenlos Shopify Sections zu erhalten. 

Oder

Hast Du schon diese Sections?

  • Alle Beiträge
  • Anleitungen
Preis Badge

Preis Badge

19. September 2024/
kein Kommentar

Produkt Preis Badge für Dringlichkeit – Shopify Es geht los! 🚀 Hier findest du die Installationsanleitung und den Code, um…

Erfahre mehr
Circle Menu

Circle Menu

9. September 2024/
kein Kommentar

Circle Menu Shopify Jetzt geht´s los 🚀 Auf dieser Seite findest du die notwendige Installationsanleitung sowie den Code, um die…

Erfahre mehr

Kontakt

Brauchst du Custom Sections?

Optimiere Deinen Shopify-Onlineshop mit uns. Kontaktiere uns, um Deine spezifischen Bedürfnisse zu besprechen.

Kontakt­daten

+491637299347

kontakt@sayweb.de

+491637299347