> For the complete documentation index, see [llms.txt](https://docs.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.themeware.design/additional-features/widgets/awards-seals-or-certificates.md).

# Awards, seals or certificates

The widget "Awards, seals or certificates" is a widget for shop awards or trust badges or security certificates.

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2F6B6RgyzyycOdjXkk1yeS%2Fwidgets--awards.png?alt=media&amp;token=1efbc289-2e1b-47e1-8c3a-b6bf1aee149f" alt=""><figcaption><p>ThemeWare® "Awards, seals or certificates" widget</p></figcaption></figure>

***

## Configuration

You can configure the "Awards, seals or certificates" widget in the theme configuration.

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

### Content

* Edit the headline using the snippet `twt.widget.awards.headline`.
* Edit the text using the snippet `twt.widget.awards.content`.
  * Both are only displayed if the "Show additional text" option is enabled.
* You label the included SSL seal via `twt.widget.awards.sslSeal.alt` / `.title`.
* For custom logos you maintain the title, alt text (linked and non-linked) and alternative URL via `twt.widget.awards.customImage1–6.*` (see "Accessibility").

{% hint style="info" %}
**Note**: For information on how to edit snippets, see the following instructions: [Texts: Editing and translation](https://knowledge.themeware.design/knowledge-base/tutorials/texts-editing-and-translation)
{% endhint %}

{% hint style="success" %}
**Tip**: If a change does not affect the storefront, just clear the Shopware cache: [Clearing / warming up the Shopware cache](https://knowledge.themeware.design/knowledge-base/tutorials/miscellaneous/clearing-the-shopware-cache)
{% endhint %}

### Accessibility

Unfortunately, images such as certificates or seals that are integrated via the theme configuration do not automatically receive the alt text stored in the media management. To ensure that these images can still be integrated without barriers, **ThemeWare® provides separate snippets** for this purpose, which you can use individually.

#### Title

You can maintain the tooltip text (`title` attribute) using the following snippet:

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

The `title` is displayed on mouseover, but is **not relevant for accessibility**, as it is usually ignored by screen readers.

#### Alt attribute

The descriptive text is always placed in the `alt` attribute of the image. Which snippet is used for it depends on whether the image is linked or not:

* **Non-linked image**
  * The `alt` text describes the image itself and is maintained using the snippet `...customImageX.alt`.
* **Linked image**
  * The `alt` text describes the **destination of the link**, because here the link carries the actual meaning. The snippet `...customImageX.ariaLabel` is used for this.

{% hint style="info" %}
**Note**: An `aria-label` is no longer output on the `<a>` tag. This matches the approach Shopware uses for the shop logo in the header: The link does not carry a label of its own but takes it from the `alt` attribute of the image.
{% endhint %}

**Tip**: Use `alt` attributes to make your texts more detailed, specific and context-sensitive than the `title` text, for example.

Instead of just "SSL-encrypted", you could write, for example: "Your data is protected by SSL encryption". This also benefits screen reader users and at the same time makes it look more trustworthy for all visitors.

***

## Options

* **Show additional text**
  * Shows the headline and text (snippets `twt.widget.awards.headline` / `twt.widget.awards.content`).
* **Show default SSL seal**
  * Shows the included SSL seal (available in German and English).

***

## Summary

#### **Theme configuration**

* Tab "Widgets" => Block "Awards, seals or certificates"
* Tab "Widgets" => Block "Awards, seals or certificates" => Section "Basic configuration" => "Show additional text" / "Show default SSL seal"

#### Snippets

* **Headline**
  * `twt.widget.awards.headline`
* **Text**
  * `twt.widget.awards.content`
* **SSL seal**
  * Alt attribute: `twt.widget.awards.sslSeal.alt`
  * Title attribute: `twt.widget.awards.sslSeal.title`
* **Titles for custom 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 for custom 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 attribute** (used if the image is **not** linked)
  * `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 attribute** (used if the image is linked)
  * `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`