Wie man eine Shopify Quiz Landing Page baut (Schritt-für-Schritt)

Key Takeaways

• Eine Shopify-Quiz-Landingpage existiert nur, um ein Quiz zu starten und zu beenden. Sie schlägt ein Homepage-Embed beim Message Match, bei den Ausstiegswegen (Exit Paths) und durch eine saubere URL, auf die du gezielt Kampagnen leiten kannst.
• Above the fold: eine Hook-Headline, die den Mehrwert nennt, eine einzeilige Subheadline, ein Start-Button und Trust-Elemente. Entferne die Navigation, den Footer und jedes konkurrierende Angebot.
• Baue sie als alternatives Seitentemplate (Alternate Page Template) mit einer reduzierten Layout-Datei, die die Header- und Footer-Sektionsgruppen weglässt.
• Feuere quiz_start, question_complete, quiz_complete, result_view und add_to_cart über ein Custom Pixel und bewerte die Seite anhand von Startrate, Completion Rate, Result-to-Cart und Umsatz pro Session.
• Ein App-gerendertes Quiz-Widget lädt ein Skript vor deinem Hero-Bereich – das ist der falsche Trade-off für eine Seite, deren einziger Job es ist, schnell zu laden und Klicks zu generieren.

Eine Shopify-Quiz-Landingpage ist nicht dasselbe wie ein Quiz. Das Quiz ist die Logik, die Antworten in eine Empfehlung verwandelt. Die Landingpage ist der Container: die Headline, die jemanden dazu bringt, auf Start zu drücken, das Layout, das sie in Bewegung hält, und die Results-Section, die eine Empfehlung in einen Warenkorb-Klick verwandelt.

In diesem Guide geht es um den Container: den Seitenaufbau, das Template, das Pacing, den Traffic, die Ladezeit und das Tracking. Wenn du dich für die Quiz-Logik selbst, das Design der Fragen, das Antwort-zu-Produkt-Mapping und das Timing der E-Mail-Abfrage interessierst, lies unseren Guide zum Shopify-Quiz-Funnel.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Bereich tätig und haben mit hunderten von Shopify-Brands an ihren Storefronts gearbeitet. Wir entwickeln Fudge, einen AI Storefront Editor mit einer 5,0-Sterne-Bewertung im Shopify App Store und dem „Built for Shopify“-Status. Wir arbeiten also direkt auf der Theme-Ebene, auf der diese Seiten leben.

Warum eine dedizierte Quiz Landing Page besser ist als ein Embed

Die meisten Shops platzieren ihr Quiz dort, wo es bequem ist: in einer Homepage-Section, im Menü oder als Block auf halber Höhe einer Produktseite. Das ist völlig in Ordnung für organische Besucher, die zufällig darüber stolpern. Für Paid Traffic ist es jedoch der falsche Ort.

Message Match. Jemand, der auf “Finde deine Nuance in 60 Sekunden” geklickt hat, sollte auf einer Seite landen, die “Finde deine Nuance in 60 Sekunden” sagt. Die Richtlinie von Google für Werbetreibende lautet, Klicks auf eine Seite zu schicken, die genau zur Ad passt und deren Call-to-Action widerspiegelt.¹ Eine Homepage kann das nicht für fünf verschiedene Ad-Angles gleichzeitig leisten. Eine dedizierte Seite schon – und du kannst für jeden Angle eine eigene betreiben.

Keine Navigations-Leaks. Ein Embed sitzt innerhalb des gesamten Storefronts. Der Header bietet ein Menü, ein Such-Icon und den Warenkorb an – und jeder einzelne davon ist ein Ausstieg (Exit), der vom Quiz wegführt.

Ein Job pro Seite. Eine Produktseite (PDP) verkauft dieses Produkt. Eine Homepage stellt eine Brand vor. Eine Quiz-Landingpage bringt genau eine Aktion ins Rollen, was sie einfacher zu schreiben, einfacher zu testen und in den Analytics leichter abzulesen macht.

