Une fois la barre de recherche de la FAQ en ligne, le fondateur de Kestrel a envoyé un autre lien : la page d’aide d’un concurrent avec un en-tête coloré, un champ de recherche au centre, des questions regroupées par thème et une barre « D’autres questions ? » en bas. Peut-on avoir exactement ça, comme nouveau modèle, sans toucher à la page FAQ actuelle ? Un jour plus tard, deuxième demande : et pouvez-vous remplir tout le contenu, pour que nous n’ayons rien à taper ?
Cette étude de cas couvre les deux moitiés : le modèle de page FAQ Shopify lui-même, et le travail moins spectaculaire qui consiste à écrire 41 réponses réellement exactes.
À propos de cette étude de cas : il s’agit d’un récit composite fondé sur de vrais projets Shopify. Le nom de la marque et certains détails ont été modifiés. Le code de la section, les limites rencontrées et les problèmes de contenu sont exactement ceux que nous avons traités.
Le projet en bref
| Livrables | 1 nouvelle section, 1 nouveau modèle de page, aucun fichier existant modifié |
| Mise en page | En-tête coloré avec recherche, catégories en accordéons, barre de contact |
| Contenu | 7 catégories, 41 questions, rédigées à partir des politiques de la boutique |
| Données structurées | JSON-LD FAQPage généré à partir des blocs de questions |
| Modification | Chaque titre, question, réponse et couleur se modifie dans l’éditeur de thème |
Un nouveau modèle, pour que rien d’autre ne casse
La page FAQ existante utilisait la section FAQ du thème avec un formulaire de contact à côté. Plutôt que de la reconstruire, nous avons créé une section séparée, faq-page.liquid, et un modèle de page, page.faq-2.json, qui l’utilise. Le marchand attribue le modèle à une page dans l’administration. L’ancienne page continue de fonctionner jusqu’à ce qu’il décide de basculer, et revenir en arrière se fait avec un menu déroulant.
Comment la section est construite
La section a deux types de blocs, Catégorie et Question, dans une liste plate. Dans l’éditeur de thème, c’est simple à comprendre : chaque question appartient à la catégorie au-dessus, et déplacer un bloc le fait changer de catégorie. En Liquid, une petite boucle ouvre un nouveau groupe à chaque catégorie et ferme le précédent :
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when 'category' -%}
{%- unless forloop.first -%}</div>{%- endunless -%}
<div class="faqp__group" data-faqp-group>
<h2>{{ block.settings.title | escape }}</h2>
{%- when 'question' -%}
<details class="faqp__item" data-faqp-item>…</details>
{%- endcase -%}
{%- if forloop.last -%}</div>{%- endif -%}
{%- endfor -%}- Accordéons natifs. Chaque question est un élément
<details>: ouvrir et fermer ne demande aucun JavaScript et fonctionne au clavier. - Recherche intégrée. La même logique de filtrage que le snippet précédent, limitée à la section et cherchant ses éléments au moment de la recherche.
- Données structurées FAQPage. La section écrit le JSON-LD à partir des blocs de questions, le balisage correspond donc toujours à la page.
- Des réglages, pas du code. Couleurs de l’en-tête, du texte et du bouton, texte indicatif, message sans résultat et bouton de contact sont des réglages de l’éditeur de thème.
La limite dont personne ne parle : 50 blocs
Notre premier jet comptait 7 catégories et 49 questions : 56 blocs. Shopify autorise au plus 50 blocs par section, et un modèle qui en contient davantage ne s’enregistre pas. Les catégories comptent aussi comme des blocs.
Nous avons réduit le contenu à 41 questions, 48 blocs au total, ce qui laisse de la place pour deux de plus. Choisir quoi supprimer a été facile, pour une raison que la partie suivante explique. Les boutiques qui ont besoin de plus de 50 entrées peuvent ajouter une seconde instance de la section au même modèle, par exemple une pour les commandes et une pour les produits.
Écrire 41 réponses exactes
Le marchand nous a demandé de remplir la page avec un contenu « comme le leur ». Copier les textes d’aide d’une autre entreprise n’a jamais été envisageable. Leurs politiques ne sont pas celles de cette boutique, et leurs formulations leur appartiennent. Chaque réponse a donc été rédigée à partir des propres sources du marchand : politique de remboursement, politique d’expédition, page de garantie, fiches produit et moyens de paiement affichés dans le pied de page.
Le faire avec soin a révélé quelque chose que le marchand n’avait pas remarqué. Sa propre boutique se contredisait à quatre endroits :
| Livraison gratuite | dès 70 € dans l’ancienne FAQ, dès 30 € sur les fiches et dans la barre du site |
| Délai de retour | 30 jours dans la politique de remboursement, 90 jours dans l’ancienne FAQ et sur les fiches |
| Frais de retour | à la charge du client selon la politique, « retours gratuits » sur les fiches |
| Autonomie de la batterie | 120 minutes dans une puce du produit, 90 minutes dans sa propre FAQ |
Nous n’avons pas tranché en silence. Là où une politique légale existait, la FAQ l’a suivie, et le marchand a reçu une courte liste de chaque contradiction avec notre choix, pour qu’il décide et corrige aussi les pages d’origine. Nous avons aussi retiré deux réponses que nous ne pouvions confirmer nulle part sur le site, plutôt que de deviner. C’est ce qui a rendu facile la réduction à 50 blocs.
Le contenu dans un fichier, pas en clics
Saisir 48 blocs dans l’éditeur de thème est lent et source d’erreurs. Nous avons gardé les questions dans un petit fichier de contenu et généré le JSON du modèle avec un script. Quand le marchand aura tranché les contradictions, régénérer le modèle prendra quelques secondes. Une fois installé, chaque réponse reste modifiable normalement dans l’éditeur de thème.
L’installer
- Créez la section
faq-pagedans l’éditeur de code et collez le fichier de la section. - Créez un modèle de page nommé
faq-2(JSON) et collez le fichier du modèle. La section doit exister d’abord, car le modèle y fait référence. - Ouvrez la page FAQ dans Boutique en ligne → Pages et choisissez le modèle
faq-2.
Ce que nous ferions sur tout projet de FAQ
- Écrire à partir des politiques, pas de mémoire ni d’après un concurrent.
- Chercher les contradictions avant de publier. Une FAQ en désaccord avec la politique de remboursement crée les demandes qu’elle devait éviter.
- Prévoir la limite de 50 blocs avant d’écrire le contenu.
- Garder le contenu dans un fichier régénérable, puis livrer un modèle que le marchand modifie comme n’importe quel autre.
Vous voulez une page d’aide comme celle-ci, ou une FAQ qui répond vraiment à vos clients ? Découvrez notre service de développement de thèmes Shopify ou contactez-nous.
Questions fréquentes
Peut-on créer une page FAQ Shopify sans application ?
Oui. Une section sur mesure avec des blocs catégorie et question, des accordéons natifs et un petit script de recherche couvre ce que font la plupart des applications FAQ, sans abonnement ni scripts supplémentaires sur chaque page.
Les données structurées FAQ donnent-elles des résultats enrichis dans Google ?
Depuis 2023, Google affiche surtout les résultats enrichis FAQ pour des sites officiels et de santé reconnus. Les données structurées restent valides et aident à comprendre la page, mais la plupart des boutiques ne doivent pas compter sur l’extrait dépliable.
Combien de questions une section FAQ peut-elle contenir ?
Une section Shopify peut contenir jusqu’à 50 blocs, catégories comprises. Pour plus, ajoutez une seconde section FAQ au même modèle.
Mon équipe pourra-t-elle modifier les questions plus tard ?
Oui. Chaque catégorie, question et réponse est un bloc dans l’éditeur de thème. Les ajouter, les supprimer ou les réordonner ne demande aucun code.