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

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

systeme faq 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>

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

Ps: si vous souhaitez rajouter des sections il vous suffira de dupliquer autant que vous le souhaitez l’élément input et article !

Bonne installation !

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 2 votes]

🤗 Vous souhaitez m'encourager à continuer mes Tutos ?

Cliquez sur le bouton ci-dessous pour me laisser un petit pourboire 😉

Payer un coup à Dgeo Dev

Cet article a 38 commentaires

  1. 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. Bonjour, Surement un mauvais copier/coller ou une incompatibilité avec le thème… quel thème as tu?

      1. J’ai le thème supply

  2. Salut ! Merci beaucoup pour ce tuto. Comment puis je rajouter des sections ?

    1. Salut, Tu dois dupliquer un

    2. autre onglet
    3. et en dessous un autre

      fefsfe

      etc

        1. 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. Merci mais c’est du chinois pour mois, je n’y connais rien en programmation
            ^^ 1 li ? (une ligne je suppose) href ?

          2. Ca va être un peu trop technique et difficile à expliquer 🙁

    4. Bonsoir. Merci beaucoup pour ce tuto. Comment puis je rajouter des sections ?

      1. Bonsoir, en rajoutant une section comme ceci:

        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.

  3. Tu ne peux pas mettre la partie à coller dans le commentaire ?

    1. WordPress veut pas 😀 je vais te donner un lien de code a modifier

        1. 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. Ok merci quand même =D

        2. 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 🙁

  4. Ca ne fonctionne pas pour moi l’ajout de sections 🙁

    1. 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

  5. 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.

  6. Salut j’ai trouvé comment augmenter le nombre de colonnes , il faut modifier le « xxlarge » à chaque fois, remplacez par xylarge , xzlarge , etc. ( Relisez bien le lien de Geo : http://dgeodev.com/codes-2/faq-5.txt ) , ce qui change entre chaque « id et value » , en espérant aider certains

    1. Salut, super merci Wiss 😉 Bonne fin de journée

  7. 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

  8. 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. 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.

  9. 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. Merci pour le message, oui y en a 41 😉 cliquer sur tutoriels shopify dans le menu.

  10. 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. Merci pour le message 🙂

  11. 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. 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 🙂

  12. un faq en francais serait top !

    1. Lol, il l’est 🙂 ensuite pour les textes il faut bien entendu les remplacer 🙂

  13. 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. Bonjour, étrange en effet… MP moi directement sur Facebook pour me montrer tout cela afin de trouver une solution 😉

  14. La balise n’était pas vraiment utile. Mais j’ai réussi le tuto donc merci.

Laisser un commentaire

Fermer le menu
×
×

Panier

Tu aimes mes Tutos & mes Articles ?

Alors n'hésites pas à m'encourager à continuer ce Blog !


Je donne 1e à Dgeo Dev

Envie de Protéger le contenu de ton site ?

Speedecom te propose l'Application Shopify Speed Defender !
Elle va te permettre de protéger ton site des copieurs et protéger tes contenus, tes médias et même empêcher les raccourcis claviers et l'affichage du code source ;) !

N'hésite pas à la tester elle est Gratuite pendant 3 jours

Tester Speed Defender

Envie de Booster ton taux de conversion ?

Speedecom a créé une nouvelle Application Shopify qui devrait te plaire !
Elle va te permettre de créer des Bundles en direct checkout !
N'hésite pas à la tester elle est Gratuite pendant 7 jours

Tester Speed Bundle

Besoin d'un developpeur ?

Si tu as un besoin particulier sur ta boutique,
n'hésite pas à me contacter et à regarder mes prestations !

Consulter mes prestations