So baust du eine Shopify-Quiz-Landingpage: Template, Layout und Tracking

Das Wichtigste in Kürze

• Eine Shopify-Quiz-Landingpage existiert, um ein Quiz zu starten und zu beenden. Sie ist einer Einbettung auf der Startseite überlegen, wenn es um Message Match, Exit-Pfade und eine saubere URL für deine Kampagnen geht.
• Above the fold: Eine Hook-Headline, die den Mehrwert nennt, eine einzeilige Subheadline, ein Start-Button und ein Trust-Strip. Entferne die Navigation, den Footer und jedes konkurrierende Angebot.
• Baue sie als alternatives Seitentemplate (Alternate Page Template) mit einer reduzierten Layout-Datei, die Header- und Footer-Section-Groups weglässt.
• Feuere quiz_start, question_complete, quiz_complete, result_view und add_to_cart über ein Custom Pixel ab und bewerte die Seite nach Startrate, Abschlussrate, Result-to-Cart und Umsatz pro Sitzung.
• Ein per App gerendertes Quiz-Widget setzt ein Skript vor deinen Hero-Bereich – der falsche Kompromiss auf einer Seite, deren einziger Job es ist, schnell zu laden und zu starten.

Um eine Shopify-Quiz-Landingpage zu bauen, gibst du einer Seite ein eigenes alternatives Template, renderst sie mit einem reduzierten Layout ohne Header und Footer, behältst Hook, Quiz und Ergebnisse auf dieser einen URL und feuerst bei jedem Quiz-Schritt ein Event. Die Seite ist nicht dasselbe wie das 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 bei der Stange hält, und die Ergebnissektion, die eine Empfehlung in einen Warenkorb verwandelt.

In diesem Guide geht es um den Container: den Seitenaufbau, das Template, das Pacing, den Traffic, die Geschwindigkeit und das Tracking. Für die Quiz-Logik selbst, einschließlich Fragendesign, Antwort-zu-Produkt-Mapping und das Timing der E-Mail-Erfassung, 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, den KI-Operator für Shopify-Stores, mit einer Bewertung von 4.9 im Shopify App Store und “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 keine Entwickler: ein Builder-UI, gehostete Logik, meist eine gehostete Ergebnisseite. Die Kosten sind eine wiederkehrende Gebühr, ein zusätzliches Skript, ein Widget, das vielleicht nicht zu deinem Theme passt, und eine Abhängigkeit, denn wenn du die App deinstallierst, verschwindet auch das Quiz. Check das aktuelle App-Store-Listing jeder App für die aktuellen Pläne, bevor du dich festlegst, da sich die 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 zusätzliches Skript, exakter Brand-Match, keine monatliche Gebühr. Die Kosten bestehen darin, dass es jemand bauen muss.

Fudge, der KI-Operator für Shopify-Stores, schreibt nativen Theme-Code. Du beschreibst die Seite, und sein Quiz-Builder schreibt das Template, das Layout, die Sections und das Quiz-JavaScript in dein Theme – als Entwurf, den du dir vor der Veröffentlichung ansehen kannst. Bitte einfach um “eine Quiz-Landingpage unter /pages/find-your-shade ohne Header oder Footer, einen Shade-Finder mit fünf Fragen und eine Results-Card mit Add-to-Cart”, und verfeinere das Ganze dann per Prompt.

Weil der Output Theme-Code und keine von einer App gerenderte Ebene ist, gibt es kein Third-Party-Quiz-Skript vor deinem Hero-Bereich, und die Seite bleibt auch nach einer Deinstallation bestehen. Auf einer Seite, deren wichtigstes Argument Geschwindigkeit und Message Match sind, ist das der Kompromiss, auf den es ankommt.

Nach dem Launch trackt Fudge die Abschlüsse, wo Käufer abspringen und die Add-to-Carts und Käufe aus jedem Ergebnis – und schlägt vor, was du ändern solltest. Es vergleicht die Ergebnisse vor und nach einer Änderung, anstatt den Traffic aufzuteilen. Nutze also ein Testing-Tool, wenn du die oben genannten Tests als echte A/B-Tests durchführen willst.

FAQ