Als die FAQ-Suchleiste live war, schickte Kestrels Gründer einen weiteren Link: die Hilfeseite eines Mitbewerbers mit farbigem Kopfbereich, einem Suchfeld in der Mitte, nach Themen gruppierten Fragen und einer Leiste „Noch Fragen?“ am Ende. Können wir genau das bekommen, als neue Vorlage, ohne die aktuelle FAQ-Seite anzufassen? Einen Tag später kam Wunsch Nummer zwei: Und könnt ihr den ganzen Inhalt einfüllen, damit wir nichts abtippen müssen?
Diese Fallstudie behandelt beide Hälften: die Shopify-FAQ-Seitenvorlage selbst und die weniger glamouröse Arbeit, 41 Antworten zu schreiben, die tatsächlich stimmen.
Zu dieser Fallstudie: Sie ist eine Zusammenstellung aus echter Shopify-Projektarbeit. Markenname und einige Details wurden geändert. Section-Code, Grenzen und Inhaltsprobleme sind genau so, wie wir sie gelöst haben.
Das Projekt auf einen Blick
| Lieferumfang | 1 neue Section, 1 neue Seitenvorlage, keine Änderungen an bestehenden Dateien |
| Layout | Farbiger Kopf mit Suche, Kategorien mit Akkordeons, Kontaktleiste |
| Inhalt | 7 Kategorien, 41 Fragen, geschrieben aus den eigenen Richtlinien des Shops |
| Strukturierte Daten | FAQPage-JSON-LD aus den Frage-Blöcken generiert |
| Bearbeitung | Jede Überschrift, Frage, Antwort und Farbe im Theme-Editor änderbar |
Eine neue Vorlage, damit nichts anderes kaputtgehen kann
Die bestehende FAQ-Seite nutzte die FAQ-Section des Themes mit einem Kontaktformular daneben. Statt sie umzubauen, legten wir eine eigene Section an, faq-page.liquid, und eine Seitenvorlage, page.faq-2.json, die sie verwendet. Der Händler weist die Vorlage im Admin einer Seite zu. Die alte Seite funktioniert weiter, bis er umstellt, und zurück geht es mit einem Dropdown.
So ist die Section aufgebaut
Die Section hat zwei Blocktypen, Kategorie und Frage, in einer flachen Liste. Im Theme-Editor ist das leicht zu überblicken: Jede Frage gehört zur Kategorie darüber, und ein verschobener Block wechselt die Kategorie. In Liquid öffnet eine kleine Schleife bei jeder Kategorie eine neue Gruppe und schließt die vorherige:
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'category' -%}
{%- unless forloop.first -%}</div>{%- endunless -%}
<div class="faqp__group" data-faqp-group>
<h2>{{ block.settings.title | escape }}</h2>
{%- when 'question' -%}
<details class="faqp__item" data-faqp-item>…</details>
{%- endcase -%}
{%- if forloop.last -%}</div>{%- endif -%}
{%- endfor -%}- Native Akkordeons. Jede Frage ist ein
<details>-Element, Öffnen und Schließen braucht also kein JavaScript und funktioniert mit der Tastatur. - Suche eingebaut. Dieselbe Filterlogik wie das frühere Snippet, aber auf die Section begrenzt und mit Abfrage beim Suchen.
- Strukturierte FAQPage-Daten. Die Section schreibt JSON-LD aus den Frage-Blöcken, sodass das Markup immer zur Seite passt.
- Einstellungen statt Code. Farben im Kopf, Textfarbe, Buttonfarbe, Platzhalter, Text bei keinen Treffern und der Kontaktbutton sind Einstellungen im Theme-Editor.
Die Grenze, die niemand erwähnt: 50 Blöcke
Unser erster Inhaltsentwurf hatte 7 Kategorien und 49 Fragen: 56 Blöcke. Shopify erlaubt höchstens 50 Blöcke pro Section, und eine Vorlage mit mehr lässt sich nicht speichern. Kategorien zählen ebenfalls als Blöcke.
Wir kürzten auf 41 Fragen, insgesamt 48 Blöcke, sodass dem Händler Platz für zwei weitere bleibt. Was wegfallen sollte, war aus einem Grund leicht zu entscheiden, den der nächste Abschnitt erklärt. Shops mit mehr als 50 Einträgen können der Vorlage eine zweite Instanz der Section hinzufügen, etwa eine für Bestellungen und eine für Produkte.
41 Antworten schreiben, die stimmen
Der Händler bat uns, die Seite mit Inhalt „wie bei denen“ zu füllen. Die Hilfetexte einer anderen Firma zu kopieren kam nie infrage. Deren Richtlinien sind nicht die Richtlinien dieses Shops, und deren Formulierungen gehören ihnen. Stattdessen entstand jede Antwort aus den eigenen Quellen des Händlers: Rückgaberichtlinie, Versandrichtlinie, Garantieseite, Produktseiten und die Zahlungsarten im Footer.
Das sorgfältig zu tun, deckte etwas auf, das der Händler nicht bemerkt hatte. Der eigene Shop widersprach sich an vier Stellen:
| Kostenloser Versand | ab 70 € in der alten FAQ, ab 30 € auf Produktseiten und in der Shopleiste |
| Rückgabefrist | 30 Tage in der Rückgaberichtlinie, 90 Tage in der alten FAQ und auf Produktseiten |
| Rücksendekosten | trägt laut Richtlinie der Kunde, „kostenlose Rücksendung“ auf Produktseiten |
| Akkulaufzeit | 120 Minuten in einem Produktpunkt, 90 Minuten in der FAQ des Produkts |
Wir haben nicht stillschweigend eine Antwort gewählt. Wo es eine rechtliche Richtlinie gab, folgte die FAQ ihr, und der Händler bekam eine kurze Liste jedes Widerspruchs mit unserer Wahl, damit er entscheiden und auch die Quellseiten korrigieren konnte. Zwei Antworten, die wir nirgends auf der Website bestätigen konnten, haben wir lieber gestrichen als geraten. Das machte die Kürzung auf 50 Blöcke leicht.
Inhalt als Datei statt als Klicks
48 Blöcke im Theme-Editor abzutippen ist langsam und fehleranfällig. Wir hielten die Fragen in einer kleinen Inhaltsdatei und erzeugten das Vorlagen-JSON daraus per Skript. Sobald der Händler über die Widersprüche entschieden hat, ist die Vorlage in Sekunden neu erzeugt. Nach der Installation lässt sich jede Antwort weiterhin ganz normal im Theme-Editor bearbeiten.
Installation
- Lege im Code-Editor die Section
faq-pagean und füge die Section-Datei ein. - Lege eine Seitenvorlage mit dem Namen
faq-2(JSON) an und füge die Vorlagen-Datei ein. Die Section muss zuerst existieren, weil die Vorlage auf sie verweist. - Öffne die FAQ-Seite unter Onlineshop → Seiten und wähle die Vorlage
faq-2.
Was wir bei jedem FAQ-Projekt tun
- Aus den Richtlinien schreiben, nicht aus dem Gedächtnis oder vom Mitbewerber.
- Vor dem Veröffentlichen nach Widersprüchen suchen. Eine FAQ, die der Rückgaberichtlinie widerspricht, erzeugt genau die Support-Anfragen, die sie verhindern sollte.
- Die 50-Block-Grenze einplanen, bevor Inhalte geschrieben werden.
- Inhalte in einer Datei halten, die sich neu erzeugen lässt, und eine Vorlage übergeben, die der Händler wie jede andere bearbeitet.
Du möchtest eine Hilfeseite wie diese oder eine FAQ, die deine Kunden wirklich beantwortet? Sieh dir unsere Shopify-Theme-Entwicklung an oder nimm Kontakt auf.
Häufige Fragen
Kann ich eine Shopify-FAQ-Seite ohne App bauen?
Ja. Eine individuelle Section mit Kategorie- und Frage-Blöcken, nativen Akkordeons und einem kleinen Suchskript deckt ab, was die meisten FAQ-Apps leisten, ohne Monatsgebühr und ohne zusätzliche Skripte auf jeder Seite.
Bringen strukturierte FAQ-Daten Rich Results bei Google?
Seit 2023 zeigt Google FAQ-Rich-Results vor allem für bekannte Behörden- und Gesundheitswebsites. Die strukturierten Daten sind weiterhin gültig und helfen Suchmaschinen beim Verstehen der Seite, aber die meisten Shops sollten nicht mit dem ausklappbaren FAQ-Snippet rechnen.
Wie viele Fragen passen in eine FAQ-Section?
Eine Shopify-Section fasst bis zu 50 Blöcke, und Kategorien zählen mit. Für mehr fügst du derselben Vorlage eine zweite FAQ-Section hinzu.
Kann mein Team die Fragen später bearbeiten?
Ja. Jede Kategorie, Frage und Antwort ist ein Block im Theme-Editor. Hinzufügen, Entfernen oder Umsortieren braucht keinen Code.