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.

Content

• Edit the headline using the snippet twt.widget.shipping.headline.

• Optional: Edit the link of the logos using the snippet twt.widget.shipping.link.

• For custom logos you maintain the alt and title texts via twt.widget.shipping.customImage1–3.alt / .title (see "Accessibility").

Note: For information on how to edit snippets, see the following instructions: Texts: Editing and translation

Tip: If a change does not affect the storefront, just clear the Shopware cache: Clearing / warming up the Shopware cache

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.

Accessibility

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

• twt.widget.shipping.customImage1.title

• twt.widget.shipping.customImage2.title

• twt.widget.shipping.customImage3.title

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

Alt attribute or Aria-Label

You can maintain the alt text of the logos using the following snippets:

• twt.widget.shipping.customImage1.alt

• twt.widget.shipping.customImage2.alt

• twt.widget.shipping.customImage3.alt

Note: The alt attribute remains empty when the logos are linked, because the aria-label is set on the link instead and the images are then only "decorative".

Aria label: Currently the title text is used as the aria-label on the link. In a future release we will check whether to combine all logos in one link, provide a separate snippet for the aria-label or add an invisible descriptive text.

---

Options

• Link logos

  • Makes the logos clickable; you set the link via the snippet twt.widget.shipping.link.

• Show fallback badges

  • Shows a text badge for shipping methods without a stored logo.

• Show only custom images

  • Shows only your own logos instead of the automatically determined shipping method logos.

---

Summary

Theme configuration

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

• Tab "Widgets" => Block "Shipping logos" => Section "Basic configuration" => Link logos / Show fallback badges / Show only custom images

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