> 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="/files/sQZ6nEE8RU3A8eOHEcDM" 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 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`

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

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