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

Key Takeaways

• Eine Shopify Quiz Landing Page ist dazu da, ein Quiz zu starten und abzuschließen. Sie ist einer Einbettung auf der Homepage in puncto Message Match, Exit-Pfaden und einer sauberen URL, auf die du Kampagnen leiten kannst, überlegen.
• Above the Fold: eine Hook-Headline, die den Nutzen nennt, eine einzeilige Subheadline, ein Start-Button und eine Trust Strip (Vertrauensleiste). Streiche die Navigation, den Footer und jedes konkurrierende Angebot.
• Erstelle sie als alternatives Page Template mit einer reduzierten Layout-Datei, die die Header- und Footer-Sektionsgruppen auslä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-Rate und Umsatz pro Session.
• Ein App-gerendertes Quiz-Widget setzt ein Skript vor deinen Hero-Bereich – der falsche Kompromiss für eine Seite, deren einzige Aufgabe es ist, schnell zu laden und zu starten.

Eine Shopify Quiz Landing Page ist nicht dasselbe wie ein Quiz. Das Quiz ist die Logik, die Antworten in eine Empfehlung verwandelt. Die Landing Page 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-Sektion, 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 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, 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 praktisch ist: in einer Homepage-Section, als Menü-Link oder als Block auf halber Höhe einer Produktseite. Das ist in Ordnung für organische Besucher, die zufällig darauf stoßen. Für Paid Traffic ist es der falsche Ort.

Message Match. Jemand, der auf „Finde deine Nuance in 60 Sekunden“ klickt, sollte auf einer Seite landen, auf der „Finde deine Nuance in 60 Sekunden“ steht. Googles Ratschlag für Werbetreibende ist es, Klicks auf eine Seite zu leiten, die genau zur Anzeige passt und ihren Call to Action widerspiegelt.¹ Eine Homepage kann das für fünf verschiedene Ad-Angles nicht gleichzeitig leisten. Eine dedizierte Landing Page schon, und du kannst für jeden Angle eine eigene betreiben.

Keine Navigation Leaks. Ein Embed sitzt innerhalb einer vollständigen Storefront. Der Header bietet ein Menü, ein Such-Icon und einen Warenkorb – und jeder dieser Punkte ist ein Exit, der nicht das Quiz ist.

Ein Job pro Seite. Eine Produktseite verkauft dieses Produkt. Eine Homepage stellt eine Brand vor. Eine Quiz Landing Page bringt genau eine Aktion in Gang – was es einfacher macht, sie zu schreiben, zu testen und konkrete Zahlen daraus abzulesen.

Eine saubere URL. /pages/find-your-shade ist ein Kampagnen-Ziel. Leite Ads darauf, nutze sie in E-Mails, retargete jeden, der darauf war, und werte sie in den Analytics als eigene Zeile aus.

Unser Guide zum Thema Landing Page erstellen in Shopify deckt das generelle Setup ab. Der Rest dieses Guides behandelt die Quiz-spezifischen Teile.

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 via CSS auszublenden, lädt ihn trotzdem herunter. Der sauberere Weg ist eine zweite Layout-Datei.

Ein JSON-Template akzeptiert auf oberster Ebene ein layout-Attribut, das die Layout-Datei benennt, mit der es gerendert werden soll, z.B. "full-width" für das Rendern von layout/full-width.liquid.³ Setze es auf false, wenn du gar kein Layout 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 Kopie von theme.liquid und entferne die Header- und Footer-Section-Groups. Themes rendern diese Gruppen mit dem sections Liquid-Tag, z.B. {% sections 'header-group' %}.⁴ Lösche diese zwei 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 immer noch 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 Landing Page ist ein Funnel innerhalb einer einzigen URL. Ein Pageview auf Seitenebene sagt dir also so gut wie nichts. Feuere bei jedem Schritt ein Event ab.

Im Onlineshop veröffentlichst du Custom Events mit Shopify.analytics.publish. Ein Web Pixel abonniert diese und empfängt das Payload im customData-Feld des Events.⁹ Setze ein Präfix vor die Namen deiner Custom Events, um Kollisionen mit Standard-Events zu vermeiden.

// Feuert beim Klick auf den Start-Button, inkl. Kampagnen-Kontext
Shopify.analytics.publish("quiz:quiz_start", {
  page_handle: "find-your-shade",
  utm_campaign: sessionStorage.getItem("utm_campaign"),
});

Hänge den Frage-Index und die gewählte Antwort an das question_complete-Event an. Dieses eine Feld macht aus einer reinen Absprungrate eine echte Diagnose. Unser Guide zum Hinzufügen von Custom Events in Shopify zeigt Schritt für Schritt, wie man das Pixel schreibt und testet.

Diese vier Metriken auf Seiten-Ebene solltest du im Blick behalten:

• Startrate (Start Rate). Starts im Verhältnis zu Landing Page Sessions. Ein reiner Messwert für den Bereich Above the Fold. Wenn sie niedrig ist, liegt das Problem bei der Headline, dem Button oder der Ladezeit – und nichts weiter unten im Funnel wird das retten.
• Abschlussrate (Completion Rate). Abschlüsse im Verhältnis zu den Starts. Ein Messwert für das Quizdesign; die Absprungrate pro Frage zeigt dir, wo du nachbessern musst.
• Result-to-Cart-Rate. Add to Carts im Verhältnis zu den angesehenen Ergebnissen. Misst die Qualität der Empfehlung und der Results-Sektion, nicht das Quiz selbst.
• Umsatz pro Session (Revenue per Session). Die Zahl, die du mit der Collection Page oder PDP vergleichen musst, auf die du diesen Traffic sonst geleitet hättest.

Lies sie genau in dieser Reihenfolge. Eine Seite kann eine exzellente Completion Rate haben und trotzdem Geld verbrennen, weil fast niemand 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

Es gibt zwei Wege zu einer Quiz Landing Page.

Eine Quiz-App ist schnell installiert und erfordert keine Entwickler: ein Builder-UI, gehostete Logik und meist eine gehostete Results-Seite. Die Kosten: monatliche Gebühren, ein zusätzliches Skript, ein Widget, das womöglich nicht zu 100 % zu deinem Theme passt, und eine Abhängigkeit – wenn du die App deinstallierst, verschwindet auch das Quiz. Prüfe die aktuellen Preise im App Store, bevor du dich festlegst, da sich diese 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 monatlichen Kosten. Der Preis dafür: Jemand muss es bauen.

Fudge ist ein AI Storefront Editor, der nativen Theme-Code schreibt. Du beschreibst die Seite, und er schreibt das Template, das Layout, die Sections und das Quiz-JavaScript in dein Theme. Frag nach „einer Quiz Landing Page unter /pages/find-your-shade ohne Header oder Footer, einem Shade Finder mit fünf Fragen und einer Result-Card mit Add to Cart“ und verfeinere es dann per Prompt.

Weil das Ergebnis Theme-Code ist und kein App-gerenderter Layer, liegt kein Drittanbieter-Quiz-Skript vor deinem Hero-Bereich, und die Seite übersteht eine Deinstallation. Auf einer Seite, deren Hauptargumente Speed und Message Match sind, ist das der Tradeoff, auf den es ankommt.

FAQ