Eine saubere URL. /pages/find-your-shade ist ein Ziel für deine Kampagnen. Schick Ads dorthin, setze sie in E-Mails, retargete jeden, der die Seite besucht hat, und lies sie als eigene Zeile in deinen Analytics aus.

Unser Guide Wie man eine Landingpage in Shopify erstellt deckt das generelle Setup ab. Der Rest dieses Guides befasst sich mit den Quiz-spezifischen Teilen.

Was Above the Fold gehört

Der Fold hat nur einen Job: einen Klick auf Start zu bekommen. Alles andere ist nur Beiwerk.

Die Hook-Headline nennt den Nutzen, nicht die Mechanik. „Mach unser Quiz“ beschreibt Arbeit, die du von jemandem verlangst. „Finde deine Nuance in 60 Sekunden“ beschreibt, was sie bekommen und wie wenig es kostet. Nenne das Ergebnis, und wenn möglich, die benötigte Zeit.

Die Subheadline behandelt den Einwand. Ein Satz, der beantwortet „Wie lange dauert das?“ oder „Warum sollte ich dem Ergebnis vertrauen?“, wie zum Beispiel: „Fünf Fragen, abgeglichen mit jeder Nuance, die wir herstellen.“

Ein Start-CTA. Ein einzelner, kontrastreicher Button, der breit genug ist, um ihn mit dem Daumen gut zu treffen. Kein zweiter „Alle Produkte ansehen“-Link daneben.

Eine Trust Strip. Ein schmaler Streifen unter dem Button: eine Sternebewertung, eine Review-Anzahl oder ein Satz zu Retouren. Das sorgt dafür, dass sich der Start sicher anfühlt, anstatt direkt etwas zu verkaufen. Nutze nur Zahlen, hinter denen du stehen kannst.

Was du streichen solltest. Die Navigation, die Linkfarm im Footer, die Announcement Bar für einen anderen Sale, das Newsletter-Popup und die Chat-Bubble, die deinen CTA auf Mobile verdeckt. Alles davon konkurriert mit dem einzigen Button, der zählt.

Für Above-the-Fold-Layouts, die du dir abschauen kannst, sieh dir unsere Übersicht von Shopify Landing Page Beispielen an.

Wenn eine Sektion auf dieser Seite nicht dabei hilft, das Quiz zu starten oder abzuschließen: lösche sie.

Die Quiz Landing Page in Shopify bauen

Hier ist der Aufbau in sechs Schritten. Schritt 1 und 2 unterscheiden eine echte Landing Page von einer normalen Seite mit einem Quiz darauf.

1. Seite erstellen und ihr ein alternatives Template zuweisen

Erstelle die Seite unter Onlineshop > Seiten. Die rechte Karte Onlineshop im Seiten-Editor hat ein Dropdown für das Theme-Template, das deine alternativen Page-Templates auflistet.

Shopify benennt alternative Templates template-name.template-suffix.template-file-type, ein Quiz-Template ist also templates/page.quiz.json.² Ein alternatives Template kann das Standard-page-Template nicht ersetzen, und genau das willst du: Normale Seiten behalten das Standard-Layout, und nur diese eine bekommt die reduzierte Version. Du kannst sie dir mit /pages/find-your-shade?view=quiz als Vorschau ansehen, bevor du sie zuweist.²

Wie genau du die Template-Datei erstellst, erfährst du in Wie man ein Custom Template in Shopify hinzufügt.

2. Header und Footer mit einem alternativen Layout entfernen

Das ist der Teil, den die meisten Guides überspringen. Den Header nur mit CSS auszublenden, lädt ihn trotzdem herunter. Der sauberere Weg ist eine zweite Layout-Datei.

Ein JSON-Template akzeptiert ein Top-Level-layout-Attribut, das die Layout-Datei benennt, mit der es gerendert werden soll, z. B. "full-width", um layout/full-width.liquid zu rendern.³ Setze es auf false, wenn du gar kein Layout verwenden möchtest.

