Suchvorschläge und Live-Suche in Shopware 6 gestalten

Was Shopware 6 im Suchfeld von Haus aus zeigt

Shopware 6 bringt eine Live-Suche mit, im Code „Suggest“ genannt. Sobald ein Kunde genug Zeichen eingegeben hat, fragt die Storefront im Hintergrund die Adresse /suggest ab und blendet das Ergebnis als Liste unter dem Suchfeld ein. Das Aussehen kommt aus dem Template search-suggest.html.twig, das Verhalten aus dem JavaScript-Plugin des Suchfelds.

Die Eckdaten in Shopware 6.7 sehen so aus:

Welche Produkte in der Liste landen, entscheidet die normale Shopware-Suche mit ihrer Gewichtung. Tippfehler, Synonyme und Reihenfolge verhalten sich im Suchfenster also genauso wie auf der Trefferseite. Wie Sie diese Grundlage einstellen, steht im Ratgeber Sucheinstellungen richtig konfigurieren.

Für kleine Sortimente reicht das oft aus. Je größer das Sortiment, desto deutlicher werden die Grenzen: zehn Produkte ohne Kategorien, keine Hilfe vor der Eingabe und je nach Konfiguration mehrere Varianten desselben Artikels untereinander.

Was gute Suchvorschläge ausmacht

Ein Suchfenster hat eine Aufgabe: den Kunden mit möglichst wenigen Eingaben an die richtige Stelle zu bringen. Das kann ein Produkt sein, eine Kategorie oder eine bessere Suchanfrage.

Produkte mit Bild, Preis und Verfügbarkeit

Kunden erkennen Produkte am Bild schneller als am Namen. Preis und Lieferbarkeit helfen bei der Entscheidung, ob sich der Klick lohnt. Wichtig ist, dass Varianten nicht die Liste füllen: Zehnmal derselbe Schuh in verschiedenen Größen verdrängt alle anderen Modelle. Besser ist ein Eintrag je Artikel, bei dem Größe oder Farbe im nächsten Schritt gewählt wird.

Kategorien und Hersteller

Wer „Regenjacke“ tippt, will oft erst einmal stöbern. Ein Link auf die Kategorie Regenjacken hilft dann mehr als zehn einzelne Jacken. Dasselbe gilt für Marken: Ein Treffer auf den Hersteller führt direkt zum passenden Sortiment.

Begriffsvorschläge

Ergänzungen wie „Regenjacke Damen“ oder „Regenjacke Kinder“ sparen Tipparbeit, vor allem am Handy, und zeigen, wie andere Kunden suchen. Schlagen Sie nur Begriffe vor, die tatsächlich Treffer liefern. Ein Vorschlag, der ins Leere führt, ist schlechter als gar keiner.

Ein klarer Weg zu allen Ergebnissen

Das Suchfenster ist eine Vorschau. Ein gut sichtbarer Knopf „Alle Ergebnisse anzeigen“ mit Trefferzahl führt auf die vollständige Trefferseite mit Filtern und Sortierung. Auch die Enter-Taste sollte dorthin führen.

Hilfe bei Tippfehlern

Beim schnellen Tippen entstehen Fehler, besonders auf dem Smartphone. Eine stille Korrektur oder ein „Meinten Sie …?“ verhindert, dass das Fenster leer bleibt. Wie fehlertolerante Suche funktioniert, erklärt der Ratgeber Tippfehler, Umlaute, Mehrzahl.

Der Startbereich: bevor der Kunde tippt

Der Moment, in dem jemand ins Suchfeld klickt, bleibt im Shopware-Standard ungenutzt. Bis zur ersten Eingabe passiert nichts. Dabei ist das ein guter Platz für Orientierung:

• Beliebte Suchen zeigen, wonach andere suchen, und sind mit einem Klick erreichbar.
• Meistgeklickte oder meistverkaufte Produkte sind ein Einstieg für Kunden, die noch nicht genau wissen, was sie wollen.
• Neuheiten oder Aktionen sprechen Stammkunden an, die regelmäßig vorbeischauen.
• Kategorien zum Entdecken als kleine, feste Auswahl, keine Kopie des Hauptmenüs.

Achten Sie darauf, dass dort nur lieferbare Artikel erscheinen. Ein ausverkaufter Bestseller ganz oben enttäuscht, bevor die Suche überhaupt begonnen hat.

Mobil und per Tastatur gut bedienbar

Am Smartphone gelten eigene Regeln:

• Das Suchfenster sollte den Bildschirm füllen, damit die Bildschirmtastatur nicht die Hälfte der Treffer verdeckt.
• Treffer brauchen große Tippflächen. Zwei Spalten mit Bild funktionieren meist besser als eine lange Textliste.
• Ein deutlicher Schließen-Knopf gehört dazu, ebenso das Löschen der Eingabe mit einem Tipp.
• Das Suchfeld selbst sollte die volle Breite nutzen, damit auch längere Eingaben lesbar bleiben.

Am Desktop zählt die Tastatur. Shopware liefert hier eine gute Vorlage: Mit dem Pfeil nach unten gelangt man in die Vorschlagsliste, mit den Pfeiltasten wechselt man zwischen den Einträgen, und die Liste ist für Screenreader als Auswahlliste ausgezeichnet. Eine eigene Lösung sollte das mindestens genauso gut können. Dazu gehört auch, dass Enter die Trefferseite öffnet und Escape das Fenster schließt.

