> 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/extensions/floating-widget.md).

# Floating widget

With ThemeWare® you can use the "Floating widget" of our Shopware 5 themes in your Shopware 6 shop as well, for example to display contact information prominently.

<figure><img src="/files/DuVFrZRadiE8EryUQleN" alt=""><figcaption><p>ThemeWare® "Floating widget"</p></figcaption></figure>

{% hint style="info" %}
**Note**: The floating widget is shown if the "Show floating widget" configuration is enabled. The content is maintained via snippets.
{% endhint %}

***

## Configuration

### **Theme configuration**

1. Go to the tab "**Extensions**"
2. Expand the block "**Floating widget**"
3. Enable the floating widget with the configuration "**Show floating widget**"
4. Save your changes after editing

### **Content**

* Edit the title and text of the floating widget using the following snippets:
  * `twt.extension.floatingWidget.title`
  * `twt.extension.floatingWidget.body`
* Optional: Edit the link URL using the snippet `twt.extension.floatingWidget.link` (only used if the "Link widget" configuration is enabled)

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

***

## Options

* **Show floating widget @Phone (<768px)**
  * Controls whether the widget appears on smartphones (<768px).
* **Position**
  * Places the widget "left" or "right".
* **Hover effect**
  * "no effect", "pull out" or "reduce opacity".
* **Show overlay (if opended)**
  * Places a dimming overlay over the page while the widget is open.
* **Show opened (when the page has been loaded)**
  * Opens the widget automatically when the page loads.
* **Animate (when the page has been loaded)**
  * "no animation" or "Wobble (3x)".
* **Link widget**
  * Makes the widget clickable: "no", "yes" or "yes (open in new tab)". You set the target URL via the snippet `twt.extension.floatingWidget.link`.

In addition, the size, padding, alignment and the distance to the page edge as well as colors, font and a background image can be adjusted.

***

## Summary

#### Theme configuration

* Tab "Extensions" => Block "Floating widget" => Show floating widget / Show floating widget @Phone (<768px)
* Tab "Extensions" => Block "Floating widget" => Section "Basic configuration" => Position / Hover effect / Show overlay / Show opened / Animate / Link widget

#### Snippets

* **Title**
  * `twt.extension.floatingWidget.title`
* **Text**
  * `twt.extension.floatingWidget.body`
* **Link**
  * `twt.extension.floatingWidget.link`
* **Alt text** (image)
  * `twt.extension.floatingWidget.altText`
* **Aria label** (Widget)
  * `twt.extension.floatingWidget.ariaLabel`
* **Aria label** (Button)
  * `twt.extension.floatingWidget.closeAriaLabel`
  * `twt.extension.floatingWidget.openAriaLabel`
* **Aria label** (Link)
  * `twt.extension.floatingWidget.linkAriaLabel`