> 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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2Fhr6BLH4h4f6u33z7rbzc%2Fwidgets--payment-methods.png?alt=media&amp;token=61f3506c-385c-4f00-b10b-049724f1b263" 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

Den `alt`-Text der benutzerdefinierten Logos kannst du über folgende Textbausteine pflegen:

* `twt.widget.payment.customImage1.alt`
* `twt.widget.payment.customImage2.alt`
* `twt.widget.payment.customImage3.alt`

Bei den automatisch ermittelten Zahlungsart-Logos kommt der `alt`-Text aus dem Alternativtext des Mediums in Shopware, ersatzweise aus dem Namen der Zahlungsart.

{% hint style="info" %}
**Hinweis**: Werden die Logos verlinkt, beschreibt der `alt`-Text nicht mehr das Logo, sondern das Ziel des Links. Dafür wird der Text in folgenden Baustein eingesetzt:

* `twt.widget.payment.linkAlt` (Standard: `Zahlungsinformationen zu %name%`)

Der Platzhalter `%name%` wird durch den `alt`-Text des jeweiligen Logos ersetzt. Ohne Verlinkung greift der Baustein nicht.
{% endhint %}

Das ist dieselbe Vorgehensweise, die Shopware beim Shop-Logo im Header verwendet: Der Link trägt keine eigene Beschriftung, sondern übernimmt sie aus dem `alt`-Attribut des Bildes. Ein `aria-label` wird nicht ausgegeben.

***

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