All Collections
Integrate your widget on Shopify
Integrate your widget on Shopify
Nicolas Goudemant avatar
Written by Nicolas Goudemant
Updated over a week ago

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 }}

{% 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!

Did this answer your question?