---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)
- [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)
- [Suche und Suchergebnisseite einrichten](https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten)
# Suche und Suchergebnisseite einrichten
Die Suche besteht aus dem Suchfeld mit Vorschlägen im Shop-Header und der Suchergebnisseite mit Suchbegriff, Trefferzahl, Filtern und Produktraster. Vorschläge und Treffer liefert die Such- oder Commerce-App über Orchestr, die Qualität der Suche hängt also vom angebundenen Suchdienst ab.
## Bevor du startest
- Tarif
- Laioutr-Commerce-Plan
- Rolle
- Editor oder Admin im Projekt
- Dauer
- 6 Min.
### Voraussetzungen
- Commerce-App mit Suchfunktion oder eigene Such-App installiert
- Shop-Header als globale Section vorhanden
Zuletzt geprüft am 15. Oktober 2026
Die Suche in Laioutr UI hat zwei Teile. **Search Auto-Suggest** sitzt im Shop-Header und wird dort einmal für alle Seiten eingebunden. Beim Tippen erscheinen Vorschläge in einem Overlay, der eingegebene Teil ist fett hervorgehoben, und die Pfeiltasten, Enter und Escape funktionieren ohne Maus.
Mit Enter öffnet sich die **Suchergebnisseite**. Ganz oben wiederholt der **Search Result Hero** den Suchbegriff und zeigt die Trefferzahl. Darunter folgen Filter Bar, Product Listing Grid und Load More, also dieselben Bausteine wie auf Kategorieseiten. Findet die Suche nichts, sollte die Seite nicht in einer Sackgasse enden, sondern zum Beispiel Empfehlungen zeigen.
Laioutr selbst durchsucht keine Produkte. Vorschläge, Treffer, Filter und Sortierung kommen von der App, die die Suche bereitstellt: der Standardsuche des Shopsystems über die Commerce-App, einer Such-App wie Battery Included oder Nimstrata für Google Retail oder dem Add-on AI Search & Discovery. Die Oberfläche bleibt gleich, wenn der Suchdienst wechselt.
## Schritt für Schritt
1. 1 ### Schritt 1: Such-App prüfen
Im Cockpit unter **Apps** prüfen, welche App die Suche liefert und ob ihre Verbindung aktiv ist.
2. 2 ### Schritt 2: Header kontrollieren
In **Studio** den Shop-Header (globale Section) öffnen und prüfen, ob das Suchfeld sichtbar ist. Es wird einmal im Header eingebunden und gilt für alle Seiten.
3. 3 ### Schritt 3: Suchergebnisseite öffnen
Die Suchergebnisseite in der Seitenliste wählen und prüfen, ob Search Result Hero, Filter Bar und Product Listing Grid in dieser Reihenfolge im Body liegen.
4. 4 ### Schritt 4: Fall ohne Treffer bedenken
Auf der Seite Inhalte ergänzen, die bei leerem Ergebnis weiterhelfen, zum Beispiel einen Product Slider mit beliebten Produkten.
5. 5 ### Schritt 5: In der Vorschau suchen
In der Vorschau einen Begriff eintippen, Vorschläge prüfen und mit Enter die Ergebnisseite öffnen. Danach einen Begriff ohne Treffer testen.
6. 6 ### Schritt 6: Speichern und veröffentlichen
Mit **Save** speichern und mit **Publish** veröffentlichen.
## Ergebnis prüfen
In der Storefront einen bekannten Produktnamen eingeben: Vorschläge erscheinen beim Tippen, nach Enter zeigt die Ergebnisseite den Suchbegriff mit Trefferzahl, und Filter grenzen die Treffer ein. Ein Begriff ohne Treffer führt nicht auf eine leere Seite.
## Häufige Fragen
Warum findet die Suche Produkte nicht, die es im Shop gibt?
Die Treffer kommen vollständig vom Suchdienst der installierten App. Indexierung, Synonyme und Tippfehlertoleranz werden dort eingestellt, nicht in Studio.
Lässt sich der Suchdienst wechseln, ohne die Seiten umzubauen?
Ja. Suchfeld und Ergebnisseite bekommen ihre Daten über Orchestr. Nach dem Wechsel der App bleiben die Sections gleich; zu prüfen sind vor allem Filter und Sortierungen, die der neue Dienst liefert.
Wo wird festgelegt, welche Vorschläge erscheinen?
Im Suchdienst bzw. in der App. Das Suchfeld zeigt an, was die App als Vorschläge zurückgibt.
## Passend dazu
- [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.
Eine Produktliste entsteht in Studio aus Product Listing Grid, Filter Bar und Sortierung; Produkte, Filter und Sortieroptionen liefert die angebundene Commerce-App über Orchestr. Welche Filter erscheinen, hängt davon ab, was das Backend bereitstellt.
- [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
Header Shop, Mega Menu oder Menu Side by Side, Top Bar und Footer bilden die Navigation einer Storefront und werden meist als globale Sections gepflegt. In Studio werden Menüpunkte, Suche, Service-Links, Kontaktangaben und Footer-Spalten einmal eingerichtet und je Sprache angepasst.
- [Battery Included: Suche und Empfehlungen anbinden](https://academy.laioutr.com/apps/battery-included-suche-und-empfehlungen)8 Min.
Die App Battery Included liefert Volltextsuche, Suchvorschläge und Produktempfehlungen aus einer BatteryIncluded-Collection in die Storefront. Benötigt werden die Collection-ID, ein API-Key und eine Commerce-App wie Shopify für die Produktdaten.
- [Nimstrata: KI-Suche und Empfehlungen über die Google Retail API](https://academy.laioutr.com/apps/nimstrata-ki-suche-und-empfehlungen-google-retail)10 Min.
Die App Nimstrata verbindet die Storefront über Retail Connect mit der Google Retail API: KI-gestützte Suche, Kategorielisten, Suchvorschläge, Empfehlungen und Event-Tracking. Voraussetzung sind ein Nimstrata-Projekt mit Katalog und die Shopify-App im selben Projekt.
## [Produkte und Kategorien](https://academy.laioutr.com/leitfaeden/produkte-und-kategorien)
In diesem Leitfaden suchen
1. [Produktlisten mit Filter und Sortierung einrichten](https://academy.laioutr.com/artikel/produktlisten-mit-filter-und-sortierung-einrichten)6 Min.
2. [Produktdetailseite und Datenblatt gestalten](https://academy.laioutr.com/artikel/produktdetailseite-und-datenblatt-gestalten)7 Min.
3. [Produktkacheln und Produktslider einsetzen](https://academy.laioutr.com/artikel/produktkacheln-und-produktslider-einsetzen)5 Min.
4. [Markenseiten und Markenübersicht aufbauen](https://academy.laioutr.com/artikel/markenseiten-und-markenuebersicht-aufbauen)6 Min.
5. [Suche und Suchergebnisseite einrichten](https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten)6 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#/schema/question/3"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront-Funktionen",
"item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
"position": 2
},
{
"@type": "ListItem",
"name": "Produkte und Kategorien",
"item": "https://academy.laioutr.com/leitfaeden/produkte-und-kategorien",
"position": 3
},
{
"@type": "ListItem",
"name": "Suche und Suchergebnisseite einrichten",
"item": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Warum findet die Suche Produkte nicht, die es im Shop gibt?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Die Treffer kommen vollständig vom Suchdienst der installierten App. Indexierung, Synonyme und Tippfehlertoleranz werden dort eingestellt, nicht in Studio.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Lässt sich der Suchdienst wechseln, ohne die Seiten umzubauen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ja. Suchfeld und Ergebnisseite bekommen ihre Daten über Orchestr. Nach dem Wechsel der App bleiben die Sections gleich; zu prüfen sind vor allem Filter und Sortierungen, die der neue Dienst liefert.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Wo wird festgelegt, welche Vorschläge erscheinen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Im Suchdienst bzw. in der App. Das Suchfeld zeigt an, was die App als Vorschläge zurückgibt.
"
}
}
]
}
```