> 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/auszeichnungen-siegel-oder-zertifikate.md).

# Auszeichnungen, Siegel oder Zertifikate

Das Widget "Auszeichnungen, Siegel oder Zertifikate" ist, wie der Name bereits sagt, ein Widget für Shop-Auszeichnungen bzw. Trust-Badges oder Sicherheits-Zertifikate.

<figure><img src="/files/AeQCKBccgLAcXfUbMghE" alt=""><figcaption><p>ThemeWare® "Auszeichnungen, Siegel oder Zertifikate"-Widget</p></figcaption></figure>

***

## Konfiguration

Das Widget "Auszeichnungen, Siegel oder Zertifikate" kannst du in der Theme-Konfiguration konfigurieren.

> Die Konfiguration findest du im Tab "Widgets".

### Inhalt

* Passe die Überschrift über den Textbaustein `twt.widget.awards.headline` an.
* Passe den Text über den Textbaustein `twt.widget.awards.content` an.
  * Beide werden nur angezeigt, wenn die Option "Zusatztext anzeigen" aktiviert ist.
* Das mitgelieferte SSL-Siegel beschriftest du über `twt.widget.awards.sslSeal.alt` / `.title`.
* Für individuelle Logos pflegst du Title, Alt-Text, Aria-Label und alternative URL über `twt.widget.awards.customImage1–6.*` (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 %}

### Barrierefreiheit

Bilder wie z. B. Zertifikate oder Siegel, die über die Theme-Konfiguration integriert werden, erhalten leider nicht automatisch den in der Meidenverwaltung hinterlegten `alt`-Text. Damit diese Bilder trotzdem barrierefrei eingebunden werden können, stellt **ThemeWare®** hierfür **separate Textbausteine** bereit, die du individuell nutzen kannst.

#### Title

Den Tooltip-Text (`title`-Attribut) kannst du über folgenden Textbaustein pflegen:

* `twt.widget.awards.customImage1.title`
* `twt.widget.awards.customImage2.title`
* `twt.widget.awards.customImage3.title`
* `twt.widget.awards.customImage4.title`
* `twt.widget.awards.customImage5.title`
* `twt.widget.awards.customImage6.title`

Der `title` wird beim Mouseover angezeigt, ist aber **nicht barrierefrei relevant**, da er von Screenreadern meist ignoriert wird.

#### Alt-Attribut bzw. Aria-Label

Ob du das `alt`-Attribut oder das `aria-label` verwendest, hängt davon ab, **ob das Bild verlinkt ist oder nicht**:

* **Alt-Attribut** (für nicht verlinkte Bilder)
  * Ist das Bild **nicht verlinkt**, wird der `alt`-Text direkt im `img`-Tag eingebunden. Dieser wird über den passenden Textbaustein gesteuert.
* **Aria-Label** (für verlinkte Bilder)
  * Ist das Bild **verlinkt**, bleibt das `alt`-Attribut im Bild **leer** (`alt=""`). Stattdessen wird der beschreibende Text über ein `aria-label` direkt am `<a>`-Tag gesetzt – denn hier trägt der **Link die eigentliche Bedeutung** und die Bilder sind lediglich "dekorativ".

**Tipp**: Gestalte deine Texte in `alt`- und `aria-label`-Attributen ausführlicher, konkreter und kontextbezogener als beispielsweise den `titel`-Text.

Statt nur "SSL-verschlüsselt", könntest du z. B. schreiben: "Ihre Daten sind durch SSL-Verschlüsselung geschützt". So profitieren auch Screenreader-Nutzer und es wirkt gleichzeitig vertrauensvoller für alle Besucher.

***

## Optionen

* **Zusatztext anzeigen**
  * Blendet Überschrift und Text ein (Textbausteine `twt.widget.awards.headline` / `twt.widget.awards.content`).
* **Standard SSL-Siegel anzeigen**
  * Zeigt das mitgelieferte SSL-Siegel an (verfügbar in Deutsch und Englisch).

***

## Zusammenfassung

#### **Theme-Konfiguration**

* Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate"
* Tab "Widgets" => Bereich "Auszeichnungen, Siegel oder Zertifikate" => Abschnitt "Basiskonfiguration" => Zusatztext anzeigen / Standard SSL-Siegel anzeigen

#### Textbausteine

* **Überschrift**
  * `twt.widget.awards.headline`
* **Text**
  * `twt.widget.awards.content`
* **SSL-Siegel**
  * Alt-Attribut: `twt.widget.awards.sslSeal.alt`
  * Title-Attribute: `twt.widget.awards.sslSeal.title`
* **Titel für individuelle Logos**
  * `twt.widget.awards.customImage1.title`
  * `twt.widget.awards.customImage2.title`
  * `twt.widget.awards.customImage3.title`
  * `twt.widget.awards.customImage4.title`
  * `twt.widget.awards.customImage5.title`
  * `twt.widget.awards.customImage6.title`
* **Alternative URLs für individuelle Logos**
  * `twt.widget.awards.customImage1.url`
  * `twt.widget.awards.customImage2.url`
  * `twt.widget.awards.customImage3.url`
  * `twt.widget.awards.customImage4.url`
  * `twt.widget.awards.customImage5.url`
  * `twt.widget.awards.customImage6.url`
* **Alt-Attribut** (wird verwendet, wenn das Bild **nicht** verlinkt ist)
  * `twt.widget.awards.customImage1.alt`
  * `twt.widget.awards.customImage2.alt`
  * `twt.widget.awards.customImage3.alt`
  * `twt.widget.awards.customImage4.alt`
  * `twt.widget.awards.customImage5.alt`
  * `twt.widget.awards.customImage6.alt`
* **Aria-Label** (wird verwendet, wenn das Bild verlinkt ist)
  * `twt.widget.awards.customImage1.ariaLabel`
  * `twt.widget.awards.customImage2.ariaLabel`
  * `twt.widget.awards.customImage3.ariaLabel`
  * `twt.widget.awards.customImage4.ariaLabel`
  * `twt.widget.awards.customImage5.ariaLabel`
  * `twt.widget.awards.customImage6.ariaLabel`