Comment créer une landing page de quiz Shopify (Étape par étape)

À retenir

• Une landing page de quiz Shopify existe pour commencer et terminer un quiz. Elle est plus efficace qu’une intégration sur la page d’accueil en termes de cohérence du message, de points de sortie, et pour avoir une URL propre vers laquelle diriger vos campagnes.
• Au-dessus de la ligne de flottaison : un titre d’accroche qui annonce le bénéfice, un sous-titre d’une ligne, un bouton pour commencer et une bande de réassurance. Supprimez la navigation, le footer et toute offre concurrente.
• Créez-la comme un modèle de page alternatif (template) avec un fichier de layout épuré qui omet les groupes de sections header et footer.
• Déclenchez quiz_start, question_complete, quiz_complete, result_view, et add_to_cart via un pixel personnalisé, et évaluez la page sur le taux de démarrage, la complétion, le ratio résultat-panier, et le revenu par session.
• Un widget de quiz rendu par une application place un script avant votre hero, ce qui est le mauvais compromis pour une page dont le seul travail est de se charger vite et de démarrer.

Une landing page de quiz Shopify n’est pas la même chose qu’un quiz. Le quiz, c’est la logique qui transforme des réponses en recommandation. La landing page est le conteneur : le titre qui pousse quelqu’un à appuyer sur Démarrer, la mise en page qui le fait avancer, et la section des résultats qui transforme une recommandation en panier.

Ce guide parle du conteneur : la création de la page, le template, le rythme, le trafic, la vitesse et le tracking. Pour la logique du quiz elle-même, y compris la conception des questions, le mapping des réponses vers les produits et le moment où capturer l’e-mail, lisez notre guide sur le funnel de quiz Shopify.

Pourquoi vous pouvez nous faire confiance

Nous évoluons dans l’écosystème Shopify depuis plus de quatre ans et avons travaillé avec des centaines de marques sur leurs boutiques. Nous développons Fudge, un éditeur de vitrine IA avec une note de 5.0 sur le Shopify App Store et le statut Built for Shopify, nous travaillons donc directement sur la couche du thème où vivent ces pages.

Pourquoi une landing page dédiée est meilleure qu’une intégration (embed)

La plupart des boutiques placent leur quiz là où c’est pratique : une section de la page d’accueil, un lien dans le menu, un bloc au milieu d’une page produit. C’est bien pour les visiteurs organiques qui tombent dessus par hasard. Mais c’est le mauvais endroit pour le trafic payant.

Cohérence du message (Message match). Quelqu’un qui a cliqué sur « Trouvez votre teinte en 60 secondes » doit atterrir sur une page qui dit « Trouvez votre teinte en 60 secondes ». Les recommandations de Google pour les annonceurs sont d’envoyer les clics vers une page qui correspond étroitement à la publicité et reflète son call-to-action.¹ Une page d’accueil ne peut pas faire ça pour cinq angles publicitaires à la fois. Une page dédiée le peut, et vous pouvez en créer une par angle.

Pas de fuites de navigation. Une intégration se trouve au milieu de toute la boutique. Le header propose un menu, une icône de recherche et un panier, et chacun d’eux est une porte de sortie qui n’est pas le quiz.

Un seul objectif par page. Une page produit vend ce produit. Une page d’accueil présente une marque. Une landing page de quiz déclenche une action, ce qui la rend plus facile à écrire, plus facile à tester, et plus facile à analyser en chiffres.

Une URL propre. /pages/find-your-shade est une destination de campagne. Pointez vos pubs vers elle, mettez-la dans vos e-mails, ciblez tous ceux qui l’ont visitée en retargeting, et analysez-la comme sa propre ligne dans vos statistiques.

Notre guide sur comment créer une landing page sur Shopify couvre la configuration générale. Le reste de ce guide se concentre sur les éléments spécifiques au quiz.

Ce qui va au-dessus de la ligne de flottaison

Le haut de la page n’a qu’un rôle : obtenir un clic sur Démarrer. Tout le reste n’est que du support.

