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.
![](https://uperia.tech/wp-content/uploads/2023/02/1-1024x567.png)
Etape 2 : Récupérez l’URL finale à utiliser” dans les réglages de votre formulaire
![](https://uperia.tech/wp-content/uploads/2023/02/2-1-1024x542.png)
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”.
![](https://uperia.tech/wp-content/uploads/2023/02/3-1024x488.png)
Etape 5 : Sélectionnez le bouton “Modifier le code”
![](https://uperia.tech/wp-content/uploads/2023/02/4-1024x600.png)
Etape 6 : Dans le menu de gauche, sous “Modèles, cliquez sur “Ajouter une nouvelle ressource”
![](https://uperia.tech/wp-content/uploads/2023/02/5-1024x489.png)
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.
![](https://uperia.tech/wp-content/uploads/2023/02/6-1024x723.png)
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.
![](https://uperia.tech/wp-content/uploads/2023/02/8-1024x576.png)
Etape 9 : Dans le menu de gauche, allez sur “Boutique en ligne”, puis, sur “Pages”
![](https://uperia.tech/wp-content/uploads/2023/02/9-1-815x1024.png)
Etape 10 : Cliquez sur “Ajouter une page”
![](https://uperia.tech/wp-content/uploads/2023/02/10-1024x377.png)
Donnez-lui un nom à cette page pour qu’elle puisse ensuite être facilement accessible, puis enregistrez.
![](https://uperia.tech/wp-content/uploads/2023/02/Capture-decran-2023-02-01-a-16.57.07-1024x427.png)
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”.
![](https://uperia.tech/wp-content/uploads/2023/02/12-1024x483.png)
Etape 12 : Cliquez sur “Afficher la page” pour voir à quoi ressemble l’intégration sur votre site Shopify en direct !
![](https://uperia.tech/wp-content/uploads/2023/02/13-1024x555.png)
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 ! 🙂