{
    "layout": "landing",
    "sections": {
        "hero": {"type": "quiz-hero"},
        "quiz": {"type": "quiz"},
        "results": {"type": "quiz-results"}
    },
    "order": ["hero", "quiz", "results"]
}

Erstelle dann layout/landing.liquid als eine Kopie von theme.liquid, bei der die Header- und Footer-Gruppen entfernt wurden. Themes rendern diese Gruppen mit dem sections Liquid-Tag, wie z.B. {% sections 'header-group' %}.⁴ Lösche diese beiden Zeilen und behalte alles andere: content_for_header, deine Stylesheet-Links und content_for_layout.

Lass ein kleines Logo im Hero-Bereich, damit die Seite weiterhin als deine Brand erkennbar ist. Es sollte nur nicht auf die Homepage verlinken.

3. Baue den Hero-Bereich als echte Section

Headline, Subheadline, Start-Button, Trust Strip – mit Schema-Settings, damit die Headline im Theme Editor bearbeitbar ist. Du wirst diese Headline testen wollen, und dafür möchtest du keine Code-Deploys machen müssen.

4. Binde das Quiz ein

Das Quiz ist ein Multi-Step-Formular plus die Logik, die Antworten via Tags, Metafields oder Scoring auf Produkte mappt. Dieses Mapping behandeln wir im Shopify Quiz Funnel Guide; betrachte den Output hier einfach als eine Sektion, die Fragen rendert und ein Ergebnis ausspuckt.

Auf Seiten-Ebene ist wichtig, dass das Quiz in place gerendert wird. Kein Modal und keine neue URL pro Frage. Beides bricht den Zurück-Button und beides kostet dich einen Paint.

5. Rende die Ergebnisse auf derselben Seite

Tausche den sichtbaren Schritt aus, anstatt weiterzuleiten. Ein Redirect zu /pages/results wirft den bereits bezahlten Page Load weg und schiebt eine komplette Navigation zwischen Intent und Warenkorb. Update den URL-Hash, wenn du möchtest, dass das Ergebnis teilbar ist.

6. Wähle das Handle vor dem Launch

Das Handle taucht in jeder Ad, E-Mail und jedem Report auf. Nutze den Payoff, nicht die Mechanik: /pages/find-your-shade liest sich in einer Anzeigenvorschau besser als /pages/quiz-2. Lege es fest, bevor die erste Kampagne live geht – denn es später zu ändern, bedeutet einen Redirect und kaputte Ad-Links.

Progress und Pacing

Das Pacing ist ein Page-Design-Problem, kein Quiz-Logik-Problem. Fünf Entscheidungen decken das meiste davon ab.

Zeige Fortschritt. Ein Balken oder ein „Frage 2 von 5“-Counter, sichtbar ohne zu scrollen. Ohne ihn kann der User nicht einschätzen, ob er fast am Ende ist, und diese Ungewissheit führt zu Abbrüchen.

Eine Frage pro Screen auf Mobile, immer. Alle fünf auf einer Seite gestapelt, ergeben ein klassisches Formular, und das fühlt sich nach Arbeit an. Eine pro Screen wirkt wie ein Gespräch. Auf Desktop sind zwei in Ordnung, wenn die Antworten kurz sind.

Optimiere die Antwort-Größe für den Daumen. Antwortoptionen sind die am häufigsten angetippten Elemente auf der Seite. WCAG 2.2 gibt als Level AA ein Minimum-Target von 24 mal 24 CSS-Pixeln vor,⁵ was die Untergrenze ist, kein Ziel. Optionen in voller Breite in einer einzigen Spalte schlagen ein Grid aus kleinen Chips und liegen natürlich im Daumenradius am unteren Bildschirmrand. Unser Guide über mobile Shopify Landing Pages behandelt weitere Mobile-Patterns.

