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!

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!