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.titletwt.widget.shipping.customImage2.titletwt.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
You can maintain the alt text of the custom logos using the following snippets:
twt.widget.shipping.customImage1.alttwt.widget.shipping.customImage2.alttwt.widget.shipping.customImage3.alt
For the automatically determined shipping method logos, the alt text comes from the alternative text of the media item in Shopware, or from the name of the shipping method as a fallback.
Note: When the logos are linked, the alt text no longer describes the logo but the destination of the link. The text is inserted into the following snippet for this purpose:
twt.widget.shipping.linkAlt(default:Shipping information about %name%)
The placeholder %name% is replaced by the alt text of the respective logo. Without linking, the snippet is not applied.
This is the same 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. No aria-label is output.
Options
- Link logos
- Makes the logos clickable; you set the link via the snippet
twt.widget.shipping.link.
- Makes the logos clickable; you set the link via the snippet
- 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.alttwt.widget.shipping.customImage1.titletwt.widget.shipping.customImage2.alttwt.widget.shipping.customImage2.titletwt.widget.shipping.customImage3.alttwt.widget.shipping.customImage3.title