Halte Transitions schnell. Ein Fade von 150 bis 200 Millisekunden fühlt sich flüssig an. Ein halber Sekunde langer Slide mit Bounce-Effekt wirkt ab Frage vier langsam. Gehe bei Single-Select-Fragen automatisch zum nächsten Schritt weiter, damit kein extra Tap auf „Weiter“ nötig ist.

Mach die erste Frage zur einfachsten. Die erste Antwort ist ein Commitment und sollte nichts kosten. Starte mit geringem Risiko und gehe dann zu den Fragen über, die die Empfehlung steuern. Beginne niemals mit dem E-Mail-Feld.

Die Results-Sektion ist immer noch eine Landing Page Section

Sobald die letzte Frage beantwortet ist, ändert die Seite ihren Job: vom Qualifizieren zum Verkaufen. Baue sie wie eine kompakte Produktseite auf.

Starte mit einer Empfehlungskarte. Produktbild, Name, Preis, einmal Add to Cart. Ein Raster erzeugt das gleiche Auswahlproblem, das das Quiz gerade gelöst hat.

Schreibe die Warum-das-passt-Copy. Zwei oder drei Zeilen, die sich auf die tatsächlichen Antworten der User beziehen: „Du hast Mischhaut und eine Duftstoffempfindlichkeit angegeben, also ist dies hier unparfümiert und gleicht Öl aus, ohne auszutrocknen.“ Das ist der Unterschied zwischen einer echten Empfehlung und einem zufälligen Produkt.

Add to Cart direkt aus dem Ergebnis. Kein Klick auf die Produktseite vorher. Der Shopper hat den Pitch bereits gelesen, und ein Navigationsschritt zwischen Empfehlung und Warenkorb ist der häufigste Grund, warum Shops ein abgeschlossenes Quiz verschwenden.

Biete genau eine zweite Option an. Eine einzige „Passt auch zu dir“-Karte unter der primären Option gibt unentschlossenen Shoppern eine Alternative, ohne den gesamten Katalog wieder zu öffnen.

Platziere Social Proof am Point of Doubt. Nicht oben bei den Ergebnissen, wo noch niemand Zweifel hatte. Platziere ein Review von einem Kunden mit demselben Profil direkt unter dem Add-to-Cart-Button.

Traffic auf die Quiz Landing Page leiten

Stimme die Ad auf die Seite ab. Die Headline der Seite sollte das Versprechen der Anzeige wiederholen, idealerweise mit denselben Worten. Google empfiehlt, eine Landing Page zu wählen, die genau zur Anzeige und den Keywords passt und den Call-to-Action der Anzeige widerspiegelt.¹ Drei Creative-Angles bedeuten drei Seiten – oder zumindest drei Headline-Varianten.

Behandle UTMs richtig. Shopifys Marketing Reports lesen die Standardparameter utm_source, utm_medium, utm_campaign, utm_term und utm_content aus und ordnen Sessions entsprechend zu.⁶ Das Problem auf einer Quizseite: Die interessanten Daten befinden sich an zwei Orten – bei der Kampagne, die den Besuch gesendet hat, und bei den Antworten, die der Shopper gegeben hat. Du willst beides in derselben Zeile.

Lies die UTM-Werte beim Laden der Seite aus der URL aus, speichere sie im Session Storage, damit sie die Schrittwechsel überstehen, und hänge sie dann an die Events an, die das Quiz abfeuert. Unser Guide über das Erfassen von UTM-Werten in Shopify Formularen behandelt das JavaScript zum Lesen und Persistieren.

Retargete die Starter, die nicht abgeschlossen haben. Sie haben dir gesagt, wonach sie suchen, und vorzeitig abgebrochen. Das macht sie zu einer schärferen Zielgruppe als generische Seitenbesucher. Baue dir eine Audience aus quiz_start minus quiz_complete und schicke sie mit einem „Mach da weiter, wo du aufgehört hast“-Angle zurück auf dieselbe URL.

Speed und Core Web Vitals

