Top heading

Phone : +91 9461017829
Skype : ptiweb20
Home > How to add an FAQ accordion to your Shopify store?

How to add an FAQ accordion to your Shopify store?

Powered by Drupal
bagrisugan's picture
Tue, 2014-10-14 12:26 -- bagrisugan

In today’s advertising market “accordion” is one of the great ways to display the FAQ to your ecommerce store, as it simply permits the potential user to quickly and easily browse to your FAQ without much scrolling. Most of the featured characteristics depend upon the different type of plan selected and the rates of shopify vary accordingly. Moreover, the trial offer is offered by the company. Applications offered by the shopify app store to the users are either free of charge, for a onetime fee, on a subscription basis, or on a per use basis. All these applications objectively offer the enhanced functionality to the users of the API platform and vary from the diverse upsell apps to the mailing list apps.And here are some of the tips to know how to add an FAQ to your shopify store.

  1. Download the ZIP file of required assets.
  2. Create a new page template in your Shopify template editor. And also, you can name it whatever you want, but specifically it is recommend to something simple like “FAQ.”
  3. Now, you need to Paste the following code at the very bottom of your new page template:
  4. <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('//cdn.shopify.com/s/files/1/0276/6855/t/14/assets/minus.png?4342')
    center center no-repeat;
    }
    .accordion-close span {
    display:block;
    position:absolute;
    right:3px;
    top:25%;
    background:url('//cdn.shopify.com/s/files/1/0276/6855/t/14/assets/plus.png?4342')
    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>
    
  5. Further, you need to create a new page called “FAQ.” Save, and then you can alter the page to the new template.
  6. Paste the following code into the page:
  7. <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>
    
  8. Now you can simply edit the contents to your heart’s content!

Add new comment

Name (required)
Email (required)
Phone number (required)
Your Comment
2 + 8 =
Help us make sure you're not a robot ( Enter the result you see)