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

#### Texte und Links bearbeiten

Die Texte und Links die im Widget verwendet werden, kannst du über Textbausteine ändern bzw. übersetzen.

Welche Textbausteine genutzt werden erfährst du in den entsprechenden Hilfe-Texten der jeweiligen Konfigurationen. Die Textbausteine in den Hilfe-Texten von ThemeWare® sind verlinkt, damit du ohne Umwege in den Editor des entsprechenden Textbausteins gelangst.

Eine Übersicht der verwendeten Textbausteine findest du zudem weiter unten in diesem Artikel.

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

***

## Zusammenfassung

#### **Theme-Konfiguration**

* Tab "Widgets" => Bereich "Zahlungsanbieter-Logos"

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doku.themeware.design/zusatzfunktionen/widgets/zahlungsanbieter-logos.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.