# Versandanbieter-Logos

Das Widget "Versandarten" ist ein Widget mit welchem du die von dir angebotenen Versandarten 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%2Fgit-blob-6d298a6f112e229a737fed63eb053cccdaf77c28%2Fwidgets--shipping-methods.png?alt=media" alt=""><figcaption><p>ThemeWare® "Versandanbieter-Logos"-Widget</p></figcaption></figure>

***

## Konfiguration

Das Widget "Versandanbieter-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.&#x20;

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.

#### Versandarten konfigurieren

Die eigentlichen Versandarten konfigurierst du in Shopware 6 über die entsprechende Verwaltung in den Shopware-Einstellungen ("Einstellungen" > "Shop").

#### Versandanbieter-Logos

Deine Logos für die entsprechenden Versandanbieter kannst du über die Versandarten-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 40 Pagespeed optimierten Grafiken für Versandanbieter.
{% endhint %}

### Barrierefreiheit

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

* `twt.widget.shipping.customImage1.title`
* `twt.widget.shipping.customImage2.title`
* `twt.widget.shipping.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.shipping.customImage1.alt`
* `twt.widget.shipping.customImage2.alt`
* `twt.widget.shipping.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 "Versandanbieter-Logos"

#### Textbausteine

* **Überschrift**
  * `twt.widget.shipping.headline`
* **Link für Logos (optional)**
  * `twt.widget.shipping.link`
* **Individuelle Logos**
  * `twt.widget.shipping.customImage1.alt`
  * `twt.widget.shipping.customImage1.title`
  * `twt.widget.shipping.customImage2.alt`
  * `twt.widget.shipping.customImage2.title`
  * `twt.widget.shipping.customImage3.alt`
  * `twt.widget.shipping.customImage3.title`