Whats is Legacy?
Legacy themes are non 2.0 Shopify themes. These themes are not built for JSON style templates which enables sections to be used on any page and moved around in any order.
Does this affect me?
When you install one of the three widgets via our app, you choose a theme you wish to use, at which point we tell you if that theme is 2.0 ready or not. If its not a 2.0 theme, a red window will show with a link to this documentation article which explains how to install the widgets manually.
How does installing manually work?
We provide you with two snippets of code. The first snippet is the logic of the widget, and the second snippet is the render (where you wish the widget to show).
Note!
Both of the snippets need to be manually added within your theme code, and because not all themes are built the same it can be challenging for us to give exact instructions on how to achieve this. For additional support with this, please raise a support ticket or contact us via live chat where we can guide and advise you.
Step 1
Make sure you have installed the widget and selected the correct theme within our app.
Step 2
Head over to your Shopify admin panel and select, 'Sales Channels' > 'Online Store' > 'Themes'.
Step 3
Next to the black customise button, sits a little white button with three dots. Click this and choose 'Edit Code'.
Step 4
Now the code editor has opened, on the left hand side you will see a tree of folders and files. A quick tip is to close all the folders to keep it clean.
Then open the 'Snippets' folder.
At the top of this folder section sits a blue link called 'Add a new snippet'.
Click this and give it the name of who_product_manuals_product_button.
Then press the black done button to complete the creation of this snippet file.
Once created, it will automatically open this new created file in the top tab bar.
Now copy and paste the below code snippet directly into your new blank snippet file, and press save (top right hand corner).
<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 async src="https://enchiridion.wehateonions.com/assets/framework/functions/proxy/product_button.js"></script>
<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"/>
<button type="button" id="who_pm_product_button" name="who_pm_product_button" data-id="{{ product.id }}" data-vid="{{ product.selected_or_first_available_variant.id }}" title="Enchiridion ‑ Product Manuals" aria-label="Enchiridion ‑ Product Manuals"></button>
<script>
var selectCallback = function(variant, selector) {
var who_variant_id = selector.variantIdField.value;
if($("#who_pm_product_button").data("data-vid") != who_variant_id) {
$("#who_pm_product_button").attr("data-vid", who_variant_id);
}
};
document.addEventListener("DOMContentLoaded", (event) => {
var id = document.querySelector("[name=\'id\']").id;
new Shopify.OptionSelectors(id, {
product: {{ product | json }},
onVariantSelected: selectCallback,
enableHistoryState: true
});
});
</script>
Step 5
Now comes the hard part. You need to find your product template to add the below snippet to it. This is where the button will render. The file will often be called something like, product-template.liquid.
Finding this can be challenging as some themes use renders to show the relevant areas.
For example, you may find you product-template file. But the area where you expect to see the buy now buttons doesn't exist, instead says something like {%- render buttons....
In this case, you need to find this render file, as this is likely where you want to add our below snippet.
As a rule of thumb, each product page will show the title, description, price, quantity input, variant selector, followed by the add to cart and buy now buttons. These elements will be wrapped in a {% form %} tag. This is where we recommend to place our below snippet, just after the {% endform %} tag.
Copy and paste this snippet to show our button in your desired location.
{% render 'who_product_manuals_product_button' %}
Step 6
Testing the button. Everything should now be up and running, but you need to navigate to a product and variant that you know has an active file in our app, and test the button is showing and working. If the button is in the wrong place, you need to move the step 5 snippet around until you get the button to show in the correct location.
Support
If you are having difficulties manually installing this widget, please raise a support ticket or message us on live chat for assistance.
