❗️This integration is advanced, send this documentation to your Shopify integrator or the person in charge at your location.
System requirements:
Have a Shopify subscription
Have the rights to add a block
1/ Go to your Shopify theme
2/ Then in the edit code section (top left in the "...")
3/ Then to click in sections :
4/ Click on "Add a resource" this one should be called: widget-join-dynamic
4/ Copy and paste the code below in place of the existing code in Shopify and replace DOMAIN_NAME as per step 5 below.
<div class="join-dynamic-widget-section">
<div id="widget-{{ product.handle }}" style="display: block!important;"></div>
<script>
document.addEventListener("DOMContentLoaded",
function(event) {
var defaultAlias = "ALIAS_WIDGET_DEFAULT";
var alias = "{{ product.handle }}";
var url = "https://DOMAIN_NAME/widgets/";
var DIV_ID = "widget-{{ product.handle }}";
var loadScriptWithAlias = function (alias) {
var fullurl = url + alias + "/index.js";
var script_tag = document.createElement("script"); script_tag.setAttribute("type", "text/javascript"); script_tag.setAttribute("src", fullurl); script_tag.setAttribute("data-join-widget-id", DIV_ID); script_tag.setAttribute("data-join-widget-alias", alias); script_tag.onerror = function () {
loadScriptWithAlias(defaultAlias);
};
document.querySelector("head").appendChild(script_tag);
};
loadScriptWithAlias(alias); })
</script>
</div>
5/ On this code, you must replace :
DOMAIN_NAME by the domain name of the account
Found in the embed code of your widget, it is the element highlighted here:
6/ Save
7/ Click on save, save the page and refresh it.
8/ On your product page, add a section at the desired location
On JOIN, get the alias (highlighted below) and insert it into Shopify in the Fallback Widget Alias section.
10/ Save
11/ Your widget will then appear in the specified location.
And there you go, it's installed 🚀
If you have created stories specifically for a product page, continue reading :
12/ You'll need to search for your product's anchor by going to the menu > Product
13/ Then at the bottom of the page, retrieve the anchor :
14/ Replicate the anchor on JOIN, in a new widget:
15/ Add the stories and then go to the Shopify Product page.
🚀 Refresh the page and you'll see your stories.