RÉSERVER UN APPEL

Comment ajouter un quiz sur les articles de blog Shopify ?

Picture of Léopold DE WULF
Léopold DE WULF

Nous avons déjà vu comment ajouter les données structurées FAQ sur Shopify et comment optimiser une fiche produit en SEO. Si vous souhaitez ajouter un quiz interactif de recommandation produit directement dans vos articles de blog Shopify, sans application payante, vous êtes au bon endroit. Shopify bloque le JavaScript dans l’éditeur de contenu (il supprime toutes les balises <script> et les attributs onclick), c’est pourquoi la solution passe par le thème avec un metafield JSON, une section Liquid personnalisée et un simple marqueur HTML.

Voici les 4 étapes pour ajouter un quiz sur un article de blog Shopify :

  1. Créer le metafield du quiz dans Shopify.
  2. Ajouter la section Liquid personnalisée dans le thème.
  3. Placer le marqueur à l’endroit où vous souhaitez que le quiz apparaisse.
  4. Remplir le metafield avec les données du quiz.

1. Créer le metafield JSON du quiz

ajouter definition quiz shopify

ajouter metafield quiz shopify

ajouter metadonnée quiz shopify

Rendez-vous dans Paramètres → Définitions de champs personnalisés → Articles de blog, puis ajoutez un nouveau metafield :

  • Nom : Quiz
  • Namespace et clé : custom.quiz
  • Type : JSON

Ce metafield stockera toute la configuration de votre quiz (questions, réponses, résultats).

2. Ajouter la section Liquid personnalisée dans le thème

modifier themes quiz shopify

modifier article quiz shopify

ajouter liquid personnalise article quiz shopify

modifier custom liquid quiz shopify

Allez dans Boutique en ligne → Thèmes → Personnaliser. Sélectionnez le template « Articles de blog » → « Article par défaut ». Ajoutez une section « Liquid personnalisé » et collez le code ci-dessous.

Ce code est universel : il fonctionne sur tous les thèmes Shopify et supporte deux modes de quiz — arbre décisionnel et scoring.

{% assign quiz_check = article.metafields.custom.quiz %}
{% if quiz_check != blank %}

<script type="application/json" id="quiz-data">
  {%- if article.metafields.custom.quiz.value -%}
    {{ article.metafields.custom.quiz.value | json }}
  {%- else -%}
    {{ article.metafields.custom.quiz }}
  {%- endif -%}
</script>

