How to add Jquery Accordion FAQ in Shopify ?

Shopify FAQ Module provides an additional functionality for Shopify Product FAQ  application through which you can add FAQ not only for product which was already provided by Shopify Product FAQ but for any thing you want i.e product,category etc.

You can view the Shopify Product FAQ functionality by clicking here.

Features

  • Provide you to add FAQ about any product ,category ,blog etc.
  • FAQ can be displayed on any page according to your requirement.
  • You can customize the color,font and width for the FAQ content.

Workflow

Go to the shopify page and add or edit any product as per your requirement.

faq1

Go to the Product FAQ link.

faq15

 

After clicking on product FAQ link you will get redirected to the following page.

faq3After clicking on General FAQ button you can see a listing page which will display your added general FAQ’s.

faq4

After clicking on Add New General FAQ button you will see a form.Fill all the details in that form according to your requirement.

faq5After adding FAQ you will get redirected to General FAQ listing page.You can also update,delete or change the status of FAQ from here.

faq6

Steps to display your added FAQ on frontend:

You have to follow this step only once after installation of general FAQ after that you can just simply add any General FAQ without following this step.

Go to the shopify page and click on Themes tab.

faq7After clicking on Themes tab launchpad page will appear. From the launchpad you have to click on any of the menu where you want to display your added FAQ.For example if you want to display on product page then click on product.liquid menu or if for collection page then click on collection.liquid menu .Same for other pages.

Example 1: For Product Page.

FAQ Shopify

Click on product.liquid menu and paste the code given code.

{{ '//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css' | stylesheet_tag }}
{{ '//code.jquery.com/jquery-1.10.2.js' | script_tag }}
{{ '//code.jquery.com/ui/1.11.4/jquery-ui.js' | script_tag }}
<div id='wk_general_faq'></div>

Click on save button after pasting the above code.

Example 1: For Collection Page.

faq9Click on collection.liquid menu and paste the above mentioned code.

Steps to configure your FAQ:

faq11After clicking on Configuration button you will get redirected to FAQ Configuration page.From here you can set the configuration for your FAQ that how it will displayed(If you will set the configuration then FAQ will get displayed according to the default values set).

faq12

Now on every product and collection page FAQ will get displayed as:

On Product Page:

faq13On Collection Page:

faq14So by following the above mentioned process you add general FAQ.

Support

If you have any issue, do write to us we will try and get your issue resolved as soon as possible.

For any kind of technical assistance, just raise a ticket at : http://webkul.uvdesk.com/ and for any doubt contact us at support@webkul.com

Current Product Version - 1.0.0

. . .

Ask a Feature

Index