How to add an FAQ accordion to your Shopify store

An "accordion" is a great way to display the FAQ to your ecommerce store, since it allows the user to quickly and easily browse your FAQ without much scrolling. And luckily, it's simple and easy to add one to your store!

Demo

This is the first question

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tincidunt cursus eros et porta. Sed a elit tellus. Vivamus imperdiet nunc non orci faucibus, a ornare metus ultrices. Nulla vitae sapien in sapien elementum convallis.

This is the second question

Cras varius faucibus bibendum. Curabitur sit amet arcu aliquam felis ultrices rutrum. Ut auctor neque augue, in egestas elit blandit pellentesque.

This is the third question

Suspendisse ac rutrum nibh. Praesent sit amet tempor neque. Donec sed tortor felis. Nunc eu eros urna. Nunc vulputate porta ligula id mattis. In tempus massa eu risus congue commodo. Phasellus quis sapien ac lorem suscipit feugiat.

I've made this video tutorial walking you through how to add this FAQ accordion to your Shopify store. The steps are also written below.

Step 1: Download the ZIP file of necessary assets.

Click the link above to download now. Unzip it, and then upload the 3 files inside to the "Assets" folder of your Shopify template editor. If you're not sure how to do this, watch the video above and I'll walk you through it.

Step 2: Create a new page template in your Shopify template editor

You can name it whatever you want, but I recommend something simple like "faq."

Step 3: Paste the following code at the very bottom of your new page template:

<script type="text/javascript" src="{{ 'jquery_accordion.js' | asset_url }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.accordion').accordion({
defaultOpen: 'section1',
cookieName: 'accordion_nav'
});
});
</script>
<style>
.accordion {
margin: 0;
padding:10px;
border-top:#f0f0f0 1px solid;
background: #cccccc;
text-decoration:none;
color: #000;
font-size:1em;
position:relative;
}
.accordion-open {
background:#50b3da;
color: #fff;
}
.accordion-open span {
display:block;
position:absolute;
right:3px;
top:25%;
padding:10px;
}
.accordion-open span {
background:url('{{ 'minus.png' | asset_url }}') center center no-repeat;
}
.accordion-close span {
display:block;
position:absolute;
right:3px;
top:25%;
background:url('{{ 'plus.png' | asset_url }}') center center no-repeat;
padding:10px;
}
.faqpage div.container {
padding:0;
margin:0;
}
.faqpage div.container {
max-width:100%;
padding:5px 0;
}
.faqpage div.content {
background:#f0f0f0;
margin: 0;
padding:10px;
font-size:.9em;
line-height:1.5em;
}
.faqpage div.content ul {
padding:0;
margin:0;
padding:3px;
}
.faqpage div.content p {
padding:0;
margin:3px 0 10px;
padding:3px;
}
.faqpage div.content ul li {
list-style-position:inside;
line-height:25px;
}
</style>

IMPORTANT: On the new page template you just made, find a <div> tag above the {{ page.content }} tag. Add the class "faqpage" to this div. When finished, it should look something like this (if there are other words between the quotes already, that's fine--don't remove them):

<div class="faqpage">

If this is confusing, watch the video above.

Step 4: Create a new page called "FAQ." Save, then change the page to the new template.

Step 5: Paste the following code into the page:

<div class="accordion" id="section1">Question 1<span></span></div>
<div class="container">
<div class="content">
<p>This is the answer to question 1.</p>
</div>
</div>
<div class="accordion" id="section2">Question 2<span></span></div>
<div class="container">
<div class="content">
<p>This is the answer to question 2.</p>
</div>
</div>
<div class="accordion" id="section3">Question 3<span></span></div>
<div class="container">
<div class="content">
<p>This is the answer to question 3.</p>
</div>
</div>

Step 6: Edit the contents to your heart's content!

Need help?

If you need help installing this feature on your site, I recommend that you post a job on Storetasker. Storetasker is a platform that will connect you with vetted Shopify developers who can give you a reasonable quote for small store updates like this.

Get help from Storetasker

Note: The Storetasker link above is an affiliate link, which means that if you hire a developer to help you install this code, I'll receive a commission at no extra cost to you. If you choose to use this affiliate link, I'm grateful for your support!

Back to blog

87 comments

Just added a FAQ accordion to my Shopify site. Thanks Leighton!

Richard

Awesome! Sure thing Richard.

Leighton Taylor

Great and simple instructions on how to add the accordion. Initially, it wasn’t looking good on the mobile website but Leighton was very helpful in fixing my problem. Thanks for your assistance!

Vera

[…] How to Add an FAQ Accordion to Your Shopify Store – If you want to include a cool FAQ section to your site then take a look at this post. It […]

Get Help With Shopify - 50 Of The Best Resources

The website is still in the sandbox but hope springs eternal….

I wanted to say how much I appreciated the tutorial – you wouldn’t believe how much time I’ve spent trying to find understandable instructions on accordion tabs. I cut my teeth on WordPress and want my Shopify theme to have some of the things I can easily add to my WP sites, but there isn’t the knowledge base out there like there is for WordPress. Your’s is the first I’ve found that is genuinely helpful. Thanks!

Nancy

Nancy

Leave a comment