How to add an FAQ accordion to your Shopify store

Leighton Taylor | | 0 comments


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!

Want me to install this for you? If you'd rather just have me install this for you and make sure it's all working properly, I'd be happy to help. Due to a high volume of requests I can no longer do this for free, so the cost for this service is $75. Click here to submit payment and your shop information, and then I'll take care of it for you within 2-3 business days.

    Free Course: How to choose what to sell online

    Hi! I’m Leighton, and I’m thrilled that you’re here. I've put together a free 5-day course showing you how to choose a product to sell online. Sign up to get the first lesson in your inbox instantly, plus weekly tips and articles to help you grow your business.

  • Tags: Blog, Popular, Shopify Tutorials

← Older Post Newer Post →

Interested in working together?

Let's find out if we're a good fit.