Kestrels FAQ-Seite war so lang geworden, dass Kunden an der gesuchten Antwort vorbeiscrollten. Der Händler zeigte uns die Hilfeseite eines Mitbewerbers mit einem Suchfeld im Kopfbereich und wünschte sich dasselbe: ein Wort tippen, nur passende Fragen sehen.
Das ist die Geschichte dieser Shopify FAQ-Suche: das Snippet, der Fehler, durch den die erste Version im Live-Shop nichts fand, und die Lösung, die sich als Lektion über Inline-Skripte in Shopify-Themes herausstellte.
Zu dieser Fallstudie: Sie ist eine Zusammenstellung aus echter Shopify-Projektarbeit. Markenname und einige Details wurden geändert. Code, Fehler und Lösung sind genau so passiert.
Warum nicht die Shopify-Suche nutzen?
Die Shop-Suche von Shopify umfasst Produkte, Kollektionen, Seiten und Blogartikel. Text, den Händler in Section-Blöcke des Themes eintragen, also dort, wo die meisten FAQ-Sections ihre Fragen speichern, ist nicht Teil dieses Index. Wer im Shop nach „retour“ sucht, findet Produkte, aber nicht die Antwort zur Rückgabe.
Die FAQ-Antworten stehen aber bereits im HTML der Seite. Sie im Browser zu filtern braucht keinen Request, keine App und keinen Index. Die Ergebnisse erscheinen, während noch getippt wird.
Version eins: ein Snippet und eine Render-Zeile
Der Händler bearbeitet das Theme im Code-Editor, deshalb hielten wir die Änderung so klein wie möglich: ein neues Snippet mit Markup, Styles und Skript und eine Zeile in der FAQ-Section, die es ausgibt.
{%- render 'faq-search', section: section -%}
<div class="faqs ..."> <!-- the theme's existing FAQ markup -->Das Skript ist ein kleines Custom Element. Bei jeder Eingabe macht es vier Dinge:
- Es normalisiert den Text: Kleinbuchstaben und ohne Akzente, sodass „e“ auch „é“ findet.
- Es zerlegt die Suche in Wörter und behält eine Frage nur, wenn sie alle enthält, im Titel oder in der Antwort.
- Es blendet eine ganze Kategorie samt Überschrift aus, wenn keine ihrer Fragen passt.
- Es zeigt die Meldung „keine Fragen gefunden“ mit einem Hinweis auf den Support, wenn gar nichts passt.
Wir testeten es an einer Kopie des FAQ-Markups in einem Headless-Browser. Jede Suche lieferte die richtigen Fragen. Wir schickten es los.
Der Screenshot
Die Antwort kam mit einem Screenshot. Der Händler hatte einen ganzen Satz aus einer Antwort ins Suchfeld kopiert. Die Seite zeigte „keine Fragen gefunden“, und darunter waren trotzdem alle Fragen sichtbar. Nichts war ausgeblendet, nichts gefunden.
Beide Symptome zeigten auf dasselbe: Das Skript glaubte, die Seite habe keine Fragen. Wir öffneten die Live-Seite und fragten das Element direkt. Die Seite hatte zwei FAQ-Gruppen mit sieben Fragen. Die Gruppenliste des Such-Elements war leer.
Die Ursache: ein Inline-Skript, das zu früh läuft
Das Snippet wird über den Fragen ausgegeben, und sein <script>-Tag steckt im Snippet. Der Browser liest HTML von oben nach unten. Erreicht er das Skript, definiert er das Custom Element, und weil <faq-search> schon im Dokument steht, läuft dessen connectedCallback sofort. In diesem Moment hat der Parser die Fragen darunter noch nicht erreicht.
Unsere erste Version suchte die FAQ-Gruppen in connectedCallback und speicherte sie. Gespeichert wurde eine leere Liste, einmal und für immer. Unser Test war nur bestanden, weil die Testseite das Skript zufällig nach den Fragen hatte.
Die Lösung ist ein einziger Getter. Statt die Gruppen beim Einhängen zu speichern, sucht das Skript sie bei jeder Eingabe neu:
get groups() {
return Array.from(this.closest('.section').querySelectorAll('.faq'));
}Wenn jemand tippt, ist die Seite längst vollständig geladen. Die Suche kostet bei ein paar Dutzend Fragen praktisch nichts und funktioniert auch dann, wenn der Theme-Editor die Section beim Bearbeiten neu rendert, was eine gespeicherte Liste nicht könnte.
Ein zweiter, leiserer Fehler
Beim Umzug in das endgültige Snippet fanden wir noch ein Problem. Die CSS-Regel zum Ausblenden war als .faq [data-faq-hidden] geschrieben, mit Leerzeichen. Sie blendet Fragen innerhalb einer Gruppe aus, aber nicht die Gruppe selbst, sodass eine Kategorieüberschrift ohne Inhalt stehen bleiben konnte. Die Regel deckt jetzt beides ab: .faq [data-faq-hidden], .faq[data-faq-hidden].
Dort testen, wo es läuft
Diesmal testeten wir auf der echten FAQ-Seite selbst, indem wir die korrigierte Logik im Browser gegen das echte Markup laufen ließen, bevor der Händler etwas ändern musste.
| „levertijd“ | Nur die Frage zur Lieferzeit |
| „garantie“ | Die Garantiefragen aus zwei verschiedenen Kategorien |
| „€70 gratis“ | Nur die Frage zu den Versandkosten, gefunden über die Antwort |
| „retour“ | Nur die Rückgabe-Frage, die andere Kategorie ausgeblendet |
| „xyz“ | Nichts, mit der Meldung „keine Fragen gefunden“ |
Was wir mitgenommen haben
- Teste in der Reihenfolge der echten Seite. Ein Custom Element, das in einem Inline-Skript definiert wird, sieht nur das HTML darüber.
- Speichere DOM-Abfragen nicht in
connectedCallback, wenn du nicht weißt, dass der Inhalt schon existiert. Ein Getter ist einfacher als aufDOMContentLoadedzu warten und übersteht Neurenderings im Theme-Editor. - Wenn ein Händler einen Screenshot schickt, lies die Symptome zusammen. „Keine Ergebnisse“ plus „nichts ausgeblendet“ grenzte den Fehler ein, bevor wir die Konsole öffneten.
Die Suche wurde später Teil einer kompletten Hilfeseite; darüber schreiben wir in unserer Fallstudie zur Shopify-FAQ-Seitenvorlage. Das Produktseiten-Angebot für denselben Shop findest du bei der Kauf eins, bekomm eins gratis-Auswahl. Braucht deine FAQ oder ein anderer Teil deines Themes solche Arbeit, sieh dir unsere Shopify-Theme-Entwicklung an.
Häufige Fragen
Schadet eine FAQ-Suchleiste der SEO?
Nein. Alle Fragen und Antworten bleiben im HTML. Sie werden nur im Browser der Kundin ausgeblendet, nachdem sie etwas eingetippt hat.
Brauche ich eine App für die Suche auf einer Shopify-FAQ-Seite?
Nein. Weil die Fragen schon auf der Seite stehen, kann ein kleines Skript sie filtern. Das ist schneller als eine App und kostet nichts im Monat.
Funktioniert das mit einer großen FAQ?
Ja. Ein paar hundert Fragen im Browser zu filtern geht sofort. Darüber hinaus ist es für Kunden meist ohnehin besser, die FAQ auf mehrere Seiten aufzuteilen.
Durchsucht sie auch die Antworten?
Ja. Jede Frage wird über Titel und Antworttext abgeglichen, ohne Akzente, und alle Wörter der Suche müssen vorkommen.