Guide
Ajouter un chatbot sur une boutique Shopify
App embed, section Custom Liquid ou code du thème : ajouter un chatbot à la boutique Shopify d'un client, et ce qu'il faut revérifier ensuite.
Mis à jour le
Sur Shopify, la bonne façon d'ajouter un chatbot est de passer par une application qui propose une « intégration d'application » (app embed, dans l'interface en anglais). Vous l'activez d'un interrupteur dans l'éditeur de thème, sans toucher au code. L'aide officielle de Shopify cite précisément la bulle de chat comme exemple de ce type d'élément. Le code collé à la main reste possible, mais il demande plus de suivi.
Les trois façons de faire
| Méthode | Où | À retenir |
|---|---|---|
| Intégration d'application (app embed) | Éditeur de thème, icône des intégrations d'applications | Fonctionne avec toutes les versions de thème, selon l'aide Shopify. S'active et se désactive d'un interrupteur |
| Section Custom Liquid | Éditeur de thème, section à ajouter dans une page | Permet de coller un code fourni par l'outil sans ouvrir les fichiers du thème, si le thème propose cette section |
| Code dans les fichiers du thème | Modifier le code du thème | Dernier recours : la modification est liée à ce thème et se perd au changement de thème |
Ce que Shopify dit des deux types d'éléments
L'aide distingue :
- les intégrations d'applications (app embeds), qui « flottent » au-dessus du thème ou ajoutent du code invisible pour les clients : bulle de chat, outil de mesure. Elles sont utilisables avec n'importe quelle version de thème ;
- les blocs d'applications (app blocks), que l'on place à un endroit précis d'une page, mais seulement dans les thèmes compatibles, et pas dans toutes les sections.
Pour un chatbot en bulle, c'est donc l'intégration d'application qui convient. Un bloc d'application sert plutôt à afficher une fenêtre de discussion fixe dans une page, par exemple une page « Aide ».
Activer l'intégration d'application, étape par étape
D'après l'aide Shopify :
- Dans l'administration, ouvrez Boutique en ligne.
- Repérez le thème à modifier et cliquez sur Modifier le thème.
- Facultatif : choisissez un marché dans la liste. Sans choix, la modification s'applique à la boutique par défaut.
- Cliquez sur l'icône des intégrations d'applications dans la barre latérale.
- Sélectionnez l'application, ou cherchez-la.
- Activez son interrupteur.
- Facultatif : dépliez l'élément pour voir ses réglages.
- Cliquez sur Enregistrer.
- Prévisualisez la boutique pour voir l'application en place.
Le point 3 compte pour les boutiques qui vendent dans plusieurs pays : si le client a configuré des marchés, vérifiez que l'assistant est actif là où il doit l'être, et dans la bonne langue.
Pourquoi éviter de modifier le code du thème
La documentation pour développeurs de Shopify présente les extensions de thème comme le mécanisme prévu : le marchand « n'a pas à modifier manuellement le code de son thème », ce qui réduit le risque de le casser, et l'élément apparaît directement dans l'éditeur. Ce mécanisme est compatible avec les thèmes Online Store 2.0.
L'aide Shopify reconnaît que certaines applications injectent du code directement dans le thème, ou demandent après l'installation de modifier soi-même le code. Dans ce cas :
- préférez la section Custom Liquid si le thème du client la propose ;
- gardez une copie du thème avant toute modification, pour pouvoir revenir en arrière ;
- notez dans votre dossier client quel fichier a été modifié et pourquoi ;
- si le script est fourni sous forme de balise
<script src="…">, ajoutez l'attributdeferquand l'outil le permet, pour qu'il ne bloque pas l'affichage.
Les situations à revérifier
Changement de thème. C'est le piège le plus courant. L'aide Shopify est claire : après un changement de thème publié, il faut réactiver les applications dans le nouveau thème, car elles « ne seront pas actives par défaut ». Une refonte graphique de la boutique doit donc comporter une ligne « réactiver l'assistant et le tester ».
Désinstallation. L'aide Shopify consultée ne dit pas ce qui reste dans le thème quand on désinstalle une application qui y a injecté du code. Si vous changez d'outil, contrôlez le code du thème et retirez vous-même ce qui ne sert plus, sinon l'ancien script peut continuer à se charger.
Superposition. Un élément flottant ne doit pas masquer le contenu de la page. Sur mobile, une bulle de chat peut recouvrir le bouton d'ajout au panier ou un bandeau d'information : testez sur un vrai téléphone.
Consentement. Une boutique dépose déjà ses propres cookies. Si le chatbot en ajoute dès le chargement, il doit attendre l'accord du visiteur : voir chatbot et consentement aux cookies.
Liste de contrôle
- L'outil propose une intégration d'application ; à défaut, le code est dans une section Custom Liquid.
- L'interrupteur est activé sur le thème publié, et pour chaque marché concerné.
- La bulle ne cache aucun bouton d'achat, sur ordinateur comme sur mobile.
- Le message d'accueil précise qu'il s'agit d'une IA (voir les mentions à ajouter au site).
- Les réponses sur la livraison, les retours et les délais correspondent aux pages de la boutique (voir mettre à jour le chatbot après une modification).
- Le contrat de maintenance prévoit la réactivation après un changement de thème (voir le chatbot dans le contrat de maintenance).
Questions fréquentes
Comment activer un chatbot dans le thème Shopify ?
Dans l'administration, Boutique en ligne, puis Modifier le thème. Cliquez sur l'icône des intégrations d'applications (App embeds) dans la barre latérale, activez l'interrupteur de l'application, enregistrez, puis prévisualisez la boutique.
Le chatbot disparaît-il quand on change de thème Shopify ?
Il n'est plus actif. L'aide Shopify précise que les intégrations d'applications doivent être réactivées dans le nouveau thème, car elles ne le sont pas par défaut.
Faut-il modifier le code du thème pour ajouter un chatbot ?
Pas si l'outil passe par une extension de thème : Shopify indique qu'avec ce mécanisme, le marchand n'a pas à modifier le code de son thème. Le code à la main ne se justifie que si l'outil ne propose rien d'autre.
Sources
Pages consultées pour écrire cet article :