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 bien plus efficace qu’un embed sur la page d’accueil en termes de message match, de limitation des points de sortie, et d’URL propre vers laquelle diriger vos campagnes.
• Au-dessus de la ligne de flottaison : un titre d’accroche indiquant la promesse, un sous-titre d’une ligne, un bouton Start, et un bandeau de réassurance. Supprimez la navigation, le footer et toute offre concurrente.
• Construisez-la comme un template de page alternatif 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 généré par une app place un script avant votre hero, ce qui est le mauvais compromis pour une page dont le seul but est de charger vite et d’être lancée.

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

Ce guide parle du conteneur : la construction de la page, le template, le rythme, le trafic, la vitesse et le tracking. Pour la logique du quiz en elle-même, y compris le design des questions, le mapping réponses/produits et le timing de capture d’email, lisez notre guide sur le tunnel 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 sur la page d’accueil, un lien dans le menu, un bloc au milieu d’une page produit. C’est très bien pour les visiteurs organiques qui tombent dessus par hasard. Mais c’est le mauvais hôte pour du trafic payant.

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, si, et vous pouvez en créer une par angle.

Aucune fuite de navigation. Un embed se trouve dans une boutique complète. Le header offre un menu, une icône de recherche et un panier, et chacun de ces éléments est une sortie qui n’est pas le quiz.

Un rôle 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, à tester et à analyser.

Une URL propre. /pages/find-your-shade est une destination de campagne. Pointez vos pubs vers elle, mettez-la dans vos emails, retargetez tous ceux qui y sont allés, et lisez-la comme une ligne à part entière dans vos analytics.

Notre guide sur comment créer une landing page sur Shopify couvre la configuration générale. Le reste de ce guide concerne 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. Masquer le header avec du CSS le télécharge quand même. La méthode la plus propre est un deuxième fichier de layout.

Un template JSON accepte un attribut layout de premier niveau nommant le fichier de layout avec lequel l’afficher, par exemple "full-width" pour afficher layout/full-width.liquid.³ Réglez-le sur false pour n’avoir aucun layout.

{
    "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 en supprimant les groupes de sections header et footer. 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 de stylesheets, et content_for_layout.

Laissez un petit logo dans le hero pour que la page reflète toujours votre marque. Il ne faut juste pas qu’il renvoie 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 tunnel dans une seule URL, donc une pageview au niveau de la page 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 Start, avec le contexte de la campagne rattaché
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 sur question_complete. Ce simple champ transforme un chiffre d’abandon en diagnostic. Notre guide sur l’ajout d’événements personnalisés dans Shopify vous explique comment écrire et tester le pixel.

Quatre métriques au niveau de la page valent la peine d’être surveillées :

• Taux de démarrage (Start rate). Démarrages par rapport aux sessions sur la landing page. Une mesure pure de la ligne de flottaison. S’il est bas, le titre, le bouton ou le temps de chargement est le problème, et rien en aval ne pourra le sauver.
• Taux de complétion. Complétions par rapport aux démarrages. Une métrique sur le design du quiz, où l’abandon par question indique l’étape à corriger.
• Taux résultat-vers-panier. Ajouts au panier par rapport aux vues de résultats. Mesure la recommandation et la section de résultats, pas le quiz.
• Revenu par session. Le chiffre à comparer à la page de collection ou à la fiche produit (PDP) vers laquelle vous auriez envoyé ce trafic autrement.

Lisez-les dans cet ordre. Une page peut avoir un excellent taux de complétion et quand même perdre de l’argent, car presque personne ne l’a commencée.

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 vous permettent d’obtenir une landing page de quiz.

Une app de quiz s’installe rapidement et ne nécessite aucun développeur : une interface de création (builder), une logique hébergée, et généralement une page de résultats hébergée. Les coûts sont un abonnement récurrent, un script supplémentaire, un widget qui peut ne pas correspondre à votre thème, et une dépendance, puisque désinstaller l’app emporte le quiz avec elle. Vérifiez les abonnements actuels sur l’App Store avant de vous engager, car les prix changent souvent.

Le code de thème natif signifie que la page, le layout, le quiz et les résultats sont en Liquid, CSS et JavaScript dans votre thème. Pas de script supplémentaire, une correspondance exacte avec la marque, aucun frais mensuel. Le coût est que quelqu’un doit le construire.

Fudge est un éditeur de boutique 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ésultats avec ajout au panier”, puis affinez-la par prompt.

Parce que le résultat est du code de thème plutôt qu’une couche générée par une app, il n’y a pas de script de quiz tiers devant votre hero, et la page survit à la désinstallation. Sur une page dont tout l’argument repose sur la vitesse et le message match, c’est le compromis qui compte.

FAQ