> 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/versandanbieter-logos.md).

# Versandanbieter-Logos

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

<figure><img src="/files/99WZ4CLFcp8PhniKqGtL" 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".

### Inhalt

* Passe die Überschrift über den Textbaustein `twt.widget.shipping.headline` an.
* Optional: Passe den Link der Logos über den Textbaustein `twt.widget.shipping.link` an.
* Für individuelle Logos pflegst du Alt- und Title-Texte über `twt.widget.shipping.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 %}

#### 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 und Beschriftung des Links

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**: Werden die Logos verlinkt, bleibt das `alt`-Attribut des Bildes leer (`alt=""`), weil das Bild dann nur "dekorativ" ist. Die Beschriftung übernimmt in diesem Fall ein visuell versteckter Text (`<span class="visually-hidden">`) innerhalb des Links.
{% endhint %}

**Beschriftung des Links:** Als Text wird der `title`-Text des jeweiligen Logos verwendet, bei den automatisch ermittelten Versandart-Logos der Name der Versandart. Ein `aria-label` am Link wird nicht ausgegeben: Der versteckte Text ist gleichwertig, weil er als echter Textinhalt vorgelesen wird und zusätzlich von Übersetzungsfunktionen des Browsers erfasst wird.

***

## Optionen

* **Logos verlinken**
  * Macht die Logos anklickbar; den Link hinterlegst du über den Textbaustein `twt.widget.shipping.link`.
* **Fallback-Badge anzeigen**
  * Zeigt für Versandarten ohne hinterlegtes Logo stattdessen ein Text-Badge an.
* **Nur benutzerdefinierte Bilder anzeigen**
  * Zeigt ausschließlich deine eigenen Logos statt der automatisch ermittelten Versandart-Logos.

***

## Zusammenfassung

#### **Theme-Konfiguration**

* Tab "Widgets" => Bereich "Versandanbieter-Logos"
* Tab "Widgets" => Bereich "Versandanbieter-Logos" => Abschnitt "Basiskonfiguration" => Logos verlinken / Fallback-Badge anzeigen / Nur benutzerdefinierte Bilder anzeigen

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