> 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="https://2276716575-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHZ42X804kUeKKTtIEUr2%2Fuploads%2FYSxgY2VeCffZKeUxUd2u%2Fwidgets--awards.png?alt=media&amp;token=667ca721-8a54-4175-bdaf-ea7336e42037" 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 (verlinkt und nicht verlinkt) 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

Der beschreibende Text steht immer im `alt`-Attribut des Bildes. Welcher Textbaustein dafür herangezogen wird, hängt davon ab, **ob das Bild verlinkt ist oder nicht**:

* **Nicht verlinktes Bild**
  * Der `alt`-Text beschreibt das Bild selbst und wird über den Baustein `...customImageX.alt` gepflegt.
* **Verlinktes Bild**
  * Der `alt`-Text beschreibt das **Ziel des Links**, denn hier trägt der Link die eigentliche Bedeutung. Dafür wird der Baustein `...customImageX.ariaLabel` verwendet.

{% hint style="info" %}
**Hinweis**: Ein `aria-label` am `<a>`-Tag wird nicht mehr ausgegeben. Das entspricht der Vorgehensweise, die Shopware beim Shop-Logo im Header verwendet: Der Link trägt keine eigene Beschriftung, sondern übernimmt sie aus dem `alt`-Attribut des Bildes.
{% endhint %}

**Tipp**: Gestalte deine `alt`-Texte 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`
* **Alt-Attribut** (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`