Geschwindigkeit: Treffer sollen sich sofort anfühlen

Eine Live-Suche, die dem Tippen hinterherhinkt, wirkt kaputt. Zwei Dinge bestimmen das Gefühl: die Wartezeit nach dem letzten Tastendruck und die Antwortzeit des Servers. Shopware wartet 250 Millisekunden, bevor es anfragt, damit nicht jeder einzelne Buchstabe eine Anfrage auslöst. Danach hängt alles davon ab, wie schnell der Shop die Treffer liefert.

Bei großen Sortimenten mit der Standard-Datenbanksuche kann das spürbar dauern. Elasticsearch oder OpenSearch beschleunigen die Suche, bedeuten aber eigenen Betriebsaufwand. Wann sich das lohnt, beschreibt der Ratgeber Elasticsearch/OpenSearch in Shopware.

Prüfen Sie die Geschwindigkeit nicht nur im Büro am schnellen Anschluss, sondern auch am Handy im Mobilfunknetz. Und achten Sie darauf, dass Ergebnisse nicht durcheinandergeraten: Kommt eine ältere Anfrage nach einer neueren an, darf sie die aktuellen Treffer nicht überschreiben.

Häufige Fehler bei Suchvorschlägen

• Zu spät starten. Wird die Mindestlänge hoch gesetzt, bekommen Kunden bei kurzen Begriffen wie „Tee“ oder bei Markenkürzeln keine Vorschläge.
• Leeres Fenster bei null Treffern. „Keine Ergebnisse“ ohne Alternative beendet die Suche. Besser sind ein Schreibvorschlag, beliebte Artikel oder ein Hinweis auf den Kundenservice. Wie Sie solche Suchen finden und senken, steht unter Suchen ohne Treffer.
• Varianten fluten die Liste. Zehn Plätze, belegt von einem einzigen Artikel in zehn Größen.
• Ausverkaufte Artikel ganz oben. Sie wirken wie ein Treffer und enden doch in einer Sackgasse.
• Nur Produkte, keine Inhalte. Wer „Versand“ oder „Rückgabe“ sucht, braucht eine Informationsseite. Umleitungen oder Treffer aus Ratgeber- und Serviceseiten helfen.
• Artikelnummern werden nicht gefunden. Gerade Geschäftskunden tippen Nummern ins Suchfeld. Wie Sie das absichern, erklärt der Ratgeber Artikelnummern, EAN und Herstellernummern finden.
• Anpassungen, die das Fenster beschädigen. Überschriebene Templates oder Theme-Stile, die die Liste am Handy abschneiden. Testen Sie das Suchfenster nach jedem Theme- und Shopware-Update kurz von Hand.

Die Wirkung der Suchvorschläge messen

Ob ein neues Suchfenster etwas bringt, sehen Sie nur, wenn Sie vorher und nachher dieselben Zahlen erheben:

• Klickrate: Anteil der Suchen, nach denen ein Treffer angeklickt wurde.
• Nulltreffer-Quote: Anteil der Suchen, die gar nichts finden.
• Weg zur Trefferseite: Wie oft wird „Alle Ergebnisse“ oder Enter genutzt? Ein sehr hoher Anteil kann heißen, dass die Vorschläge nicht überzeugen.
• Bestellungen nach einer Suche: der Wert, auf den es am Ende ankommt.

Vorsicht bei Google Analytics: Klickt ein Kunde im Suchfenster direkt auf ein Produkt, wird keine Trefferseite aufgerufen. Über den Suchparameter in der Adresse erkennt Google Analytics diese Suche deshalb nicht. Die in Shopware eingebaute Google-Analytics-Anbindung sendet beim Tippen zwar ein Ereignis search, allerdings für jeden Zwischenstand der Eingabe. Wie Sie trotzdem saubere Zahlen bekommen, beschreibt der Ratgeber Kennzahlen der Shopsuche.

Vergleichen Sie gleich lange Zeiträume und achten Sie auf Saison und Aktionen. Eine Woche im Weihnachtsgeschäft gegen eine Woche im Februar sagt wenig.

So löst Suchklar das Suchfenster

Suchklar ersetzt die Shopware-Suche durch ein eigenes Suchfenster. Beim Klick ins Suchfeld zeigt es beliebte Suchen, Kategorien zum Entdecken und die meistgeklickten lieferbaren Produkte. Ab dem zweiten Buchstaben erscheinen Produkte, Kategorien, Hersteller und Filter. Varianten wie Größe oder Farbe wählt der Kunde direkt auf der Produktkarte, Tippfehler werden korrigiert, und „Alle Ergebnisse anzeigen“ öffnet die vollständige Trefferseite des Shops.

Für die Darstellung gibt es fünf Layouts, je Verkaufskanal wählbar: Fenster, Volle Breite, Leiste oben, Kompakt und Seitenleiste. Auf dem Smartphone öffnet sich das Suchfenster immer bildschirmfüllend. Findet eine Suche nichts, zeigt Suchklar statt einer leeren Fläche beliebte Artikel und häufige Suchen. Ausprobieren können Sie das im Demo-Shop.