Le titre d’accroche annonce le bénéfice, pas la mécanique. « Faites notre quiz » décrit un travail que vous demandez à quelqu’un de faire. « Trouvez votre teinte en 60 secondes » décrit ce qu’ils obtiennent et le peu d’effort que ça demande. Nommez le résultat, et là où vous le pouvez, mentionnez le temps.

Le sous-titre gère les objections. Une ligne pour répondre à « combien de temps ça prend » ou « pourquoi faire confiance au résultat », comme « Cinq questions, pour trouver la correspondance parmi toutes nos teintes. »

Un seul CTA pour commencer. Un bouton unique à fort contraste, assez large pour être cliqué avec un pouce. Aucun lien secondaire « voir tous les produits » à côté.

Une bande de réassurance. Une fine ligne sous le bouton : des étoiles d’avis, un nombre d’avis, ou une phrase sur les retours. Ça rend le démarrage rassurant plutôt que vendeur. N’utilisez que des chiffres que vous pouvez assumer.

Ce qu’il faut supprimer. La navigation, l’océan de liens du footer, la barre d’annonce faisant la promotion de vos soldes, le popup de newsletter, et la bulle de chat qui cache votre CTA sur mobile. Chacun est en concurrence avec le seul bouton qui compte.

Pour des modèles de mise en page au-dessus de la ligne de flottaison dont vous pouvez vous inspirer, consultez notre sélection d’exemples de landing pages Shopify.

Si une section de cette page n’aide pas quelqu’un à commencer ou à terminer le quiz, supprimez-la.

Construire la landing page de quiz dans Shopify

Voici la création en six étapes. Les étapes 1 et 2 sont ce qui sépare une vraie landing page d’une page normale contenant un quiz.

1. Créer la page et lui attribuer un modèle (template) alternatif

Créez la page dans Boutique en ligne > Pages. La carte Boutique en ligne à droite de l’éditeur de page contient un menu déroulant Modèle de thème listant vos modèles de pages alternatifs.

Shopify nomme les modèles alternatifs nom-du-modele.suffixe-du-modele.type-de-fichier, donc un template de quiz est templates/page.quiz.json.² Un template alternatif ne peut pas remplacer le modèle page par défaut, ce qui est exactement ce que vous voulez : les pages normales gardent la mise en page standard et seule celle-ci obtient la version épurée. Prévisualisez-le avant de l’attribuer avec /pages/find-your-shade?view=quiz.²

Pour la procédure de création du fichier template, voir comment ajouter un template personnalisé dans Shopify.

2. Supprimer le header et le footer avec un layout alternatif

C’est la partie que la plupart des guides ignorent. Cacher le header avec du CSS le télécharge quand même. La méthode plus propre est d’utiliser un deuxième fichier de layout (mise en page).

Un template JSON accepte un attribut layout au niveau supérieur indiquant le fichier de layout à utiliser pour le rendu, par exemple "full-width" pour rendre layout/full-width.liquid.³ Réglez-le sur false pour n’avoir aucun layout du tout.

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

Créez ensuite layout/landing.liquid comme une copie de theme.liquid avec les groupes de sections header et footer supprimés. Les thèmes génèrent ces groupes avec la balise Liquid sections, comme dans {% sections 'header-group' %}.⁴ Supprimez ces deux lignes et gardez tout le reste : content_for_header, vos liens vers les feuilles de style, et content_for_layout.

Laissez un petit logo dans le hero pour que la page reste identifiable à votre marque. Il ne devrait juste pas faire de lien vers la page d’accueil.

3. Construire le hero comme une vraie section

Titre, sous-titre, bouton de démarrage, bande de réassurance, avec des paramètres de schema pour que le titre soit modifiable dans l’éditeur de thème. Vous allez faire des tests sur ce titre, et vous ne voulez pas avoir à déployer du code à chaque fois.

4. Intégrer le quiz

Le quiz est un formulaire multi-étapes couplé à la logique qui associe les réponses aux produits via des tags, des champs méta (metafields) ou un système de points. Ce mapping est couvert dans le guide du funnel de quiz Shopify ; traitez la sortie ici comme une section qui affiche des questions et renvoie un résultat.

