Comment intégrer son formulaire UPERIA sur Shopify ?

Table des matières

On commence sur UPERIA :

Etape 1 : Assurez vous que votre formulaire soit sur “Formulaire Actif” pour le mettre en ligne, dans les Paramètres du formulaire.

Etape 2 : Récupérez l’URL finale à utiliser” dans les réglages de votre formulaire

Etape 3 : Intégrez l’URL fraîchement récupérée à l’étape précédente dans le code suivant, à la place de « URL FINALE DU FORMULAIRE ». Gardez ce code bien au chaud.

<div id="uperiaIframe"></div>
<script>
function getCookieValue (cookieName) {
var cookie = [];
var cookieValue = "";
cookie = document.cookie.split(';');
for (var i = 0; i < cookie.length; i++) {
var subcookie = cookie[i].split('=');
if (subcookie[0].trim() == cookieName) {
cookieValue = subcookie[1];
break;
}
}
return cookieValue;
}
var url = "URL FINALE DU FORMULAIRE";
var cookieValue = getCookieValue('hubspotutk');
var iframe = document.getElementById('uperiaIframe');
iframe.innerHTML = '<iframe id="uperiaIframeContent" width="100%"
src="'+url+'?hubspotutk='+cookieValue+'"></iframe>';
window.addEventListener('message', function(e) {
document.getElementById('uperiaIframeContent').style.height = e.data.height + 40 +
'px';
document.getElementById('uperiaIframe').style.height = e.data.height + 40 + 'px';
} , false);
</script>

Puis, on termine sur Shopify :

Etape 4 : Connectez-vous sur votre compte Shopify.

Dans le menu de gauche, cliquez sur “Boutique en ligne”, puis cliquez sur “Thèmes”.

Etape 5 : Sélectionnez le bouton “Modifier le code”

Etape 6 : Dans le menu de gauche, sous “Modèles, cliquez sur “Ajouter une nouvelle ressource”

Etape 7 : Choisissez le type de modèle sur lequel vous souhaitez créer.

Dans notre cas, choisissez “page” ainsi que “liquid”. Ensuite, donnez un nom à votre nouveau modèle.

Etape 8 : Y copier le code préparé en ETAPE 3, avec l’URL FINALE DU FORMULAIRE remplacée par l’URL de votre formulaire. Enregistrez.

Etape 9 : Dans le menu de gauche, allez sur “Boutique en ligne”, puis, sur “Pages”

Etape 10 : Cliquez sur “Ajouter une page”

Donnez-lui un nom à cette page pour qu’elle puisse ensuite être facilement accessible, puis enregistrez.

Etape 11 : Cliquez sur le menu déroulant sous “Modèle de thème” et choisissez le nom du modèle créé en ETAPE 7. Cliquez sur “Enregistrer”.

Etape 12 : Cliquez sur “Afficher la page” pour voir à quoi ressemble l’intégration sur votre site Shopify en direct !

Le tour est joué, félicitations 👏

Vous rencontrez des difficultés pour intégrer votre formulaire ? Nous restons à votre disposition à contact@uperia.tech pour vous aider dans l’intégration de votre formulaire intelligent ! 🙂

Vous avez aimé cet article ?
Partagez-le avec vos collègues ou amis ici​

Articles récents

E-commerce

Orienter vos internautes vers les produits adaptés à leurs besoins ? Une nécessité.

Comment optimiser son taux de conversion sur son site e-commerce ? C’est la question cruciale que se posent de nombreux sites e-commerce en plein développement. …

Lire l'article
Tuto

Comment créer un formulaire qui convertit ?

Vous souhaitez optimiser votre formulaire intelligent et mettre toutes les chances de votre côté pour attirer de nouveaux leads ? Ces quelques conseils vous guideront …

Lire l'article
Tuto

Comment créer son formulaire pas à pas ?

La première étape du formulaire intelligent : le questionnaire. Découvrez toutes les fonctionnalités de notre outil dans ce tutoriel. Notre premier conseil : soyez clair, …

Lire l'article