All Collections
Shopify integration in a section with fallback
Shopify integration in a section with fallback
Nicolas Goudemant avatar
Written by Nicolas Goudemant
Updated over a week ago

❗️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>
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(alias); })

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.

Did this answer your question?