Au niveau de la page, ce qui compte c’est que le quiz s’affiche sur place. Pas de fenêtre modale, et pas de nouvelle URL par question. Les deux cassent le bouton retour et vous coûtent un temps de rendu (paint).

5. Afficher les résultats sur la même page

Faites permuter l’étape visible plutôt que de rediriger. Une redirection vers /pages/results jette par la fenêtre le chargement de page que vous avez déjà payé et place toute une navigation entre l’intention et le panier. Mettez à jour le hash de l’URL si vous voulez que le résultat puisse être partagé.

6. Choisir l’URL (handle) avant le lancement

L’URL (handle) se retrouve dans chaque publicité, e-mail et rapport. Utilisez le bénéfice, pas la mécanique : /pages/find-your-shade passe mieux dans un aperçu de publicité que /pages/quiz-2. Décidez-le avant le lancement de la première campagne, car le changer plus tard implique une redirection et une série de liens publicitaires cassés.

Progression et rythme

Le rythme est un problème de design de page, pas un problème de logique de quiz. Cinq décisions couvrent presque tout.

Affichez la progression. Une barre ou un compteur « Question 2 sur 5 », visible sans scroller. Sans ça, l’acheteur ne peut pas savoir s’il est proche de la fin, et cette incertitude pousse à l’abandon.

Une seule question par écran sur mobile, toujours. Empiler les cinq questions sur une seule page crée un formulaire, et un formulaire donne l’impression de travailler. Une par écran ressemble à une conversation. Sur bureau (desktop), deux c’est bien si les réponses sont courtes.

Dimensionnez les réponses pour les pouces. Les options de réponse sont les éléments les plus cliqués de la page. Les WCAG 2.2 fixent une taille cible minimale de 24 par 24 pixels CSS au niveau AA,⁵ ce qui est un minimum, pas un objectif. Des tuiles sur toute la largeur empilées sur une colonne battent une grille de petits boutons et tombent sous l’arc naturel du pouce en bas de l’écran. Notre guide sur les landing pages Shopify sur mobile aborde plus en détail les interfaces mobiles.

Gardez des transitions rapides. Un fondu de 150 à 200 millisecondes donne une impression de réactivité. Un glissement d’une demi-seconde avec un rebond paraît lent dès la question quatre. Avancez automatiquement sur les questions à choix unique pour éviter un appui supplémentaire sur un bouton Suivant.

Rendez la première question la plus simple. La première réponse est un engagement et elle ne devrait rien coûter. Commencez avec des questions sans enjeu, puis passez à celles qui déterminent la recommandation. Ne commencez jamais par demander l’e-mail.

La section des résultats est toujours une section de landing page

Une fois la dernière question répondue, le rôle de la page change, passant de la qualification à la vente. Construisez-la comme une page produit compacte.

Mettez en avant une seule carte de recommandation. L’image du produit, le nom, le prix, un bouton Ajouter au panier. Une grille recrée le problème de choix que le quiz vient de résoudre.

Rédigez le texte qui explique pourquoi ça correspond. Deux ou trois lignes faisant référence aux réponses réelles du client : « Vous avez indiqué une peau mixte et une sensibilité au parfum, alors ce produit est sans odeur et équilibre le sébum sans agresser. » C’est la différence entre une recommandation et un produit au hasard.

Ajoutez au panier directement depuis le résultat. Pas de clic préalable vers la page produit. L’acheteur a déjà lu l’argumentaire, et ajouter une étape de navigation entre la recommandation et le panier est la façon la plus courante pour les boutiques de gâcher un quiz complété.

Proposez exactement une seule option secondaire. Une unique carte « fonctionne aussi pour vous » sous la principale donne à l’acheteur indécis une alternative sans avoir à rouvrir tout le catalogue.

Placez la preuve sociale au moment du doute. Pas tout en haut des résultats, où personne ne doute de rien pour l’instant. Placez un avis d’un client avec le même profil directement sous le bouton Ajouter au panier.

Envoyer du trafic vers la landing page du quiz

