Dans ce tutoriel nous allons voir comment créer un système de FAQ sur shopify en accordéon

Visuel du système FAQ de type accordéon

Voici le code d’exemple à mettre dans votre éditeur pour proposer un système FAQ simple et efficace à mettre dans votre page FAQ

Installation dans une page de shopify

Rendez vous sur votre page FAQ et dans votre éditeur passez en mode code avec l’icône </> et collez le code ci-dessous, repassez en mode normal et adaptez le selon votre convenance:

<style type="text/css">
.faq { 
 position: relative; 
}
.faq input { display: none; }
.faq input:checked + label { 
 background: -webkit-linear-gradient(top,#ccc,#ccc); 
 color: #000; 
 font-size:100%;
 font-weight: bold; 
}
.faq label { 
 font-family: helvetica;
 cursor: pointer; 
 display: block; 
 height: auto; 
 text-align: left; 
 padding:15px;
 padding-left:15px;
 margin:0;
 padding-right: 15px;

 color: #333; 
 font-size:100%; 
 border:1px solid #ddd;
 border-bottom: 0;
 font-weight: bold; 
 background: -webkit-linear-gradient(top,#eee,#ddd); 
}
.faq label:before {
 content:"+";
 line-height:21px;
 font-size:21px; 
 margin-right:5px; 
}
.faq input:checked + label:before {
 content:"-";
}
.faq label:last-child { margin-right: 0; }
.faq label:hover { 
 background: -webkit-linear-gradient(top,#eee,#ddd); 
}
.faq article { 
 max-height: 0;
 overflow: hidden; 
 transition: max-height 0.15s ease-out;
 position: relative; 
 margin-bottom: 0;
 top:0;
 padding:10px 10px 10px 10px; 
 color: #333; 
 opacity: 0;
 border:1px solid #ddd;
}
.faq div > input:checked ~ article { 
 max-height: 500px;
 opacity: 1;
 margin-bottom:12px;
 transition: max-height 0.25s ease-in; 
}
</style> 
<form class="faq">
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq1" value="faq1" checked="checked" />
        <label for="faq1">Section 1</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq2" value="faq2" />
        <label for="faq2">Section 2</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq3" value="faq3" />
        <label for="faq3">Section 3</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq4" value="faq4" />
        <label for="faq4">Section 4</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq5" value="faq5" />
        <label for="faq5">Section 5</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq6" value="faq6" />
        <label for="faq6">Section 6</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq7" value="faq7" />
        <label for="faq7">Section 7</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq8" value="faq8" />
        <label for="faq8">Section 8</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq9" value="faq9" />
        <label for="faq9">Section 9</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
</form>

Besoin d’une 2ème FAQ sur la même page ?

Dans ce cas il faut tout dupliquer et changer les classes ! voici le code pour une seconde section:

<style type="text/css">
.faq2 { 
 position: relative; 
}
.faq2 input { display: none; }
.faq2 input:checked + label { 
 background: -webkit-linear-gradient(top,#ccc,#ccc); 
 color: #000; 
 font-size:100%;
 font-weight: bold; 
}
.faq2 label { 
 font-family: helvetica;
 cursor: pointer; 
 display: block; 
 height: auto; 
 text-align: left; 
 padding:15px;
 padding-left:15px;
 margin:0;
 padding-right: 15px;

 color: #333; 
 font-size:100%; 
 border:1px solid #ddd;
 border-bottom: 0;
 font-weight: bold; 
 background: -webkit-linear-gradient(top,#eee,#ddd); 
}
.faq2 label:before {
 content:"+";
 line-height:21px;
 font-size:21px; 
 margin-right:5px; 
}
.faq2 input:checked + label:before {
 content:"-";
}
.faq2 label:last-child { margin-right: 0; }
.faq label:hover { 
 background: -webkit-linear-gradient(top,#eee,#ddd); 
}
.faq2 article { 
 max-height: 0;
 overflow: hidden; 
 transition: max-height 0.15s ease-out;
 position: relative; 
 margin-bottom: 0;
 top:0;
 padding:10px 10px 10px 10px; 
 color: #333; 
 opacity: 0;
 border:1px solid #ddd;
}
.faq2 div > input:checked ~ article { 
 max-height: 500px;
 opacity: 1;
 margin-bottom:12px;
 transition: max-height 0.25s ease-in; 
}
</style> 
<form class="faq2">
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq1" value="faq1" checked="checked" />
        <label for="faq1">Section 1</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq2" value="faq2" />
        <label for="faq2">Section 2</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq3" value="faq3" />
        <label for="faq3">Section 3</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq4" value="faq4" />
        <label for="faq4">Section 4</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq5" value="faq5" />
        <label for="faq5">Section 5</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq6" value="faq6" />
        <label for="faq6">Section 6</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq7" value="faq7" />
        <label for="faq7">Section 7</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq8" value="faq8" />
        <label for="faq8">Section 8</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
    <div class="faq-wrapper">
        <input type="radio" name="size" id="faq9" value="faq9" />
        <label for="faq9">Section 9</label>
        <article>
            <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.</p>
        </article>
    </div>
</form>

Vous savez désormais comment créer un système de FAQ sur shopify

Ce tutoriel existe aussi en vidéo

Bonne installation !

Inclus dans Speedfly

Merci de me laisser une petite note 😉

[Note moyenne de: 4.9 sur 18 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

« Comment faire un tableau de codes promo par quantité sur Shopify ?

Comment créer une flèche de retour en haut de site sur shopify ? »

Cet article a 72 commentaires

Thomas
19 Nov 2017 Répondre

Bonjour, merci beaucoup pour votre TUTO ! J’ai mis en place ce système, cependant quand j’ai voulu ajouter des sections en copiant le code depuis et entre les balises « div », les sections s’affichent mais ne s’ouvrent pas. Savez-vous comment puis-je faire pour remédier à cela ? Merci !
1. dgeo22
  20 Nov 2017 Répondre
  
  Bonjour, Surement un mauvais copier/coller ou une incompatibilité avec le thème… quel thème as tu?
  1. Thomas
    21 Nov 2017 Répondre
    
    J’ai le thème supply
jean
20 Nov 2017 Répondre

Salut ! Merci beaucoup pour ce tuto. Comment puis je rajouter des sections ?
1. dgeo22
  20 Nov 2017 Répondre
  
  Salut, Tu dois dupliquer un
  
  autre onglet
  
  et en dessous un autre
  
  fefsfe
  
  etc
  1. jean
    21 Nov 2017 Répondre
    
    Je dois dupliquer tout le code ?
    1. dgeo22
      21 Nov 2017 Répondre
      
      non seulement 1 li et une div avec les id et href correspondant, j’avais mis le code plus haut mais dans les com ce con de wordpress le vire…
      1. jean
        21 Nov 2017
        
        Merci mais c’est du chinois pour mois, je n’y connais rien en programmation
        ^^ 1 li ? (une ligne je suppose) href ?
      2. dgeo22
        21 Nov 2017
        
        Ca va être un peu trop technique et difficile à expliquer 🙁
2. Laurent
  10 Déc 2017 Répondre
  
  Bonsoir. Merci beaucoup pour ce tuto. Comment puis je rajouter des sections ?
  1. dgeo22
    17 Déc 2017 Répondre
    
    Bonsoir, en rajoutant une section comme ceci: Section 1
    You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an 'unknown entry event'? Why don't they know? If they don't know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.
jean
21 Nov 2017 Répondre

Tu ne peux pas mettre la partie à coller dans le commentaire ?
1. dgeo22
  21 Nov 2017 Répondre
  
  WordPress veut pas 😀 je vais te donner un lien de code a modifier
  1. dgeo22
    21 Nov 2017 Répondre
    
    Tiens teste ca, y a une zone en plus
    1. Thomas
      21 Nov 2017 Répondre
      
      Par rapport à ma question précédente, j’ai recopier ton nouveau code et ca ne fonctionne pas non plus, la derniere section ne se déroule pas :s
      1. jean
        22 Nov 2017
        
        Ok merci quand même =D
    2. mimi
      16 Mar 2018 Répondre
      
      Bonjour Geoffrey, merci pour tout tes tutos, malheureusement, la dernière section ne fonctionnne pas chez moi non plus, en inspectant le code, je n’arrive pas à voir ce qui ne va pas 🙁
Thomas
23 Nov 2017 Répondre

Ca ne fonctionne pas pour moi l’ajout de sections 🙁
1. dgeo22
  6 Jan 2018 Répondre
  
  Bonsoir, au besoin je peux regarder si tu me donne le lien du site ou le code que tu veux faire 😉
  En utilisant le formulaire de contact
  
  Bonne soirée
Victor
1 Avr 2018 Répondre

Salut Geoffrey, je voudrais ajouter des sections sur la page FAQ. J’ai copié ton code et essayé de changer les numéros pour arriver aux 5 sections que je souhaite avoir, mais ça marche pas soit elle ne s’ouvre pas soit elle s’incruste avec une autre section. Si tu veux bien m’aider n’hésite pas, je teremercie je fais partie de la formation shopify héros.
1. Dgeo GD
  1 Avr 2018 Répondre
  
  Salut,
  
  J’ai codé la version 5 sections ici:
  
  Remplace donc tout la partie <form….>….</form>
Wiss
11 Juin 2018 Répondre

Salut j’ai trouvé comment augmenter le nombre de colonnes , il faut modifier le « xxlarge » à chaque fois, remplacez par xylarge , xzlarge , etc.
1. Dgeo Dev
  11 Juin 2018 Répondre
  
  Salut, super merci Wiss 😉 Bonne fin de journée
MattCanada
18 Oct 2018 Répondre

Salut Geo,
pourrait tu crée la meme mais avec 9 section car j’essaie d’avoir acces a celle que tu as crée avec 5 sections mais elle ne fonctionne pas.
Merci
1. Dgeo Dev
  18 Oct 2018 Répondre
  
  Assez complexe il faudra que tu me contacte sur https://www.facebook.com/dgeodev
Mroizo
17 Nov 2018 Répondre

Merci pour ce tuto.
Pourrais me dire comment ou me donner une piste pour faire en sorte que l’onglet actif se cache lorsque l’on reclique dessus.
1. Dgeo Dev
  24 Nov 2018 Répondre
  
  Hello, merci. Avec ce code ce n’est pas possible, ce n’est pas un système d’accordéon mais d’activation d’un onglet tjs ouvert.
Diallo
5 Fév 2019 Répondre

Merci pour code, je suis super content car j’aurai jamais pu faire mieux.
Vous proposez d’autres codes utiles pour améliorer le store ?
1. Dgeo Dev
  18 Fév 2019 Répondre
  
  Merci pour le message, oui y en a 41 😉 cliquer sur tutoriels shopify dans le menu.
Edwige
15 Fév 2019 Répondre

Merci beaucoup pour ton tuto, c’est parfait ! Petite suggestion : que les utilisateurs puissent joindre un fichier à leur commentaire, comme ça on verrait comment chacun a stylisé sa FAQ à partir de ton extrait de code 🙂
1. Dgeo Dev
  20 Fév 2019 Répondre
  
  Merci pour le message 🙂
aboo
11 Juin 2019 Répondre

salut , j’ai juste un petitproblème . Quand je vais sur ma page de FAQ , je vais das une section mais elle ne se déroule pas c’est à dire que je ne eux pas voir la partie du bas.
1. Dgeo Dev
  12 Juin 2019 Répondre
  
  Hello, c’est typiquement un conflit JS, sans doute que le thème ne l’accepte pas ou alors une app qui poserait problème… Difficile de dire comem cela à l’aveugle 🙂
lola
19 Juin 2019 Répondre

un faq en francais serait top !
1. Dgeo Dev
  22 Juin 2019 Répondre
  
  Lol, il l’est 🙂 ensuite pour les textes il faut bien entendu les remplacer 🙂
Chris
9 Juil 2019 Répondre

Bonjour,
J’utilise ce code dans mes pages produits afin de créer des menus, ça fait le Job !

Par contre petit souci lorsqu’on écrit beaucoup de contenu à l’intérieur des « sections ».
Le souci se présente uniquement sur mobile, lorsqu’on clique sur une section contenant beaucoup de contenu on est téléreporté en bas de page.
J’ai essayé de modifier le code dans tous les sens mais sans succès…

Pour information, afin d’augmenter le contenu des sections j’ai modifié la valeur : » max-height: 1300px; » au lieu de : 500px
(voir ci-dessous)

.faq div > input:checked ~ article {
max-height: 1300px;
opacity: 1;
margin-bottom:12px;
transition: max-height 0.25s ease-in;

Merci par avance pour vos lumières…
Dans l’attente de votre retour,
Bien cordialement.
1. Dgeo Dev
  14 Juil 2019 Répondre
  
  Bonjour, étrange en effet… MP moi directement sur Facebook pour me montrer tout cela afin de trouver une solution 😉
Andriano
2 Oct 2019 Répondre

La balise n’était pas vraiment utile. Mais j’ai réussi le tuto donc merci.
nono
17 Nov 2019 Répondre

Salut, j’aimerais tellement mettre en place ce tuto mais je bloque au depart … ou est ma page faq ???
1. Dgeo Dev
  19 Nov 2019 Répondre
  
  Bonsoir, il suffit de la créer dans shopify 😉
Marvin
18 Nov 2019 Répondre

Pour ma part, je n’arrive pas à changer la couleur du label et mettre la couleur de mon site
1. Dgeo Dev
  19 Nov 2019 Répondre
  
  Hello, oui y a un sacré cache navigateur, le mieux est de tester en navigation privée 🙂 mais au bout d’un moment ca fonctionnera.
aderya
22 Mar 2020 Répondre

Salut, tout d’abord merci pour cette astuce. Pouvons nous un autre titre à la place de section ?
1. Dgeo Dev
  23 Mar 2020 Répondre
  
  Oui bien sur vous pouvez modifier les titres et textes 😉
damien
23 Mar 2020 Répondre

petite qestion peut on mettre ça en place pour les descripiton de collection?

merci pour ce petite bout de code
1. Dgeo Dev
  23 Mar 2020 Répondre
  
  Bonjour, oui bien sur à partir du moment ou c’est un éditeur shopify ça fonctionnera 😉
SENE
2 Avr 2020 Répondre

bonjour Dgeo Dev ,
comment traduire les section sur notre page FAQ
1. Dgeo Dev
  4 Avr 2020 Répondre
  
  Hello, comment cela traduire ? si c’est pour un site multilangue il faut le gérer directement dans l’application.
Peter
15 Mai 2020 Répondre

Magique merci…
Anaïs
31 Juil 2020 Répondre

Bonjour ! Merci pour ce tutoriel extraordinaire ! Je m’en sors mais mon soucis est que j’aimerais qu’il soit possible de fermer tous les onglets. Or ici, il y en a toujours un ouvert et pour en fermer un il faut en ouvrir un autre. Je ne sais pas si je suis très claire ! Y a t il une solution ? 🙂
1. Dgeo Dev
  3 Août 2020 Répondre
  
  Bonjour et merci pour le commentaire 🙂 il faut trouver la partie checked="checked" et la supprimer
Baba
29 Oct 2020 Répondre

bonjour , est ce que y à un moyen de refermer la section quand on appuie sur la touche moins » – » la faq s’ouvre automatiquement avant même de toucher la question posée.
1. Dgeo Dev
  29 Oct 2020 Répondre
  
  Bonjour, je n’ai pas compris la question
Eva
9 Nov 2020 Répondre

Bonjour, Merci pour tous vos tutos très utiles :D.
J’aimerais pouvoir utiliser ces boutons « accordéons » pour rajouter des informations sur mes pages produits comme la composition ou la livraison par exemple, est ce possible d’utiliser le meme code en changeant juste le texte et le titre des sections ? Merci
1. Dgeo Dev
  9 Nov 2020 Répondre
  
  Bonjour, Oui c’est possible en l’adaptant et en le mettant dans le fichier de la fiche produit
Gauthier
18 Déc 2020 Répondre

Bonjour, pour ma part les Sections 1-2-3…. s’affichent mais dès que je clique dessus le message en dessous n’apparait pas. Que faire?
J’ai le thème début et je n’ai que DSER et cart shaker comme application.
1. Dgeo Dev
  19 Déc 2020 Répondre
  
  Bonjour, à l’aveugle je ne pourrais dire mais il doit manquer quelque chose… le code a bien été collé en mode éditeur code ?
  1. Gauthier
    19 Déc 2020 Répondre
    
    Comment ça en mode éditeur code? J’ai juste copié le code, j’ai cliqué sur le bouton HTML dans ma page produit et j’ai collé le code. Quand je le fais pour une page FAQ ça fonctionne mais pas quand je mets dans la description de produit? Une solution? Ou une alternative je prends aussi 🙂 Merci pour tous le contenus!
    1. Dgeo Dev
      19 Déc 2020 Répondre
      
      Oui c’est bien comme ça qu’il faut faire 🙂 en passant en mode html. La je vois pas désolé, faudrait voir le shop et la page en question
      1. Gauthier
        19 Déc 2020
        
        Je peux t’envoyer le shop en mp sur fb? 🙂
      2. Dgeo Dev
        21 Déc 2020
        
        Oui 🙂
Gauthier
18 Déc 2020 Répondre

Je voudrais la mettre dans la page produit*
Margaux
5 Fév 2021 Répondre

Bonjour et merci pour ce tuto !
Est-il possible de « refermer » un onglet ouvert (checked) une fois que l’on a cliqué dessus ?
1. Dgeo Dev
  5 Fév 2021 Répondre
  
  Bonjour et merci pour le message. Malheureusement non… en tout cas pas avec ce tutoriel.
Daly
3 Mai 2021 Répondre

Bonjour,
Merci beaucoup, ce « how to » arrive au bon moment. Je n’avais pas envie d’utiliser une app pour faire cela.
Mon seul souci serait, si c’était un réel soucis, le « bold » des titres est impossible à retirer.
J’ai modifié … attendu … vidé le cache = rien

Sinon, TOP ! ma FAQ (par 2) sera bientôt visible sur mon site
Daly
Dali
21 Juin 2021 Répondre

Bonjour,

J’ai perdu une partie de ma FAQ codée et avec mon texte customizé.
Donc, je reprends mon travail de rédaction.
J’ai une question :
Sur la même page je rédige 2 FAQ accordéons car la 1ere porte sur les questions sur le produit et la 2ème, sur les questions générales.
Je modifie des élements pour éviter le conflit mais je le fais par intuition.Pourrais-je vous envoyer mon code pour que vous le lisiez et pour confirmer mes modifs, s’il vous plait?
1. Dgeo Dev
  22 Juin 2021 Répondre
  
  Bonjour, malheureusement ce code ne fonctionnera pas en 2 parties car il faut garder uniquement un conteneur form. ou alors il faudrait tout dupliquer et changer pour la partie 2 les classes .faq par .faq2 mais cela reste assez complexe… Je vais essayer de rajouter un code supplémentaire en bas du tuto
Antoine L
2 Nov 2021 Répondre

Bonjour Dgeo,

Tout d’abord merci pour ce code bien utile et cette vidéo très pédagogique.
J’aurai une petite question… Comment faire pour empêcher la section de se replier une fois que j’en sélectionne une autre stp ?

Merci pour votre temps.
1. Dgeo Dev
  5 Nov 2021 Répondre
  
  Hello et merci pour le com 🙂 malheureusement c’est impossible avec ce code désolé, il faut un système de tabs. Peut être une prochaine vidéo ou une nouvelle version de ce tuto en 2022 🙂 bonne journée.
Mag972
14 Déc 2022 Répondre

Bonjour Dgeo Dev. Merci beaucoup pour ce tuto. Pourrais-tu me dire comment faire pour que chaque section s’ouvre et se ferme en cliquant dessus, plutôt que d’attendre qu’on clique sur une autre section ? Après, si ce n’est pas possible, ce n’est pas grave car ta FAQ est déjà très bien . Merci beaucoup
Nadia
3 Jan 2023 Répondre

Bonjour,
Merci pour ton astuce cela fonctionne parfaitement.
Il y a une section ou je veux expliquez comment passez commande avec
1…..
2……
3……
Avec retour à la ligne à chaque fois mais cela ne le prend pas en compte. Sais tu comment je pourrais faire stp
1. Dgeo Dev
  6 Jan 2023 Répondre
  
  Hello, avec retour à la ligne de l’onglet ouvert ?

Visuel du système FAQ de type accordéon

Installation dans une page de shopify

Besoin d’une 2ème FAQ sur la même page ?

Ce tutoriel existe aussi en vidéo

Besoin d'aide ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Besoin de déléguer votre SAV ?

🤗 Vous souhaitez me remercier pour mes Tutos ?

Vous devriez également aimer

Comment afficher le pourcentage économisé sur Shopify ?

Comment ajouter un code promo au niveau du panier sur Shopify ?

Comment mettre un système d’auto-complétion sur le moteur de recherche de Shopify ?

Cet article a 72 commentaires

Thomas

dgeo22

Thomas

jean

dgeo22

jean

dgeo22

jean

dgeo22

Laurent

dgeo22

jean

dgeo22

dgeo22

Thomas

jean

mimi

Thomas

dgeo22

Victor

Dgeo GD

Wiss

Dgeo Dev

MattCanada

Dgeo Dev

Mroizo

Dgeo Dev

Diallo

Dgeo Dev

Edwige

Dgeo Dev

aboo

Dgeo Dev

lola

Dgeo Dev

Chris

Dgeo Dev

Andriano

nono

Dgeo Dev

Marvin

Dgeo Dev

aderya

Dgeo Dev

damien

Dgeo Dev

SENE

Dgeo Dev

Peter

Anaïs

Dgeo Dev

Baba

Dgeo Dev

Eva

Dgeo Dev

Gauthier

Dgeo Dev

Gauthier

Dgeo Dev

Gauthier

Dgeo Dev

Gauthier

Margaux

Dgeo Dev

Daly

Dali

Dgeo Dev