Un client qui hésite, c’est un client qui n’achète pas. Et dans 90 % des cas, ses questions sont les mêmes que celles des 200 clients précédents. La FAQ, c’est ton service client en autopilote — disponible 24h/24, sans te coûter un centime de main-d’œuvre. Pourtant, la plupart des boutiques Shopify soit n’en ont pas, soit ont une FAQ moche et inutilisable sur mobile.
Dans ce tutoriel, je te montre comment créer un vrai système de FAQ sur Shopify : un accordion élégant, compatible mobile, avec le balisage schema qui te permet d’apparaître dans les résultats Google avec des rich snippets. Sans app payante.
Pourquoi ta boutique Shopify a absolument besoin d’une FAQ
Avant de plonger dans le code, parlons chiffres. Une FAQ bien faite réduit les contacts SAV de 25 à 40 %. Sur une boutique qui génère 50 emails de support par semaine, ça représente facilement 15 à 20 heures économisées par mois.
Mais la FAQ a un autre avantage souvent sous-estimé : le SEO. Google peut indexer tes questions-réponses et les afficher directement dans la SERP sous forme de rich snippets (les encadrés avec des questions pliables sous le lien). Résultat : plus de visibilité, plus de clics, même si tu n’es pas en première position.
Les questions les plus importantes à couvrir dans ta FAQ :
- Délais et frais de livraison
- Politique de retour et remboursement
- Sécurité du paiement
- Questions sur les produits (tailles, matières, entretien)
- Suivi de commande
- Contact et service client
Les 3 façons de créer une FAQ sur Shopify
Option 1 : La page texte simple (à éviter)
La méthode de base : créer une page via Boutique en ligne > Pages et taper les questions-réponses en texte. Ça fonctionne, mais c’est inutilisable sur mobile dès que tu dépasses 5 questions. Pas d’accordion, pas de schema markup. À éviter.
Option 2 : Une app FAQ (coûteuse sur le long terme)
Des apps comme HelpCenter, Tidio FAQ ou Omega FAQ coûtent entre 10 et 30 € par mois. Sur 12 mois, ça fait 120 à 360 € pour quelque chose que tu peux faire en 15 minutes de code. Je te déconseille cette voie sauf si tu as besoin de fonctionnalités avancées (analytics des questions, import CSV, multilingue automatique).
Option 3 : Le code Liquid OS 2.0 (recommandé)
C’est ce qu’on va faire maintenant. Compatible avec tous les thèmes Shopify OS 2.0 (Dawn, Speedfly, Refresh, etc.), gratuit, et performant.
Tutoriel : créer une section FAQ Shopify avec Liquid
Étape 1 : Créer le fichier de section
Dans ton admin Shopify, va dans Boutique en ligne > Thèmes, clique sur Actions > Modifier le code (ou Edit code).
Dans le dossier sections/, crée un nouveau fichier : faq-accordion.liquid
Colle ce code :
{% comment %}
Section FAQ Accordion — Compatible Shopify OS 2.0
Utilise les blocs de section pour gérer les Q/R dans l'éditeur
{% endcomment %}
<section class="faq-section" id="faq-{{ section.id }}">
<div class="page-width">
{% if section.settings.title != blank %}
<h2 class="faq-section__title">{{ section.settings.title }}</h2>
{% endif %}
{% if section.settings.subtitle != blank %}
<p class="faq-section__subtitle">{{ section.settings.subtitle }}</p>
{% endif %}
<div class="faq-accordion" itemscope itemtype="https://schema.org/FAQPage">
{% for block in section.blocks %}
{% if block.type == 'faq_item' %}
<div class="faq-item" itemprop="mainEntity" itemscope itemtype="https://schema.org/Question" {{ block.shopify_attributes }}>
<button
class="faq-item__question"
aria-expanded="false"
aria-controls="faq-answer-{{ block.id }}"
itemprop="name"
>
{{ block.settings.question }}
<span class="faq-item__icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="6 9 12 15 18 9"></polyline>
</svg>
</span>
</button>
<div
class="faq-item__answer"
id="faq-answer-{{ block.id }}"
itemprop="acceptedAnswer"
itemscope
itemtype="https://schema.org/Answer"
>
<div itemprop="text">
{{ block.settings.answer }}
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
{% stylesheet %}
.faq-section {
padding: 60px 0;
}
.faq-section__title {
text-align: center;
margin-bottom: 12px;
font-size: 2rem;
}
.faq-section__subtitle {
text-align: center;
color: #666;
margin-bottom: 40px;
font-size: 1.1rem;
}
.faq-accordion {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid #e5e7eb;
}
.faq-item__question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
text-align: left;
color: inherit;
gap: 16px;
}
.faq-item__question:hover {
color: var(--color-accent, #5b21b6);
}
.faq-item__icon {
flex-shrink: 0;
transition: transform 0.3s ease;
}
.faq-item__question[aria-expanded="true"] .faq-item__icon {
transform: rotate(180deg);
}
.faq-item__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease, padding 0.35s ease;
font-size: 0.95rem;
line-height: 1.7;
color: #444;
}
.faq-item__answer.is-open {
max-height: 600px;
padding-bottom: 20px;
}
{% endstylesheet %}
{% javascript %}
(function() {
const accordion = document.querySelector('#faq-{{ section.id }} .faq-accordion');
if (!accordion) return;
accordion.querySelectorAll('.faq-item__question').forEach(function(btn) {
btn.addEventListener('click', function() {
const isOpen = this.getAttribute('aria-expanded') === 'true';
const answer = document.getElementById(this.getAttribute('aria-controls'));
// Ferme tous les autres
accordion.querySelectorAll('.faq-item__question').forEach(function(otherBtn) {
otherBtn.setAttribute('aria-expanded', 'false');
const otherAnswer = document.getElementById(otherBtn.getAttribute('aria-controls'));
if (otherAnswer) otherAnswer.classList.remove('is-open');
});
// Ouvre celui cliqué si pas déjà ouvert
if (!isOpen) {
this.setAttribute('aria-expanded', 'true');
if (answer) answer.classList.add('is-open');
}
});
});
})();
{% endjavascript %}
{% schema %}
{
"name": "FAQ Accordion",
"tag": "section",
"class": "section-faq",
"settings": [
{
"type": "text",
"id": "title",
"label": "Titre de la section",
"default": "Questions fréquentes"
},
{
"type": "text",
"id": "subtitle",
"label": "Sous-titre",
"default": "Tout ce que vous devez savoir avant de commander"
}
],
"blocks": [
{
"type": "faq_item",
"name": "Question / Réponse",
"settings": [
{
"type": "text",
"id": "question",
"label": "Question",
"default": "Quels sont les délais de livraison ?"
},
{
"type": "richtext",
"id": "answer",
"label": "Réponse",
"default": "<p>Nos commandes sont expédiées sous 24h-48h ouvrées. La livraison standard prend 3 à 5 jours ouvrés en France métropolitaine.</p>"
}
]
}
],
"presets": [
{
"name": "FAQ Accordion",
"blocks": [
{
"type": "faq_item"
},
{
"type": "faq_item"
},
{
"type": "faq_item"
}
]
}
]
}
{% endschema %}
Étape 2 : Ajouter la section à ta page
Une fois le fichier sauvegardé, va dans l’éditeur de thème (Personnaliser). Sur n’importe quelle page — page d’accueil, page produit, page dédiée — clique sur Ajouter une section et cherche FAQ Accordion.
Tu peux ensuite ajouter autant de blocs “Question / Réponse” que tu veux, directement depuis l’interface de personnalisation, sans plus toucher au code.
Étape 3 : Créer une page FAQ dédiée
Pour avoir une URL /pages/faq sur ton site, crée une page dans Boutique en ligne > Pages, nomme-la “FAQ” et assigne-lui un modèle de page personnalisé. Si ton thème supporte les page templates OS 2.0, tu peux créer templates/page.faq.json pour composer visuellement ta page FAQ avec la section.
{
"sections": {
"faq_section": {
"type": "faq-accordion",
"blocks": {
"block_1": {
"type": "faq_item",
"settings": {
"question": "Comment suivre ma commande ?",
"answer": "<p>Un email de confirmation avec un numéro de suivi est envoyé dès l'expédition de votre colis. Vous pouvez suivre votre commande en temps réel depuis le lien fourni.</p>"
}
}
},
"block_order": ["block_1"],
"settings": {
"title": "Questions fréquentes"
}
}
},
"order": ["faq_section"]
}
Le balisage schema FAQ : indispensable pour le SEO
Tu l’as peut-être remarqué dans le code ci-dessus : j’ai intégré les attributs itemscope, itemtype et itemprop directement dans le HTML. C’est le balisage schema.org/FAQPage en microdata.
Google l’utilise pour afficher des rich snippets dans les résultats de recherche. Concrètement, quand quelqu’un cherche “délai de livraison [ta boutique]”, Google peut afficher les 3 premières questions de ta FAQ directement sous ton lien, avec les réponses dépliables. Le taux de clic peut augmenter de 20 à 30 % sur les requêtes concernées.
Condition pour que les rich snippets s’affichent : les questions et réponses doivent être visibles sur la page (pas cachées par du CSS) et le contenu doit être pertinent et complet.
FAQ sur fiche produit : le cas particulier
La FAQ sur la page de collection ou d’accueil, c’est bien. Mais la FAQ sur la fiche produit, c’est encore plus puissant pour les conversions. Les clients arrivent sur une fiche produit avec des questions très spécifiques (matière, entretien, compatibilité, délai de retour) et c’est là que tu peux les rassurer ou les perdre.
Le code de la section que tu viens d’installer fonctionne aussi sur les fiches produit : ajoute-la dans l’éditeur de thème en mode page produit, et crée un bloc par question spécifique à tes articles.
Si tu veux aller plus loin avec une FAQ dynamique par produit (questions différentes selon la variante sélectionnée), c’est faisable en Liquid mais plus avancé — ça fera l’objet d’un article dédié.
Les erreurs courantes à éviter
Réponses trop courtes. Une réponse d’une ligne ne rassure personne. Vise 2 à 4 phrases par réponse, avec du concret (délais exacts, conditions précises, exemples).
Trop de questions. Une FAQ de 50 questions est inutilisable. Commence avec 8 à 12 questions et ajoute au fur et à mesure selon les vraies demandes de tes clients.
Ignorer les questions réelles. La meilleure source pour ta FAQ, c’est tes emails de support. Relis tes 30 derniers tickets et note les questions qui reviennent.
Oublier de mettre à jour. Ta politique de livraison change ? Tes délais évoluent ? La FAQ doit être mise à jour en même temps que tes conditions, sinon elle devient un outil de méfiance plutôt que de confiance.
Shopify ou pas encore ?
Si tu lis cet article et que tu n’es pas encore sur Shopify, sache que la plateforme reste en 2026 la référence pour créer une boutique e-commerce professionnelle en France. L’écosystème d’apps, la robustesse technique et la facilité de prise en main n’ont pas d’équivalent.
Tu peux démarrer un essai gratuit Shopify → et tester toutes ces personnalisations par toi-même, sans engagement.
Et si tu es déjà sur Shopify mais que tu veux un thème qui inclut nativement une section FAQ (sans avoir à installer quoi que ce soit), teste l’essai gratuit Shopify avec Speedfly, le thème conçu pour les e-commerçants francophones.
Tu veux un thème Shopify qui inclut déjà tout ça ? Découvre Speedfly, le thème Shopify français pensé pour les e-commerçants francophones. FAQ accordion, sticky cart, barre de livraison offerte, popup, compte à rebours — tout est intégré, sans app supplémentaire.
