Presentation of Product FAQ for Shopify Workflow
Let’s see how the Admin can navigate through this application.
↓
Workflow from Admin’s End
Admin needs to login to his Shopify Store
↓
Now, the Admin can install the Product FAQ app by
↓
Click on ‘Try Product FAQ Now’, enter your store’s URL & hit the install button!
↓
Further, approve the app charges & you’ll be all set to use this app!
↓
Admin can find this app installed in the ‘Apps‘ section of his Shopify Backend
↓
Clicking on the app will redirect you to this page
↓
Now the Admin needs to configure the app for making it look good on the frontend & for this, click on the configuration button as shown in the image above.
Configuration
Admin can configure the theme color as well as the font
↓
After configuration, the Admin needs to add the Domain name of his store to the app & for this, click on the domain name button as shown previously.
Domain Name
↓
Now, the Admin will be adding General FAQ for his store
Click on the ‘General FAQ’ button as shown in the image above ↑
↓
Here, click on the ‘+ Add New General FAQ’ button
↓
Now, the Admin will add FAQ sequence, title & description.
↓
The added General FAQ will be listed on the page as shown in the image below
If the Admin wishes to edit/delete/enable/disable the added general FAQ then he can do so for this page.
↓
The Admin now needs to display these added General FAQ on the frontend & for this, he will have to add a navigation menu to his store’s header.
Admin can add a navigation menu to his Shopify Store header by
going to Shopify Backend >> Online Store >> Navigation >> Main Menu
↓
Click on Add New Menu
↓
Enter the name for the menu & for the link select Pages from the drop-drop menu & then click on Store FAQs.
Save the Configuration!
↓
This is how the added General FAQ will be added to the storefront
↓
This is all he needs to do regarding the general faq.
Now the Admin needs to add a FAQ to a product
For this, Admin will go to Shopify backend >> Products >> All Products
↓
Click on a particular product to navigate to its edit page
↓
Now click on ‘More Action‘ drop-down menu & then click on the Product FAQ button
↓
Once, you click on this button, you will be redirected to the Product FAQ app
↓
Click on the + Add New FAQ button
Enter the required details & save
↓
The added product FAQ will be viewed by clicking on the Product button as shown below
↓
Clicking on the ‘Product’ button will take you to the page shown below with a list of products on which FAQ has been added.
When the Admin will click on the ‘Product FAQ’ button, he will be able to edit/delete/enable/disable the FAQ
↓
After clicking on ‘Product FAQ’ button, this is what you will have:
↓
Now, to display the FAQ on the frontend, the Admin needs to do some Code Pasting He needs to go to the Shopify Backend >> Online Store >> Themes >> Actions >> Edit Code
↓
Search for the file product-template.liquid file >> Paste the code given below >> Save
↓
paste the given code in product-template.liquid file{{ '//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 }}<divid='wk_product_faq'></div>
↓
After this, this is how the FAQ will be visible on the frontend
This is all about the workflow. For more, check out the main blog and demo of this app.
Product FAQ Main Blog
Product FAQ Demo
Contact Us
In case of any query, please drop an email at [email protected] or raise a ticket at Webkul UV Desk.