Diese Seite sitzt ganz oben in einem Paid Funnel, bekommt Mobile Traffic von Social Media und hat nur eine Aufgabe: Eine Headline und einen Button so schnell zu rendern, dass jemand den Button drückt.

LCP ist die Metrik, auf die es ankommt. Largest Contentful Paint sollte bei 2,5 Sekunden oder weniger im 75. Perzentil der Seitenaufrufe liegen.⁷ Dein LCP-Element ist fast mit Sicherheit das Hero-Bild oder die Headline. Skaliere es richtig, nutze ein modernes Format und lade es niemals per Lazy-Loading.

INP wird wichtig, sobald das Quiz startet. Interaction to Next Paint sollte im 75. Perzentil bei 200 Millisekunden oder weniger liegen.⁸ Jeder Tipp auf eine Antwort ist eine Interaktion – fünf Fragen sind also fünf Gelegenheiten, bei denen sich die Seite träge anfühlen kann.

Drei Dinge gehen speziell bei diesem Seitentyp oft schief.

Das Quiz-Skript blockiert den Hero-Bereich. Wenn das Quiz-JavaScript geparst wird, bevor die Headline gezeichnet wird, hast du für einen Klick bezahlt und zeigst einen leeren Bildschirm. Rende den Hero-Bereich in Liquid, damit er direkt im HTML ausgeliefert wird, und nutze defer für alles, was das Quiz benötigt.

Bilder in Antwortoptionen sind schwerer, als sie aussehen. Fünf Fragen mit jeweils sechs Bildoptionen sind 30 Bilder. Nutze Preload nur für die der ersten Frage, lade den Rest per Lazy-Loading und halte die Thumbnails klein.

Ein App-gerendertes Widget ist hier das falsche Tool. Eine Quiz-App schleust typischerweise ein Skript ein, das die Quizdefinition lädt und clientseitig rendert. Auf den meisten Seiten ist das ein kleiner Preis. Auf einer Seite, deren ganzer Zweck darin besteht, schnell zu laden und zu starten, setzt es jedoch einen Network Round Trip und einen Client-Side Render vor deinen primären Content und tendiert dazu, das LCP-Element nach hinten zu schieben.

Das Tracking der Seite

Eine Quiz-Landingpage ist ein Funnel innerhalb einer einzigen URL. Ein Pageview auf Seitenebene verrät dir also fast gar nichts. Feuere stattdessen bei jedem Schritt ein Event.

Im Onlineshop veröffentlichst du Custom Events mit Shopify.analytics.publish, und ein Web Pixel abonniert sie und erhält den Payload im customData-Feld des Events.⁹ Nutze Präfixe für Custom-Event-Namen, um Kollisionen mit Standard-Events zu vermeiden.

// Feuert beim Start-Button, inklusive Kampagnen-Kontext
Shopify.analytics.publish('quiz:quiz_start', {
    page_handle: 'find-your-shade',
    utm_campaign: sessionStorage.getItem('utm_campaign'),
})

Füge den Frage-Index und die gewählte Antwort bei question_complete hinzu. Dieses eine Feld macht aus einer reinen Drop-off-Zahl eine Diagnose. Unser Guide über das Hinzufügen von Custom Events in Shopify geht das Schreiben und Testen von Pixeln Schritt für Schritt durch.

Vier Page-Level-Metriken solltest du im Auge behalten:

• Startrate. Starts im Verhältnis zu Landingpage-Sessions. Ein reiner Indikator für den Above-the-fold-Bereich. Ist sie niedrig, sind die Headline, der Button oder die Ladezeit das Problem, und nichts im restlichen Funnel kann das noch retten.
• Completion Rate. Abschlüsse im Verhältnis zu Starts. Eine Quiz-Design-Metrik, bei der der Drop-off pro Frage genau auf den Schritt zeigt, den du fixen musst.
• Result-to-Cart-Rate. Add-to-Carts im Verhältnis zu Result Views. Misst die Qualität der Empfehlung und die Results-Section, nicht das Quiz selbst.
• Umsatz pro Session. Die Zahl, die du mit der Collection Page oder PDP vergleichen musst, auf die du den Traffic ansonsten geschickt hättest.

