Shipping logos

The widget "Shipping methods" is a widget with which you can display the shipping methods you offer with their logos.

ThemeWare® "Shipping logos" widget

---

Configuration

You can configure the "Shipping logos" widget in the theme configuration.

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

Editing texts

You can change or translate the texts 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.

Configuring shipping methods

You configure the actual shipping methods in Shopware 6 via the corresponding administration in the Shopware settings ("Settings" > "Shop").

Shipping method logos

You can upload your logos for the corresponding shipping methods via the shipping management in the Shopware settings.

Tip: In the free ThemeWare® Utilities you will find a logo set with 40 pagespeed-optimised graphics for shipping methods.

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 bzw. Aria-Label

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

Hinweis: Das alt-Attribut bleibt leer, wenn die Logos verlinkt werden, weil stattdessen das aria-label am Link gesetzt wird und die Bilder dann nur "dekorativ" sind.

Aria-Label: Derzeit wird der title-Text als aria-label im Link benutzt. Wir prüfen in einem kommenden Release ob wir alle Logos in einem Link zusammenfassen, einen separaten Textbaustein für das aria-label bereitstellen oder einen unsichtbaren beschreibenden Text hinzufügen.

---

Summary

Theme configuration

• Tab "Widgets" => Block "Shipping logos"

Snippets

• Headline

  • twt.widget.shipping.headline

• Link for logos (optional)

  • twt.widget.shipping.link

• Custom 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