Zahlungsanbieter-Logos
Das Widget "Zahlungsarten" ist ein Widget mit welchem du die von dir angebotenen Zahlungsarten mit Logos anzeigen lassen kannst.
Konfiguration
Das Widget "Zahlungsanbieter-Logos" kannst du in der Theme-Konfiguration konfigurieren.
Die Konfiguration findest du im Tab "Widgets".
Inhalt
Passe die Überschrift über den Textbaustein
twt.widget.payment.headlinean.Optional: Passe den Link der Logos über den Textbaustein
twt.widget.payment.linkan.Für individuelle Logos pflegst du Alt- und Title-Texte über
twt.widget.payment.customImage1–3.alt/.title(siehe Abschnitt "Barrierefreiheit").
Hinweis: Wie du Textbausteine bearbeitest erfährst du in folgender Anleitung: Texte bearbeiten und übersetzen
Tipp: Wirkt sich eine Änderung nicht auf die Storefront aus, leere einfach einmal den Shopware Cache: Shopware Cache leeren / aufwärmen
Zahlungsarten konfigurieren
Die eigentlichen Zahlungsarten konfigurierst du in Shopware 6 über die entsprechende Verwaltung in den Shopware-Einstellungen ("Einstellungen" > "Shop").
Zahlungsanbieter-Logos
Deine Logos für die entsprechenden Zahlungsanbieter kannst du über die Zahlungsarten-Verwaltung in den Shopware-Einstellungen hochladen.
Tipp: In den kostenfreien ThemeWare® Utilities findest du ein Logo-Set mit 90 Pagespeed optimierten Grafiken für Zahlungsarten.
Barrierefreiheit
Den Tooltip-Text (title-Attribut) kannst du über folgende Textbausteine pflegen:
twt.widget.payment.customImage1.titletwt.widget.payment.customImage2.titletwt.widget.payment.customImage3.title
Der title wird beim Mouseover angezeigt, ist aber nicht barrierefrei relevant, da er von Screenreadern meist ignoriert wird.
Alt-Attribut bzw. Aria-Label
Den alt-Text der Logos kannst du über folgende Textbausteine pflegen:
twt.widget.payment.customImage1.alttwt.widget.payment.customImage2.alttwt.widget.payment.customImage3.alt
Hinweis: Das alt-Attribut bleibt leer, wenn die Logos verlinkt werden, weil stattdessen das aria-label am Link gesetzt wird und die Bilder dann nur "dekorativ" sind.
Aria-Label: Derzeit wird der title-Text als aria-label im Link benutzt. Wir prüfen in einem kommenden Release ob wir alle Logos in einem Link zusammenfassen und einen separaten Textbaustein für das aria-label bereitstellen.
Optionen
Logos verlinken
Macht die Logos anklickbar; den Link hinterlegst du über den Textbaustein
twt.widget.payment.link.
Fallback-Badge anzeigen
Zeigt für Zahlungsarten ohne hinterlegtes Logo stattdessen ein Text-Badge an.
Nur benutzerdefinierte Bilder anzeigen
Zeigt ausschließlich deine eigenen Logos statt der automatisch ermittelten Zahlungsart-Logos.
Zusammenfassung
Theme-Konfiguration
Tab "Widgets" => Bereich "Zahlungsanbieter-Logos"
Tab "Widgets" => Bereich "Zahlungsanbieter-Logos" => Abschnitt "Basiskonfiguration" => Logos verlinken / Fallback-Badge anzeigen / Nur benutzerdefinierte Bilder anzeigen
Textbausteine
Überschrift
twt.widget.payment.headline
Link für Logos (optional)
twt.widget.payment.link
Individuelle Logos
twt.widget.payment.customImage1.alttwt.widget.payment.customImage1.titletwt.widget.payment.customImage2.alttwt.widget.payment.customImage2.titletwt.widget.payment.customImage3.alttwt.widget.payment.customImage3.title
Zuletzt aktualisiert
War das hilfreich?