Knowledge Base

Step 1: Download the ZIP file of necessary assets.

Download this. 

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!