Add an FAQ accordion to your Shopify store

How to add an FAQ accordion to your
Shopify store

An “accordion” is a great way to display the FAQ to your commerce 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!
faqindex

Adding a FAQ accordion to your Shopify store is simple.

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 suggest something simple like “FAQ”.

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

<script type=“text/javascript” si

$(document).ready(function() {
$(‘.accordion’). accordion){
defaultOpen: ‘section1’,
cookieName: ‘accordion_nav’
});
});

.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:#50b3d;
color: #fff;
{
.accordion-open span {
display:block’
position:absolute;
right:3px;
top:25%;
padding:10px;
}
.accordion-open span {
background:url(‘{{ ‘minus.png’
}
.accordion-close span{
display:block;
position:absolute;
right:3px;
top:25%;
background:rul(‘{{ ‘plus.png’ | a
padding:10px;
}
.faqpage div.container {
padding:0;
margin:0;
}
.faqpage div.container {
max-width:100%;
padding:5px 0;
}
.faqpage div.content }
background:#f0f0f0;
margin:O;
padding:10px;
font-size:.9em;
line-height:1.5em;
}
.faqpage div.content ul {
padding:0;
margin:0;
padding:3px;
}
.faqpage div.content p{
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;
}

IMPORTANT: On the new page template you just made, find a

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:

1 |

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=“sectio

This is the answer to question

<div class=“accordion” id=“sector

This is the answer to question

<div class=“accordion” id=sectio’

This is the answer to question

Step 6: Edit the contents until you’re satisfied

Do you want us to install this for you?

If so, I’ll be more than happy to install it and ensure it’s working right. There is a small fee for this service. Contact me and I’ll make sure to take care of it for you.

Recent Projects

[go_portfolio id=”flex3″ margin_bottom=”50px”]

0 0 vote
Article Rating
Subscribe
Notify of
guest
17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
17
0
Would love your thoughts, please comment.x
()
x