Lies diese Metriken genau in der Reihenfolge ab. Eine Seite kann eine fantastische Completion Rate haben und trotzdem Geld verbrennen, weil kaum jemand überhaupt erst gestartet hat.

Was du als Erstes testen solltest

Teste in der Reihenfolge des Funnels, denn eine Verbesserung weiter oben verändert jede Metrik weiter unten.

1. Die Hook-Headline. Größte Audience, größter Effekt. Teste eine Payoff-Formulierung gegen Payoff plus Zeit oder gegen eine Frage. Genau deshalb gehört die Headline in die Theme-Einstellungen und nicht hardcoded ins Template.

2. Anzahl der Fragen. Von sieben auf fünf Fragen zu kürzen, ist ein echter Tradeoff: Die Abschlussrate steigt in der Regel, aber die Präzision der Empfehlung kann sinken. Behalte die Result-to-Cart-Rate neben der Completion Rate im Auge, damit du rechtzeitig merkst, wenn ein kürzeres Quiz schlechtere Matches liefert.

3. Gate-Platzierung. Ob die E-Mail-Abfrage vor oder nach dem Ergebnis stattfindet, beeinflusst sowohl die Capture Rate als auch die Completion Rate. Dieser Tradeoff wird im Quiz Funnel Guide behandelt. Teste dies erst, wenn die Headline feststeht.

Zwei Regeln halten die Ergebnisse verwertbar. Ändere immer nur eine Sache gleichzeitig. Und lege die Laufzeit und die entscheidende Metrik fest, bevor du anfängst, denn diese Seite teilt ihren Traffic auf mehrere Schritte auf und die Sample Size bei add_to_cart ist weitaus geringer als bei quiz_start. Einen Gewinner bei der kleinsten Zahl im Funnel zu küren, ist der schnellste Weg, eine Änderung auszurollen, die absolut nichts bringt.

Build-Optionen: App-Widget oder nativer Theme-Code

Zwei Wege führen dich zu einer Quiz-Landingpage.

Eine Quiz-App ist schnell installiert und braucht keinen Entwickler: eine Builder-UI, gehostete Logik, und meistens eine gehostete Ergebnisseite. Die Kosten dafür sind eine monatliche Gebühr, ein zusätzliches Skript, ein Widget, das vielleicht nicht exakt zu deinem Theme passt, und eine Abhängigkeit: Wenn du die App deinstallierst, verschwindet auch das Quiz. Prüfe die aktuellen Pläne im Live-App-Store, bevor du dich festlegst, da sich Preise oft ändern.

Nativer Theme-Code bedeutet, dass die Seite, das Layout, das Quiz und die Ergebnisse als Liquid, CSS und JavaScript in deinem Theme liegen. Kein Extra-Skript, exakter Brand Match, keine monatliche Gebühr. Der Preis dafür: Jemand muss es bauen.

Fudge ist ein KI-Storefront-Editor, der nativen Theme-Code schreibt. Du beschreibst die Seite, und die KI schreibt das Template, das Layout, die Sections und das Quiz-JavaScript in dein Theme. Frag nach “einer Quiz-Landingpage unter /pages/find-your-shade ohne Header oder Footer, mit einem Fünf-Fragen-Shade-Finder und einer Results-Card mit Add-to-Cart”, und verfeinere das Ergebnis danach über den Prompt.

Da der Output nativer Theme-Code ist und kein App-gerenderter Layer, sitzt kein Third-Party-Quiz-Skript vor deinem Hero, und die Seite überlebt jede Deinstallation. Auf einer Seite, deren wichtigste Argumente Ladezeit und Message Match sind, ist das genau der Trade-off, auf den es ankommt.

FAQ