Requirements :
Have a Shopify subscription
Have the rights to create a section
❗️It is only possible to add your widget to a block or a section in Shopify.
If you are using Pagefly, the tutorial for adding html code can be found at this link and at this link for Shogun.
Integrate the widget in a block
1/ Go to your Shopify theme
2/ Then, go to the section and clic on "Add Block"
3/ Then select Custom liquid :
4/ Once the block is added, you just have to integrate the Embed code of the widget.
*Be careful that there is the mention ="display:block; is the embed code.
5/ Drag and drop the bloc wherever you want on the product page.
6/ Save and refresh the page to see it appears.
Integrate your widget in a section
1/ Go to your Shopify theme
2/ Then go to Actions section > Edit code :
3/ Click on sections :
4/ Click on "Add a resource" this should be called: join-widget-section
5/ Copy and paste the code below in place of the existing code in Shopify
<div class="join-widget-section">
{{ section.settings.widget_html }}
</div>
{% schema %}
{
"name": "Join Widget section",
"tag" : "section",
"class" : "section",
"settings": [{
"type": "html",
"id": "widget_html",
"label": "Widget Code"
}],
"presets": [{
"name": "Join Widget section",
"category": "Custom"
}]
}
{% endschema %}
{% stylesheet %}
.join-widget-section div {
display: block!important;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
5/ Save
6/ Go back to the desired page of the site and click on "add a section".
7/ Choose "Join-widget-section.
8/ A pop-up opens on the right, insert the widget code in the "Widget code" field.
9/ Click save, save the page and refresh it.
❗️Depending on your version of Shopify, you may not see the widget, so you will need to click preview to see the rendering.
💡 To know: You will be able to modify the content of your widget without having to redo the above mentioned manipulations!