Payment logos

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

ThemeWare® "Payment logos" widget

---

Configuration

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

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

Content

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

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

• For custom logos you maintain the alt and title texts via twt.widget.payment.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 payment methods

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

Payment method logos

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

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

Accessibility

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

• twt.widget.payment.customImage1.title

• twt.widget.payment.customImage2.title

• twt.widget.payment.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.payment.customImage1.alt

• twt.widget.payment.customImage2.alt

• twt.widget.payment.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.payment.link.

• Show fallback badges

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

• Show only custom images

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

---

Summary

Theme configuration

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

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

Snippets

• Headline

  • twt.widget.payment.headline

• Link for logos (optional)

  • twt.widget.payment.link

• Custom logos

  • twt.widget.payment.customImage1.alt

  • twt.widget.payment.customImage1.title

  • twt.widget.payment.customImage2.alt

  • twt.widget.payment.customImage2.title

  • twt.widget.payment.customImage3.alt

  • twt.widget.payment.customImage3.title