🏆 Quiz
Créez une expérience interactive sur votre boutique Shopify en ajoutant un quiz de recommandation de produits.
Dernière mise à jour
Cet article vous a-t-il été utile ?
Créez une expérience interactive sur votre boutique Shopify en ajoutant un quiz de recommandation de produits.
Dernière mise à jour
Cet article vous a-t-il été utile ?
AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, .
Avant d'ouvrir votre tableau de bord Shopify, il est nécessaire de comprendre comment fonctionne la section. Quelle est la mécanique pour que la section propose les bons produits une fois que l'utilisateur a répondu à toutes les questions ?
Un quiz est composé de questions et d'un résultat. Prenez une feuille de papier et un crayon et imaginez chaque étape de votre questionnaire.
Comment aider mes visiteurs a choisir le bon produit ?
Combien de questions vais-je devoir poser avant de proposer une sélection de produits ?
Combien de réponses possibles pour chacune de ces questions ?
Pour vous aider, faisons l'exercice ensemble.
Imaginons que nous devions créer un Quiz pour un site qui vend des nœuds papillons et des cravates pour homme. Nous aimerions aider nos visiteurs à choisir entre un nœud papillon ou une cravate à motifs ou fleuris.
Pour la question N°1, nous pourrions demander :
Quel type d'accessoire préférez-vous ?
Les réponses possibles seraient :
Nœud papillon
Cravate
Pour la question N°2, nous affinons en demandant :
Quel style aimeriez-vous ?
Les réponses possibles seraient :
À motifs
Fleurie
Notre dernière étape serait le résultat. Après avoir répondu aux deux questions, le visiteur serait face à une proposition personnalisée.
Combien de résultats allons-nous proposer ?
Il y a une formule simple : Nombre de questions x Nombre de réponses par question = Nombre de résultats.
Dans notre exemple, l'utilisateur peut apporter les réponses suivantes aux cumul des deux questions :
Nœud papillon, à motifs
Nœud papillon, fleurie
Cravate, à motifs
Cravate, fleurie
Il y a 4 combinaisons possibles ce qui nous demande de créer 4 résultats différents (2 questions x 2 réponses par question = 4 résultats).
Voici un schéma de notre questionnaire. Vous pouvez en faire un de votre côté pour que ce soit plus simple à visualiser votre futur quiz. Cela vous aidera lors de sa mise en place sur la boutique.
Résultat N°1 : Une cravate à motifs
Résultat N°2 : Deux nœuds papillon à motifs
Résultat N°3 : Une cravate fleurie
Résultat N°4 : Deux nœuds papillon fleurie
Maintenant que vous avez vos questions et que vous connaissez le nombre de résultats à créer, il est temps de vous rendre sur votre interface de personnalisation du thème SHOPIWEB PREMIUM.
La section QUIZ ne peut être ajoutée que sur un nouveau modèle de page.
Depuis l'interface de personnalisation, ouvrez le menu déroulant situé en haut au centre de l'écran, puis cliquez sur Pages.
Maintenant, cliquez sur Créer un modèle.
Nommez votre nouveau modèle de page, puis sélectionnez selon quel modèle de page existant vous souhaiter le créer. Validez votre choix en cliquant sur Créer un modèle.
Depuis le menu en haut au centre de l'écran, vérifiez que vous êtes bien sur votre nouveau modèle de page.
Puisque votre nouveau modèle a été créé selon un modèle existant, vous avez des sections qui apparaissent. Vous pouvez les supprimer depuis la colonne de gauche afin d'avoir un modèle de page vierge.
Ensuite, faites glisser le curseur de votre souris pour voir apparaître le + permettant d'ajouter une section.
Un menu déroulant avec toutes les sections disponibles s'affiche. Sélectionnez celle qui se nomme 🏆 Quiz.
Une fois la section ajoutée, sélectionnez-là dans la colonne de gauche (1) pour voir ses options de personnalisation dans la colonne de droite (2). Selon la taille de votre écran d'ordinateur, la colonne de droite peut s'afficher à gauche, à la place de celle des sections.
Si la couleur choisie est foncée, vous pouvez activer le dégradé d'arrière-plan en cochant la case correspondante.
Réglez ensuite la largeur de la section : Préférez-vous qu'elle soit en pleine largeur ou dans un conteneur ? Si vous choisissez le Conteneur, entrez la taille de ce dernier en pixels dans le champs Largeur maximale (px).
Alignement du texte : Gauche ou centre.
(1) Pour afficher une petite image dans l'en-tête de la section, importez-en une puis réglez sa taille en entrant le chiffre en pixels dans le champs du dessous.
(2) Écrire le texte à afficher en tant que Légende de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
(3) Écrire le titre à afficher en tant que Titre overlay (titre affiché en transparence en arrière-plan) de section ou bien le supprimer pour ne rien afficher. Si vous en avez mis un, réglez ensuite sa taille et sa couleur à l'aide des deux options suivantes.
(1) Écrire le titre souhaité pour la section dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H2 sauf si la section est la première de votre page). Réglez ensuite la taille d'affichage du titre.
(2) Écrire la description générale souhaitée pour la section dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.
(1) Les réponses possibles pour chaque question du Quiz, apparaîtront dans des cartes. Quelle couleur souhaitez-vous pour les bordures de ces cartes ? Choisissez-en une depuis le menu déroulant. Chaque couleur correspond à celles de vos paramètres de thème.
(2) Quelle animations souhaitez-vous pour l'affichage des questions ? Faites votre choix parmis nos dizaines d'effets.
(1) Souhaitez-vous une bordure autour de l'image produit ? Sélectionnez Aucun ou Bordure. Si oui, sélectionnez ensuite sa couleur dans le menu déroulant du dessous puis le niveau d'ombre souhaitée.
(2) Cochez la case si vous souhaitez que le badge de vente s'affiche dans l'angle de vos cartes produits. Si vous ne savez ce qu'est un Badge de vente, regardez l'image suivante.
(1) À chaque étape du Quiz, l'utilisateur peut revenir en arrière à l'aide du bouton disponible au bas de la section. Personnalisez la couleur et la taille de ce bouton à l'aide des options Couleur du bouton et Taille du bouton.
(2) Terminons les réglages généraux de la section Quiz avec l'Espacement de la section. Laissez respirer votre section. Sauf si vous souhaitez créer un effet particulier avec une autre section, vous devez systématiquement ajouter du Padding supérieur et du Padding inférieur, autrement dit de l'espace à l'interieur de votre section. La Marge supérieure et la Marge inférieure peuvent restée à zéro car elles ajoutent de l'espace en dehors de la section.
(1) Depuis la colonne de gauche, sélectionnez la section 🏆 Quiz puis cliquez sur Ajouter un bloc.
(2) Sélectionnez le bloc Question.
(1) Sélectionnez la question depuis la colonne de gauche pour voir les options de personnalisation aparaîtrent dans la colonne de droite (2).
(1) Écrire le titre souhaité (posez simplement la question au lecteur) pour la Question dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H3). Réglez ensuite la taille d'affichage du titre.
(2) Écrire la description souhaitée pour la Question dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.
(1) Entrez les valeurs en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : Nœud papillon, Cravate.
(2) En cochant Afficher les images, vous pourrez faire apparaître des images dans chaque carte de réponse. Cela apporte une meilleure expérience utilisateur car la réponse est visuelle. Pour que le thème reconnaisse les images, suivez le tutoriel vidéo disponible au bas de cette page. Vous trouverez également les indications pour renommer correctement les images des réponses afin qu'elles s'affichent, dans l'encadré ci-dessous.
Les points d'arrêt permettent d'ajuster le nombre d'élements à afficher par ligne en fonction de la taille d'écran. Selon le nombre de réponses possibles, vous pouvez les afficher ligne par ligne ou côte à côte, et ajuster ce nombre à l'aide des curseurs correspondant à chaque taille d'écran (xs, sm, md, lg, xl, xxl).
Changez le format d'affichage d'écran pour voir le rendu depuis un mobile. Cliquez sur l'icône mobile (1).
(2) Ajustez le nombre d'élements par ligne à l'aide des curseurs. Par exemple, pour l'affichage mobile, le point d'arrêt correspondant est : xs.
(1) Comme pour la question N°1 lors de l'étape 1, depuis la colonne de gauche, sélectionnez la section 🏆 Quiz puis cliquez sur Ajouter un bloc.
(2) Sélectionnez le bloc Question.
(1) Sélectionnez la deuxième question depuis la colonne de gauche pour voir les options de personnalisation aparaîtrent dans la colonne de droite (2).
(1) Écrire le titre souhaité (posez simplement la question au lecteur) pour la Question dans le champ texte, puis réglez sa balise SEO (choisissez de préférence un H3). Réglez ensuite la taille d'affichage du titre.
(2) Écrire la description souhaitée pour la Question dans le champ texte suivant. Pour ne rien afficher, supprimez simplement le texte. Ensuite, réglez sa taille à l'aide de l'option suivante.
(1) Entrez les valeurs de la deuxième question en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : À Motifs, Fleurie.
(2) En cochant Afficher les images, vous pourrez faire apparaître des images dans chaque carte de réponse à la question N°2 (comme pour la question N°1). Cela apporte une meilleure expérience utilisateur car la réponse est plus visuelle. Pour que le thème reconnaisse les images, suivez le tutoriel vidéo disponible au bas de cette page. Vous trouverez également les indications pour renommer correctement les images des réponses afin qu'elles s'affichent, dans l'encadré ci-dessous.
Comme pour la question N°1, les points d'arrêt permettent d'ajuster le nombre d'élements à afficher par ligne selon la taille d'écran. En fonction du nombre de réponses possibles, vous pouvez les afficher ligne par ligne ou côte à côte, et ajuster ce nombre à l'aide des curseurs correspondant à chaque taille d'écran (xs, sm, md, lg, xl, xxl).
Changez le format d'affichage d'écran pour voir le rendu depuis un mobile. Cliquez sur l'icône mobile (1) pour voir votre boutique en mode mobile.
(2) Ajustez le nombre d'élements par ligne à l'aide des curseurs. Par exemple, pour l'affichage mobile, le point d'arrêt correspondant est : xs.
Continuez la même procédure si vous avez plus de deux questions.
(1) Depuis la colonne de gauche, sélectionnez la section 🏆 Quiz puis cliquez sur Ajouter un bloc.
(2) Sélectionnez le bloc Résultats.
(1) Sélectionnez le bloc des résultats depuis la colonne de gauche pour voir les options de personnalisation aparaîtrent dans la colonne de droite (2).
(1) Écrire le titre souhaité (exemple : Voici notre sélection rien que pour vous) dans le champ Titre, puis réglez sa balise SEO (choisissez de préférence un H3). Réglez ensuite la taille d'affichage du titre.
(2) Écrire la description souhaitée dans le champ texte suivant : Description (facultatif). Pour ne rien afficher, supprimez simplement le texte. Si vous avez mis une description, réglez sa taille à l'aide de l'option suivante.
Ensemble 1
(1) Entrez les valeurs du premier ensemble en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : Nœud papillon, À Motifs.
(2) Sélectionnez le(s) produit(s) correspondant(s) à l'Ensemble 1 depuis le menu Produits.
Ensemble 2
(1) Entrez les valeurs du deuxième ensemble en les séparant par une virgule. Pour notre exemple, nous ferions ainsi : Nœud papillon, Fleurie.
(2) Sélectionnez le(s) produit(s) correspondant(s) à l'Ensemble 2 depuis le menu Produits.
Continuez la même procédure si vous avez plus de deux ensembles de résultats.
Une fois tous vos ensembles de résultats ajoutés, cliquez sur Enregistrer pour ne perdre aucune de vos modifications.
Félicitations, vous avez réussi à créer un Quiz sur Shopify grâce au thème SHOPIWEB PREMIUM.
Pour améliorer l’engagement, pensez à utiliser des images et des descriptions inspirantes pour chaque question et réponse. Cela rendra le quiz plus interactif et attrayant pour les utilisateurs. N'oubliez pas d'ajouter le lien de votre page Quiz à un menu ou depuis une section de votre page d'accueil.
Choisissez la couleur d'arrière-plan de la section à l'aide du menu déroulant. Les options disponibles reprennent .
