Configuration requise :
Avoir un abonnement Shopify
Avoir les droits pour créer un bloc
❗️Il est possible d'ajouter votre widget dans un bloc ou dans une section de Shopify.
Si vous utilisez Pagefly, le tutoriel pour ajouter du code html se trouve sur ce lien et sur ce lien pour Shogun.
Intégrer le widget dans un bloc
1/ Rendez-vous sur votre thème Shopify
2/ Puis dans la section qui vous intéresse, cliquez sur "Add Block"
3/ Sélectionnez Custom liquid (ou parfois custom HTML):
4/ Une fois le bloc ajouté, il faut venir y intégrer le Embed code du widget directement.
*Bien faire attention que la mention ="display:block; apparaisse dans le code.
5/ Placez le bloc à l'emplacement désiré grâce au système de drag and drop.
6/ Sauvegardez la page et rafraichissez la.
Intégrer le widget dans une section
Vous pouvez suivre le tutoriel en vidéo ou en suivant les étapes décrites sous la vidéo.
1/ Rendez-vous sur votre thème Shopify
2/ Puis dans la partie modifier le code (en haut a gauche dans les “...”)
3/ Pour cliquer ensuite dans sections :
4/ Cliquez sur “Ajouter une ressource” celle-ci devra s'appeler : join-widget-section
5/ Copiez-collez le code ci-dessous à la place du code existant dans 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 %}
6/ Sauvegardez
7/ Retournez sur la page du site souhaitée puis cliquez sur "ajouter une section"
8/ Choisir “Join-widget-section”
9/ Une pop-up s’ouvre sur la droite, insérer le code du widget dans le champs “Widget code”
10/ Cliquer sur enregistrer, sauvegardez la page et rafraichissez la.
❗️Selon votre version de Shopify, il est possible que vous ne voyez pas le widget, il faudra donc cliquer sur preview pour voir le rendu.
💡 À savoir : Vous pourrez modifier le contenu de votre widget sans avoir à refaire les manipulations citées ci-dessus !