> 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/shipping-logos.md).

# Shipping logos

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

<figure><img src="https://3369454551-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FyzUEL0OiJhd4m6fQWdQe%2Fuploads%2Fd7PYhPzCpaT5APco7RF1%2Fwidgets--shipping-methods.png?alt=media&amp;token=76e114ad-8545-45ea-aa0e-321d4f07ed36" alt=""><figcaption><p>ThemeWare® "Shipping logos" widget</p></figcaption></figure>

***

## 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").

{% 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 %}

#### 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.

{% hint style="success" %}
**Tip**: In the free [ThemeWare® Utilities](https://service.themeware.design/en/themeware-utilities) you will find a logo set with 40 pagespeed-optimised graphics for shipping methods.
{% endhint %}

### 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

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

* `twt.widget.shipping.customImage1.alt`
* `twt.widget.shipping.customImage2.alt`
* `twt.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.

{% hint style="info" %}
**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.
{% endhint %}

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