How to create an FAQ system on your Shopify store

In this tutorial we will see how to create an FAQ system on shopify.

The image below shows the simple and efficient FAQ system that you will be adding in your FAQ page.

You can also see it on this demo page: FAQ PAGE

Password : Speedecom

Go to your FAQ page and in your editor switch to the “Edit HTML” mode with the </> icon and paste the code below, return to normal mode and adapt it to your liking:

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

You now know how to create a FAQ system on your shopify store.

Ps: if you want to add sections you can duplicate each tab as many times as you want.

This tutorial is also available in video format

Hope you found this tutorial helpful ! You have any ideas for new tutorials ?

Any questions about this one ? Leave me a comment 😉

Share this article

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on telegram
Share on whatsapp
Share on email

Leave a Reply

Your email address will not be published. Required fields are marked *