Menu Close
    Searching for an experienced Shopify Development Company ?

    How to add Jquery Accordion FAQ in Shopify ?

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

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

    Features

    • Provide you to add a FAQ about any product, category, blog, etc.
    • FAQ can be displayed on any page according to your requirements.
    • You can also 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

    Further, go to the Product FAQ link.

    faq15

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

    faq3

    Clicking on the General FAQ button you can see a listing page that will display your added general FAQs.

    faq4

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

    faq5

    After adding FAQ you will get redirected to the 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 the Themes tab.

    faq7

    After clicking on the Themes tab launchpad page will appear. From the launchpad, you have to click on any of the menus where you want to display your added FAQ. For example, if you want to display on the product page then click on the 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 the 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 the Save button after pasting the above code.

    Example 1: For Collection Page.

    faq9

    Click on collection.liquid menu and paste the above-mentioned code.

    Steps to configure your FAQ:

    faq11

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

    faq12

    Now display FAQ on every product and collection page.

    On Product Page:

    faq13

    On Collection Page:

    faq14

    So by following the above-mentioned process, you add a general FAQ.

    Support

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

    Current Product Version - 1.0.0

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    1 comments

  • laurence mike
    I really liked your work. I googled shopify and landed on this page.
  • Back to Top

    Table of Content

    Hide Index