# Payment logos

The widget "Payment methods" is a widget with which you can display the payment methods you offer with their logos.

<figure><img src="/files/BZ90kElMuFGac0YZ3irx" alt=""><figcaption><p>ThemeWare® "Payment logos" widget</p></figcaption></figure>

***

## Configuration

You can configure the "Payment logos" widget in the theme configuration.

> You can find the configuration in the "Widgets" tab.

#### Editing texts and links

You can change or translate the texts and links used in the widget using snippets.

You can find out which snippets are used in the corresponding help texts for the respective configurations. The snippets in the ThemeWare® help texts are linked so that you can go directly to the editor of the corresponding snippet.

You can also find an overview of the snippets used further down in this article.

#### Configuring payment methods

You configure the actual payment methods in Shopware 6 via the corresponding administration in the Shopware settings ("Settings" > "Shop").

#### Payment method logos

You can upload your logos for the corresponding payment methods via the payment management in the Shopware settings.

{% hint style="success" %}
**Tip**: In the free [ThemeWare® Utilities](https://service.themeware.design/en/themeware-utilities) you will find a logo set with 90 pagespeed-optimised graphics for payment methods.
{% 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, einen separaten Textbaustein für das `aria-label` bereitstellen oder einen unsichtbaren beschreibenden Text hinzufügen.

***

## Summary

#### **Theme configuration**

* Tab "Widgets" => Block "Payment logos"

#### Snippets

* **Headline**
  * `twt.widget.payment.headline`
* **Link for logos (optional)**
  * `twt.widget.payment.link`
* **Custom 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://docs.themeware.design/additional-features/widgets/payment-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.