Installing and Using Manuals List Widget On The Storefront (Legacy)


Head over to the widgets page to view the available widgets.

Click on the green 'Configure' button for the Manuals Widget widget to open the sidebar configurator.

At the top you will see an area containing a snippet of code which is required to be pasted into your theme code. Simply click in this snippet and copy it, we have also pasted it below for you..

We advise to create a new page template and paste the snippet into that. Then assign your product manuals page to this new template.

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. In the Snippets folder / directory, click the link at the top, Add a new snippet.
4. Call this new snippet who_product_manuals_manuals_list
5. Now paste the below code into this newly created snippet file.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>
<script async src="https://enchiridion.wehateonions.com/assets/framework/functions/proxy/manuals_list.js"></script>
<div id="table_search" style="display:none;"></div>
<table id="who_pm_manuals_list_table"></table>

6. Now, stay in the code editor, and in the Templates folder / directory, click the link at the top, Add a new template. (see image 1.1 below)
7. Choose page from the template list, and choose the liquid template type option. (see image 1.1 below)
8. Give you template a name like, manuals-list. (see image 1.1 below)
9. Now past in your snippet for the widget into the new page, often below the {{ page.content }} tag. (see image 1.2 below)

{% include 'who_product_manuals_manuals_list' %}

10. Head over to the pages section in your Shopify admin, Online Store > Pages.

11. Choose the page in question and edit it, then choose the new product template in the right hand sidebar. (see image 1.3 below)


You can see in the images below we have created a new template, added our snippet code, and assigned the page template to the page where we wish to show the manuals list.

Image 1.1

code-example-page-1

Image 1.2

code-example-page-2

Image 1.3

code-example-page-3

Support

If you are having difficulties manually installing this widget, please raise a support ticket or message us on live chat for assistance.

Didn't find an answer?

Our team is just an email or live chat conversation away and ready to answer your questions

AI Product Descriptions
AI Tagit
AnyAsset
CaseMate
Enchiridion
Fonty
Rapido
WhatsAppy