> For the complete documentation index, see [llms.txt](https://doku.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doku.themeware.design/zusatzfunktionen/widgets/zahlungsanbieter-logos.md).

# Zahlungsanbieter-Logos

Das Widget "Zahlungsarten" ist ein Widget mit welchem du die von dir angebotenen Zahlungsarten mit Logos anzeigen lassen kannst.

<figure><img src="/files/XRCc4B76cz0JqHMn6Qn1" alt=""><figcaption><p>ThemeWare® "Zahlungsanbieter-Logos"-Widget</p></figcaption></figure>

***

## 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.headline` an.
* Optional: Passe den Link der Logos über den Textbaustein `twt.widget.payment.link` an.
* Für individuelle Logos pflegst du Alt- und Title-Texte über `twt.widget.payment.customImage1–3.alt` / `.title` (siehe Abschnitt "Barrierefreiheit").

{% hint style="info" %}
**Hinweis**: Wie du Textbausteine bearbeitest erfährst du in folgender Anleitung: [Texte bearbeiten und übersetzen](https://wiki.themeware.design/wissensdatenbank/anleitungen/texte-bearbeiten-und-uebersetzen)
{% endhint %}

{% hint style="success" %}
**Tipp**: Wirkt sich eine Änderung nicht auf die Storefront aus, leere einfach einmal den Shopware Cache: [Shopware Cache leeren / aufwärmen](https://wiki.themeware.design/wissensdatenbank/anleitungen/sonstiges/shopware-cache-leeren)
{% endhint %}

#### 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.

{% hint style="success" %}
**Tipp**: In den kostenfreien [ThemeWare® Utilities](https://service.themeware.design/themeware-utilities) findest du ein Logo-Set mit 90 Pagespeed optimierten Grafiken für Zahlungsarten.
{% endhint %}

### Barrierefreiheit

Den Tooltip-Text (`title`-Attribut) kannst du über folgende Textbausteine pflegen:

* `twt.widget.payment.customImage1.title`
* `twt.widget.payment.customImage2.title`
* `twt.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.alt`
* `twt.widget.payment.customImage2.alt`
* `twt.widget.payment.customImage3.alt`

{% hint style="info" %}
**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.
{% endhint %}

**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.alt`
  * `twt.widget.payment.customImage1.title`
  * `twt.widget.payment.customImage2.alt`
  * `twt.widget.payment.customImage2.title`
  * `twt.widget.payment.customImage3.alt`
  * `twt.widget.payment.customImage3.title`