How to Create Shopify FAQ Page Accordion

Follow below steps to add FAQ page accordion in your Shopify store.

Step 1: Download Zip file which contains files & assets.

Step 2: Create a template file in your template folder of Shopify code editor.

Open Templates folder and click on “Add a new template” and you can name it like “faq”.

Step 3: New template file contains some code.

You will get {{ page.content }} inside a tag in the default code of the new template file. If {{ page.content }} is inside a <div> tag, just like.

 

<div class="rte">
    {{ page.content }}
</div> 

then you should add one class “faqpage” or replace the above code with below code. If {{ page.content }} is not enclosed in div tag then add div tag with class name faqpage and put {{ page.content }} inside of div tag.

<div class="rte faqpage">
    {{ page.content }}
</div> 

Step 4: Paste below code at the last line of above created template file.

You will have some default code inside the template file which you will have created in above step. You should paste the below JavaScript code first and then CSS code.

<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> 

Step 4: Paste below CSS code at the last of above JavaScript code.


<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> 

Step 5: Go to the Shopify dashboard.

Click on pages. Create a new page and select type page.faq, add a title and inside the content before adding anything, click on <> (show editor) on the right corner. Now paste the below code and you can edit the text.

<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>