Awards, seals or certificates
Last updated
Was this helpful?
Last updated
Was this helpful?
The widget "Awards, seals or certificates" is a widget for shop awards or trust badges or security certificates.
You can configure the "Awards, seals or certificates" widget in the theme configuration.
You can find the configuration in the "Widgets" tab.
You can change or translate the texts and links used in the widget using snippets.
You can find out which snippets are used in the corresponding help texts for the respective configurations. The snippets in the ThemeWare® help texts are linked so that you can go directly to the editor of the corresponding snippet.
You can also find an overview of the snippets used further down in this article.
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.
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.
Whether you use the alt
or the aria-label
depends on whether the image is linked or not:
Alt attribute (for non-linked images)
If the image is not linked, the alt.
Text isintegrated directly into the img
tag. This is controlled by the appropriate snippet.
Aria label (for linked images)
If the image is linked to content, the alt
attribute of the image remains empty (alt=""
). Instead, the descriptive text is set directly on the <a>
tag using an aria-label
– because here the link carries the actual meaning and the images are for "decorative" purposes only.
Tip: Use alt
and aria-label
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.
Tab "Widgets" => Block "Awards, seals or certificates"
Headline
twt.widget.awards.headline
Text
twt.widget.awards.content
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
Aria label (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