Faites correspondre la publicité à la page. Le titre de la page doit répéter la promesse de la publicité, idéalement avec les mêmes mots. Google recommande de choisir une page de destination qui correspond étroitement à la publicité et aux mots-clés, et qui reflète le call-to-action de la publicité.¹ Trois angles créatifs signifient trois pages, ou au minimum trois variantes de titre.

Gérez bien les UTM. Les rapports marketing de Shopify lisent les paramètres standards utm_source, utm_medium, utm_campaign, utm_term, et utm_content et leur attribuent les sessions.⁶ Le problème sur une page de quiz est que les données intéressantes se trouvent à deux endroits : la campagne qui a envoyé la visite, et les réponses que l’acheteur a données. Vous voulez les deux sur la même ligne.

Lisez les valeurs UTM dans l’URL au chargement de la page, conservez-les dans le session storage pour qu’elles survivent aux changements d’étapes, puis attachez-les aux événements que le quiz déclenche. Notre guide sur la capture des valeurs UTM dans les formulaires Shopify couvre le JavaScript pour les lire et les persister.

Reciblez ceux qui ont commencé mais n’ont pas terminé. Ils vous ont dit ce qu’ils cherchaient et se sont arrêtés en cours de route, ce qui en fait une audience plus précise qu’un simple visiteur de la page. Construisez-la avec quiz_start moins quiz_complete et renvoyez-les vers la même URL avec un angle « reprenez là où vous vous êtes arrêté ».

Vitesse et signaux web essentiels (Core Web Vitals)

Cette page se trouve au sommet d’un entonnoir (funnel) payant, reçoit du trafic mobile depuis les réseaux sociaux, et a un seul travail : afficher un titre et un bouton assez vite pour que quelqu’un clique sur le bouton.

Le LCP est le chiffre qui compte. Le Largest Contentful Paint (LCP) doit être de 2,5 secondes ou moins au 75e percentile des chargements de page.⁷ Votre élément LCP est presque certainement l’image du hero ou le titre. Redimensionnez-la correctement, servez un format moderne, et ne la mettez jamais en lazy-load (chargement différé).

L’INP compte une fois le quiz démarré. L’Interaction to Next Paint (INP) devrait être de 200 millisecondes ou moins au 75e percentile.⁸ Chaque appui sur une réponse est une interaction, donc cinq questions, ce sont cinq chances de ressentir une lenteur.

Trois choses tournent mal spécifiquement sur ce type de page.

Le script du quiz bloque le hero. Si le JavaScript du quiz est analysé avant que le titre ne s’affiche, vous avez payé un clic pour montrer un écran blanc. Générez le hero en Liquid pour qu’il soit livré dans le code HTML, et différez (defer) tout ce dont le quiz a besoin.

Les images des options sont plus lourdes qu’elles n’en ont l’air. Cinq questions avec six options d’images chacune, c’est trente images. Ne préchargez que celles de la première question, chargez les autres en lazy-load, et gardez des miniatures (thumbnails) de petite taille.

Un widget rendu via une app est le mauvais outil ici. Une application de quiz injecte généralement un script qui va chercher la configuration du quiz pour le rendre côté client. Sur la plupart des pages, c’est un coût mineur. Sur une page dont l’unique but est de charger vite et de démarrer, cela ajoute un aller-retour réseau et un rendu côté client avant votre contenu principal et a tendance à retarder l’élément LCP.

Le tracking de la page

Une landing page de quiz est un funnel (entonnoir) à l’intérieur d’une seule URL, donc une vue de page globale ne vous dit presque rien. Déclenchez un événement à chaque étape.

Sur la boutique en ligne, vous publiez des événements personnalisés avec Shopify.analytics.publish, et un web pixel s’y abonne et reçoit le payload dans le champ customData de l’événement.⁹ Préfixez les noms d’événements personnalisés pour éviter les conflits avec les événements standards.

// Se déclenche sur le bouton Démarrer, avec le contexte de la campagne attaché
Shopify.analytics.publish("quiz:quiz_start", {
  page_handle: "find-your-shade",
  utm_campaign: sessionStorage.getItem("utm_campaign"),
});

