# Search Overlay

### Übersicht

Das Such Overlay ist ein temporäres Suchfeld oder ein Suchfenster, das über den aktuellen Inhalt der Seite gelegt wird. Es ermöglicht dem Benutzer, direkt auf der aktuellen Seite nach Inhalten oder Produkten zu suchen, ohne die Seite zu verlassen. 

Das Overlay verschwindet, wenn die Suche abgeschlossen ist oder der Benutzer es schließt. Es verbessert die Benutzerfreundlichkeit, da es eine schnelle und unkomplizierte Möglichkeit bietet, nach gesuchten Informationen zu suchen, ohne die Navigation deines Shops zu unterbrechen.

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/RzGVUEjGYEPYW3amcTh9/header-such-overlay.webp" alt=""><figcaption><p>Such Overlay unseres Kunden <a href="https://donari.de/">https://donari.de/</a></p></figcaption></figure>

Das Such Overlay wird immer auf mobilen Endgeräten verwendet. Für Tablet und Desktop kannst du mit der Einstellung [Layout der Suche](https://docs.atloss.de/en/theme-configuration/header#layout-der-suche) in der Sektion "Header" das Such Overlay aktivieren bzw. deaktivieren. Des Weiteren kannst du es mit folgenden Konfigurationen weiter auf deine Bedürfnisse anpassen und bis zu vier Bilder hinterlegen.

### Konfiguration

<figure><img src="https://content.gitbook.com/content/33GKvYy9I8ydtLM82CBS/blobs/hGe4qirEpKOepdRJRLnO/header-such-overlay-konfiguration.webp" alt=""><figcaption></figcaption></figure>

<details>

<summary>Erste Spalte</summary>

Hinterlege das Bild für die erste Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayOneDescription`\
Standardwert: Erste Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayOneLink`\
Standardwert: /

</details>

<details>

<summary>Zweite Spalte</summary>

Hinterlege das Bild für die zweite Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayTwoDescription`\
Standardwert: Zweite Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayTwoLink`\
Standardwert: /

</details>

<details>

<summary>Dritte Spalte</summary>

Hinterlege das Bild für die dritte Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayThreeDescription`\
Standardwert: Dritte Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayThreeLink`\
Standardwert: /

</details>

<details>

<summary>Vierte Spalte</summary>

Hinterlege das Bild für die vierte Spalte.

***

Standardmäßig wird eine Bezeichnung unterhalb der Kategorie ausgegeben. Den Inhalt kannst du in den [Textbausteinen](https://docs.shopware.com/de/shopware-6-de/einstellungen/Textbausteine) jederzeit auf deine Bedürfnisse anpassen und übersetzen. Zusätzlich lässt sich noch eine Verlinkung konfigurieren.

**Bezeichnung**\
Name: `theme.header.search-overlay.searchOverlayFourDescription`\
Standardwert: Vierte Kategorie

**Link**\
Name: `theme.header.search-overlay.searchOverlayFourLink`\
Standardwert: /

</details>