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 une FAQ Shopify en accordéon, lisible sur mobile et facile à tenir à jour. Le balisage schema.org présent dans l’exemple décrit la structure des questions, mais ne déclenche plus de résultat enrichi FAQ dans Google.
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.
Une FAQ peut aussi aider les visiteurs qui cherchent une réponse précise sur la livraison, les retours ou le produit. Google peut indexer ce texte visible comme n’importe quel autre contenu utile de la page. Depuis mai 2026, il n’affiche toutefois plus les résultats enrichis FAQ : ne construis pas cette section pour obtenir un encadré spécial dans la SERP.
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 : Une page texte simple
Tu peux créer une page via Boutique en ligne > Pages et y écrire des questions-réponses claires. C’est souvent suffisant pour commencer. Si la liste devient longue sur mobile, regroupe-la par thème ou passe à une section en accordéon. Le balisage FAQPage n’est pas nécessaire pour que le texte soit lu.
Option 2 : Une app FAQ (coûteuse sur le long terme)
Certaines apps FAQ ajoutent des fonctions utiles, comme la recherche ou la traduction. Compare leur coût et leur utilité avec les options déjà offertes par ton thème avant de souscrire un abonnement.
Option 3 : Le code Liquid OS 2.0 (recommandé)
Vérifie d’abord les sections de ton thème dans l’éditeur Shopify. Si aucune ne convient, voici une section Liquid OS 2.0 personnalisée, sans abonnement supplémentaire.
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"]
}
Balisage FAQPage : à quoi sert-il encore ?
Le code ci-dessus inclut les attributs itemscope, itemtype et itemprop de schema.org/FAQPage en microdata. Ils décrivent les questions et réponses, mais ne constituent plus un levier de résultat enrichi FAQ dans Google.
Google a arrêté d’afficher les résultats enrichis FAQ le 7 mai 2026 et a retiré leur documentation en juin. Tu peux conserver ce balisage s’il sert à d’autres usages, ou l’omettre : il n’est pas nécessaire pour qu’une FAQ claire et visible soit utile aux clients ou indexable par Google. Voir l’annonce de Google Search Central.
À privilégier : des réponses exactes, visibles et faciles à lire sur mobile. Mets à jour les délais, tarifs et conditions dès qu’ils changent ; le balisage seul ne compense pas une réponse obsolète.
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.
Si tu veux un thème qui propose déjà une section FAQ, vérifie les sections disponibles dans ta version de Speedfly avant d’ajouter du code.
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.
