Integrate your widget on Shopify
Snackeet Team avatar
Written by Snackeet Team
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 the Section section of Spotify at the moment.

If you are using Pagefly, the tutorial for adding html code can be found at this link and at this link for Shogun.

INTEGRATE IN A BLOCK

Integrate the widget in a block

1/ Go to your Shopify theme

2/ Then, go to the section and click 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.

5/ Drag and drop the bloc wherever you want on the product page.

6/ Save and refresh the page to see it appears.

INTEGRATE IN A SECTION

STEP 1 : Go to your Shopify theme

STEP 2 : Then in Actions section > Edit code :

STEP 3 : Click in sections

STEP 4 : Click on "Add a resource" this should be called: snackeet-widget-section

STEP 5 : Copy and paste the code below in place of the existing code in Shopify

<div class="snackeet-widget-section">
{{ section.settings.widget_html }}
</div>

{% schema %}
{
"name": "snackeet Widget section",
"tag" : "section",
"class" : "section",
"settings": [{
"type": "text",
"id": "widget_html",
"label": "Widget Code"
}],
"presets": [{
"name": "Snackeet Widget section",
"category": "Custom"
}]
}
{% endschema %}

{% stylesheet %}
.snackeet-widget-section div {
display: block!important;
}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

STEP 6 : Save

STEP 7 : Go back to the desired page of the site and click on "add a section".

STEP 8 : Choose "Snackeet-widget-section"

STEP 9 : Clic on the new section and insert the widget code in the "Widget code" field

STEP 10 : 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?