🟢🏆 Quiz

Créez une expérience interactive sur votre boutique Shopify en ajoutant un quiz de recommandation de produits.

Disponible depuis la version 1.6. Si vous avez une version antérieure, merci d'effectuer la mise à jour.

La section QUIZ du thème SHOPIWEB PREMIUM

AVANT DE COMMENCER : Assurez-vous d'avoir une licence active installée sur votre boutique Shopify®. Si ce n'est pas le cas, commandez une licence SHOPIWEB PREMIUM.

CONCEVOIR VOTRE QUIZ

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.

Exemple avec un site de vente d'accessoires de mode

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.

Les lignes rouges représentent le chemin lorsque l'utilisateur choisi un nœud papillon, et les lignes jaunes lorsque le choix est une cravate.

• 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.

COMMENT AJOUTER LA SECTION QUIZ

La section QUIZ ne peut être ajoutée que sur un nouveau modèle de page.

ÉTAPE 1 : Créer un nouveau modèle de page

Accédez à l'éditeur de thème pour voir vos modèles de pages

• Depuis l'interface de personnalisation, ouvrez le menu déroulant situé en haut au centre de l'écran, puis cliquez sur Pages.

Cliquez sur Créer un modèle pour créer un nouveau modèle de page

• Maintenant, cliquez sur Créer un modèle.

Créez le modèle de page à partir d'un modèle existant

• 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.

ÉTAPE 2 : Ajouter la section QUIZ au nouveau modèle de page

Ajoutez la section QUIZ sur le nouveau modèle de page

• 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.

Les options de personnalisation apparaissent dans la colonne de droite

• 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.

COMMENT PERSONNALISER LA SECTION QUIZ

ÉTAPE 1 : L'aspect général

Personnalisez l'aspect général de la section QUIZ

• Choisissez la couleur d'arrière-plan de la section à l'aide du menu déroulant. Les options disponibles reprennent vos couleurs des paramètres de thème.

• 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.

ÉTAPE 2 : L'en-tête de la section

Personnalisation de l'en-tête de la section QUIZ

• (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.

Ajoutez un titre et une description pour votre quiz

• (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.

ÉTAPE 3 : L'aspect des questions

Personnalisez l'apparence des questions du Quiz

• (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.

ÉTAPE 4 : L'aspect des produits qui apparaîtront dans les résultats

Personnalisation de l'aspect des produits proposés en fin de Quiz

• (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.

Différence entre un produit avec un Badge de vente et sans Badge de vente

ÉTAPE 5 : Les derniers réglages de la section

Personnalisation de l'aspect des produits proposés en fin de Quiz

• (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.

COMMENT AJOUTER UNE QUESTION AU QUIZ

ÉTAPE 1 : Ajouter le bloc question N°1

Ajouter la première question à votre Quiz

• (1) Depuis la colonne de gauche, sélectionnez la section 🏆 Quiz puis cliquez sur Ajouter un bloc.

• (2) Sélectionnez le bloc Question.

ÉTAPE 2 : Personnaliser la question N°1

Personnalisation de l'aspect général de la première 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).

ÉTAPE 3 : L'aspect Général de la question N°1

Ajout de la question et d'une description éventuelle à la question N°1

• (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.

ÉTAPE N°4 : Ajouter les réponses possibles pour la question N°1

Ajout des différentes réponses possibles à la question N°1

• (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.

Pour ajouter des images correspondantes à chacune des réponses possibles, créez un visuel de taille 240 x 240 pixels, puis renommez le fichier de cette façon : quiz-numérodequestion-réponse.png. Pour notre exemple, je renommerais l'image de la cravate ainsi : quiz-1-cravate.png. Et celle du nœud papillon : quiz-1-nœud-papillon.png.

ÉTAPE 5 : Ajuster les points d'arrêt de la question N°1

Ajustement du nombre d'éléments de la question N°1 à afficher par ligne selon la taille d'écran

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.

ÉTAPE N°6 : Ajouter le bloc question N°2

Ajout de la deuxième question du Quiz

• (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.

ÉTAPE N°7 : Personnaliser la question N°2

Personnalisation de l'aspect général de la deuxième 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).

ÉTAPE N°8 : L'aspect général de la question N°2

Ajout de la question et d'une description éventuelle à la question N°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.

ÉTAPE N°9 : Ajouter les réponses possibles pour la question N°2

Ajout des différentes réponses possibles à la question N°2

• (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.

Pour ajouter des images correspondantes à chacune des réponses possibles à la question N°2, créez un visuel de taille 240 x 240 pixels, puis renommez le fichier de cette façon : quiz-numérodequestion-réponse.png. Pour notre exemple, je renommerais l'image à motifs ainsi : quiz-2-a-motifs.png. Et celle du style fleurie : quiz-2-fleurie.png.

ÉTAPE N°10 : Ajuster les points d'arrêt de la question N°2

Ajustement du nombre d'éléments de la question N°2 à afficher par ligne selon la taille d'écran

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.

COMMENT AFFICHER LE RÉSULTAT DU QUIZ

ÉTAPE 1 : Ajouter le bloc des résultats

Ajout des résultats au Quiz

• (1) Depuis la colonne de gauche, sélectionnez la section 🏆 Quiz puis cliquez sur Ajouter un bloc.

• (2) Sélectionnez le bloc Résultats.

ÉTAPE 2 : Personnaliser les résultats

Personnalisation de l'aspect général des 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).

ÉTAPE 3 : L'aspect général des résultats

Ajoutez un titre et une description éventuelle aux résultats

• (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.

ÉTAPE 4 : Ajouter les ensembles de résultats possible

Ensemble 1

Ajout de l'ensemble 1 selon les réponses fournies

• (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

Ajout de l'ensemble 2 selon les réponses fournies

• (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.

L'ASTUCE

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.

LA VIDÉO