Incluez l’index de la question et la réponse choisie dans question_complete. Ce simple champ transforme un taux d’abandon en un véritable diagnostic. Notre guide sur l’ajout d’événements personnalisés dans Shopify explique comment écrire et tester le pixel.

Quatre indicateurs au niveau de la page valent la peine d’être suivis :

• Taux de démarrage (Start rate). Les démarrages divisés par les sessions sur la landing page. Une mesure pure de la ligne de flottaison. S’il est bas, le problème vient du titre, du bouton ou du temps de chargement, et rien en aval ne pourra le sauver.
• Taux de complétion (Completion rate). Les quiz terminés divisés par les démarrages. Un chiffre lié à la conception du quiz, l’abandon par question vous indiquant l’étape à corriger.
• Ratio résultat-panier (Result-to-cart rate). Les ajouts au panier divisés par les vues de résultat. Il mesure la recommandation et la section des résultats, pas le quiz.
• Revenu par session. Le chiffre à comparer avec la page de collection ou la page produit (PDP) vers laquelle vous auriez envoyé ce trafic autrement.

Analysez-les dans cet ordre. Une page peut avoir un excellent taux de complétion et faire perdre de l’argent parce que presque personne n’a commencé.

Ce qu’il faut tester en premier

Testez dans l’ordre de l’entonnoir (funnel), car une correction en amont modifie chaque chiffre en aval.

1. Le titre d’accroche. C’est lui qui touche la plus grande audience et a le plus gros impact. Testez la formulation axée sur le bénéfice face à celle du bénéfice + temps, ou bien face à une question. C’est pour ça que le titre doit se trouver dans un paramètre de l’éditeur de thème plutôt que d’être codé en dur.

2. Le nombre de questions. Passer de sept à cinq questions est un vrai compromis : le taux de complétion augmente généralement, la précision de la recommandation peut chuter. Surveillez le ratio résultat-panier en parallèle de la complétion pour repérer si un quiz plus court produit de moins bons matchs.

3. Le placement de la capture d’e-mail. Que la demande de l’e-mail se situe avant ou après le résultat fait varier le taux de capture et de complétion. Ce compromis est couvert dans le guide du funnel de quiz. Ne testez ceci qu’une fois le titre validé.

Deux règles permettent de garder les résultats exploitables. Modifiez une seule chose à la fois. Et décidez de la durée du test et de l’indicateur décisif avant de commencer, car cette page répartit son trafic sur plusieurs étapes et l’échantillon à l’add_to_cart est bien plus petit que l’échantillon au quiz_start. Déclarer un gagnant sur le chiffre le plus mince de l’entonnoir est la façon la plus rapide de déployer un changement qui ne sert à rien.

Options de création : widget d’application ou code de thème natif

Deux voies permettent d’obtenir une landing page de quiz.

Une application de quiz s’installe rapidement et n’a besoin d’aucun développeur : une interface de création, une logique hébergée, et généralement une page de résultats hébergée. Les inconvénients sont des frais récurrents, un script supplémentaire, un widget qui peut ne pas coller à votre thème, et une dépendance, vu que désinstaller l’application supprime le quiz avec. Vérifiez les formules sur l’App Store en direct avant de vous engager, car les prix changent souvent.

Le code de thème natif implique que la page, la mise en page, le quiz et les résultats sont en Liquid, CSS et JavaScript dans votre thème. Aucun script additionnel, une adéquation parfaite à la marque, pas de frais mensuels. L’inconvénient est que quelqu’un doit le construire.

Fudge est un éditeur de vitrine IA qui écrit du code de thème natif. Vous décrivez la page, et il écrit le template, le layout, les sections et le JavaScript du quiz dans votre thème. Demandez « une landing page de quiz sur /pages/find-your-shade sans header ni footer, un shade finder à cinq questions, et une carte de résultat avec ajout au panier », puis affinez par prompt.

Parce que le résultat est du code de thème et non une couche générée par une application, il n’y a pas de script de quiz tiers avant votre hero, et la page survit à une désinstallation. Sur une page dont tout l’argumentaire repose sur la vitesse et la cohérence du message, c’est le compromis qui compte.

FAQ