<style>
.quiz-container { max-width: 600px; margin: 2rem auto; font-family: inherit; }
.quiz-question { display: none; }
.quiz-question.active { display: block; }
.quiz-question h3 { margin-bottom: 1rem; font-size: 1.8rem; color: var(--quiz-color, #000); }
.quiz-option {
  display: block; width: 100%; padding: 18px 22px; margin: 10px 0;
  border: 2px solid #ddd; border-radius: 8px; background: #fff;
  cursor: pointer; font-size: 1.3rem; text-align: left; transition: all 0.3s;
}
.quiz-option:hover { border-color: var(--quiz-color, #000); background: var(--quiz-hover, #f5f5f5); }
.quiz-option.selected { border-color: var(--quiz-color, #000); background: var(--quiz-selected, #e0e0e0); pointer-events: none; }
.quiz-progress-text { font-size: 1.1rem; color: #888; margin-bottom: 1rem; }
.quiz-result {
  display: none; text-align: center; padding: 2rem;
  border: 2px solid var(--quiz-color, #000); border-radius: 12px; background: var(--quiz-hover, #f5f5f5);
}
.quiz-result h3 { margin-bottom: 0.5rem; font-size: 1.5rem; color: var(--quiz-color, #000); }
.quiz-result p { margin: 0.5rem 0; color: #444; font-size: 1.1rem; }
.quiz-restart {
  display: inline-block; margin-top: 0.8rem; padding: 10px 22px;
  background: none; border: 2px solid var(--quiz-color, #000); border-radius: 8px;
  cursor: pointer; font-size: 1rem; color: var(--quiz-color, #000);
}
.quiz-restart:hover { background: var(--quiz-color, #000); color: #fff; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  try {
    var el = document.getElementById('quiz-data');
    if (!el) return;
    var raw = el.textContent.trim();
    var quizData = typeof raw === 'string' ? JSON.parse(raw) : raw;
    if (typeof quizData === 'string') quizData = JSON.parse(quizData);
  } catch(e) { return; }

  if (!quizData || !quizData.questions) return;
  var target = document.getElementById('quiz-ici');
  if (!target) return;

  if (quizData.color) {
    target.style.setProperty('--quiz-color', quizData.color);
    target.style.setProperty('--quiz-hover', quizData.colorHover || '#f5f5f5');
    target.style.setProperty('--quiz-selected', quizData.colorSelected || '#e0e0e0');
  }

  var questions = quizData.questions;
  var results = quizData.results;
  var isTree = quizData.type === 'tree';

  if (isTree) {
    var qMap = {};
    questions.forEach(function(q) { qMap[q.id] = q; });
    function showQ(id) {
      var q = qMap[id];
      var html = '<div class="quiz-container"><div class="quiz-question active">';
      html += '<h3>' + q.question + '</h3>';
      q.options.forEach(function(opt) {
        html += '<button class="quiz-option" data-next="' + (opt.next || '') + '" data-result="' + (opt.result || '') + '">' + opt.text + '</button>';
      });
      html += '</div></div>';
      target.innerHTML = html;
      target.querySelectorAll('.quiz-option').forEach(function(btn) {
        btn.addEventListener('click', function() {
          this.classList.add('selected');
          var n = this.getAttribute('data-next');
          var r = this.getAttribute('data-result');
          setTimeout(function() {
            if (r) showR(r); else if (n) showQ(n);
          }, 400);
        });
      });
    }
    function showR(key) {
      var r = results[key];
      target.innerHTML = '<div class="quiz-container"><div class="quiz-result" style="display:block"><h3>' + r.name + '</h3><p>' + r.description + '</p><button class="quiz-restart">Recommencer le quiz</button></div></div>';
      target.querySelector('.quiz-restart').addEventListener('click', function() { showQ(questions[0].id); });
    }
    showQ(questions[0].id);
    return;
  }

  var scores = {}, current = 0;
  for (var key in results) { scores[key] = 0; }
  var html = '<div class="quiz-container">';
  questions.forEach(function(q, i) {
    html += '<div class="quiz-question' + (i === 0 ? ' active' : '') + '" data-index="' + i + '">';
    html += '<p class="quiz-progress-text">Question ' + (i+1) + ' sur ' + questions.length + '</p>';
    html += '<h3>' + q.question + '</h3>';
    q.options.forEach(function(opt) {
      html += '<button class="quiz-option" data-scores=\'' + JSON.stringify(opt.scores) + '\'>' + opt.text + '</button>';
    });
    html += '</div>';
  });
  html += '<div class="quiz-result"><h3 class="quiz-result-title"></h3><p class="quiz-result-desc"></p><button class="quiz-restart">Recommencer le quiz</button></div></div>';
  target.innerHTML = html;

  target.querySelectorAll('.quiz-option').forEach(function(btn) {
    btn.addEventListener('click', function() {
      var s = JSON.parse(this.getAttribute('data-scores'));
      for (var k in s) { scores[k] = (scores[k] || 0) + s[k]; }
      this.classList.add('selected');
      setTimeout(function() {
        current++;
        if (current < questions.length) {
          target.querySelectorAll('.quiz-question').forEach(function(el) { el.classList.remove('active'); });
          target.querySelector('[data-index="' + current + '"]').classList.add('active');
        } else {
          var best = Object.keys(scores).reduce(function(a, b) { return scores[a] > scores[b] ? a : b; });
          var r = results[best];
          target.querySelector('.quiz-result-title').textContent = r.name;
          target.querySelector('.quiz-result-desc').textContent = r.description;
          target.querySelector('.quiz-result').style.display = 'block';
          target.querySelectorAll('.quiz-question').forEach(function(el) { el.style.display = 'none'; });
        }
      }, 400);
    });
  });

  target.querySelector('.quiz-restart').addEventListener('click', function() {
    current = 0;
    for (var k in scores) { scores[k] = 0; }
    target.querySelector('.quiz-result').style.display = 'none';
    target.querySelectorAll('.quiz-question').forEach(function(el) {
      el.style.display = ''; el.classList.remove('active');
      el.querySelectorAll('.quiz-option').forEach(function(b) { b.classList.remove('selected'); });
    });
    target.querySelector('[data-index="0"]').classList.add('active');
  });
});
</script>
{% endif %}

Ce code utilise des variables CSS (--quiz-color, --quiz-hover, --quiz-selected) pour la personnalisation des couleurs directement depuis le JSON, sans toucher au Liquid.

3. Placer le marqueur dans votre article

Mettre quiz dans blog shopify seo

Dans l’éditeur de contenu de votre article de blog, passez en mode HTML et placez ce marqueur à l’endroit où le quiz doit s’afficher :

<div id="quiz-ici"></div>

4. Remplir le metafield avec les données du quiz

ajouter JSON quiz shopify

En bas de la page d’édition de l’article, remplissez le metafield custom.quiz avec votre JSON.

Mode arbre décisionnel (recommandé pour 2-3 questions)

Le mode "type": "tree" est le plus précis : chaque réponse mène à une question différente ou directement à un résultat. Aucune ambiguïté possible.

{
  "title": "Quel produit est fait pour vous ?",
  "type": "tree",
  "color": "#3b7bba",
  "colorHover": "#eef4fb",
  "colorSelected": "#d6e6f5",
  "questions": [
    { "id": "q1", "question": "Quel est votre budget ?", "options": [
      { "text": "Moins de 50€", "next": "q2_low" },
      { "text": "50€ à 100€", "next": "q2_mid" },
      { "text": "Plus de 100€", "result": "produitPremium" }
    ]},
    { "id": "q2_low", "question": "Quelle est votre priorité ?", "options": [
      { "text": "La légèreté", "result": "produitLight" },
      { "text": "La polyvalence", "result": "produitPolyvalent" }
    ]},
    { "id": "q2_mid", "question": "Filaire ou sans fil ?", "options": [
      { "text": "Filaire", "result": "produitPolyvalent" },
      { "text": "Sans fil", "result": "produitLight" }
    ]}
  ],
  "results": {
    "produitPremium": {
      "name": "Produit Premium",
      "description": "Description courte du produit premium."
    },
    "produitLight": {
      "name": "Produit Light",
      "description": "Description courte du produit light."
    },
    "produitPolyvalent": {
      "name": "Produit Polyvalent",
      "description": "Description courte du produit polyvalent."
    }
  }
}

Mode scoring (recommandé pour 4+ questions)

Le mode "type": "scoring" attribue des points à chaque produit selon les réponses. Le produit avec le plus de points gagne. Utile quand il y a trop de combinaisons pour un arbre.

{
  "title": "Quel produit est fait pour vous ?",
  "type": "scoring",
  "color": "#e74c3c",
  "colorHover": "#fdf0ef",
  "colorSelected": "#f9d6d2",
  "questions": [
    { "question": "Quel est votre budget ?", "options": [
      { "text": "Petit budget", "scores": { "produitA": 3, "produitB": 1 } },
      { "text": "Budget moyen", "scores": { "produitB": 3, "produitC": 2 } },
      { "text": "Gros budget", "scores": { "produitC": 3 } }
    ]},
    { "question": "Votre priorité ?", "options": [
      { "text": "Performance", "scores": { "produitC": 3, "produitB": 1 } },
      { "text": "Simplicité", "scores": { "produitA": 3, "produitB": 2 } }
    ]}
  ],
  "results": {
    "produitA": { "name": "Produit A", "description": "Description du produit A." },
    "produitB": { "name": "Produit B", "description": "Description du produit B." },
    "produitC": { "name": "Produit C", "description": "Description du produit C." }
  }
}

Adaptez le quiz à votre marque avec ChatGPT ou Claude

Vous n’avez pas besoin de construire le JSON à la main. Copiez le prompt ci-dessous et collez-le dans ChatGPT ou Claude en remplaçant les éléments entre crochets :

Génère un JSON de quiz pour un article de blog Shopify.

Contexte :
- Thématique : [votre thématique, ex: aspirateurs anti-acariens]
- Produits à recommander : [liste des produits avec une description courte de chacun]
- Couleur principale de ma marque : [code hex, ex: #3b7bba]
- Nombre de questions souhaité : [2 à 3 pour un arbre, 4+ pour du scoring]

Règles :
- Si 2-3 questions : utilise le mode "type": "tree" (arbre décisionnel, chaque réponse mène à la suivante ou au résultat)
- Si 4+ questions : utilise le mode "type": "scoring" (chaque réponse attribue des points aux produits)
- Ajoute les clés "color", "colorHover" et "colorSelected" avec des couleurs cohérentes avec ma couleur principale
- Les clés de produits dans "results" doivent être en camelCase sans accents
- Chaque résultat a un "name" et une "description" courte (1-2 phrases)
- Donne-moi uniquement le JSON, rien d'autre

Comment fonctionne la solution Metafield + Liquid + Marqueur ?

Shopify supprime tout JavaScript (<script>, onclick) dans l’éditeur de blog. Il est donc impossible d’ajouter un quiz directement dans le contenu. La solution contourne cette limitation en trois couches :

  • Metafield JSON : stocke les données du quiz (questions, réponses, résultats) au niveau de l’article.
  • Section Liquid personnalisée : injectée dans le thème, elle lit le metafield et génère le CSS + JavaScript du quiz. Le JSON est placé dans une balise <script type="application/json"> pour éviter les problèmes de compatibilité entre thèmes.
  • Marqueur HTML : un simple <div id="quiz-ici"></div> dans le contenu de l’article indique au script où injecter le quiz.

Conclusion

Un quiz de recommandation produit sur un article de blog Shopify augmente l’engagement et le taux de conversion. Avec cette méthode — un metafield JSON, une section Liquid personnalisée et un marqueur HTML — vous pouvez ajouter un quiz sur n’importe quel article, sans application payante et sans toucher au code du thème à chaque nouvel article. Utilisez le prompt ci-dessus pour générer le JSON adapté à votre catalogue, et collez-le dans le metafield.

Retour en haut