Dans cet article, vous apprendrez à installer Brilliant dans votre boutique, à activer la connexion initiale et à vérifier que tous les éléments fonctionnent correctement avant de commencer à vendre avec l’IA.
1. Prérequis
Avant de commencer, assurez-vous de remplir les conditions suivantes pour éviter les erreurs pendant le processus :
- Avoir une boutique active sur la plateforme Shopify.
- Disposer des droits d’administrateur ou des permissions suffisantes pour installer des applications dans votre panneau de contrôle.
2. Installation depuis le Marketplace
Pour ajouter Brilliant à votre ecommerce, suivez ces étapes :
-
Localisation de l’application :
Accédez à votre panneau Shopify, allez dans la section Apps et sélectionnez Shopify App Store.
-
Recherche :
Tapez "Brilliant AI assistant" dans le moteur de recherche de la boutique d’applications.
-
Installation :
Cliquez sur le bouton Installer. Shopify vous redirigera vers un écran détaillant les permissions nécessaires. Cliquez de nouveau sur Installer pour accepter et finaliser la connexion.
3. Configuration initiale après l’installation
Une fois l’installation confirmée, accédez à Brilliant depuis votre liste d’applications dans Shopify pour entrer dans le backoffice.
Premiers pas recommandés
-
Création de l’agent :
Démarrez la création de l’agent pour que l’IA analyse votre catalogue. Ce processus est automatique mais peut prendre plusieurs heures selon le volume de produits. Vous pouvez continuer à utiliser votre boutique normalement pendant ce temps.
-
Activation de l’agent :
Une fois le catalogue traité, assurez-vous de marquer l’agent comme Actif dans le panneau de contrôle.
-
Activer le widget dans le thème :
Pour que l’assistant soit visible, allez dans Boutique en ligne / Thèmes / Personnaliser. Dans la section Incrustations d’application, activez l’interrupteur de Brilliant et enregistrez les modifications.
- Ajouter des questions suggérées sur la page produit :
Allez dans Boutique en ligne / Thèmes / Modifier. Sélectionnez la page produit et ajoutez un nouveau bloc :
Sélectionnez le bloc "Questions sur le produit", dans l’onglet "Apps" :
Vous verrez alors un aperçu des questions et pourrez enregistrer les modifications :
- Ajouter des carrousels de produits similaires ou complémentaires sur la page produit :
Allez dans Boutique en ligne / Thèmes / Modifier. Sélectionnez la page produit et ajoutez un nouveau bloc :
Sélectionnez le bloc "Carrousel de produits", dans l’onglet "Apps" :
Vous pouvez maintenant cliquer sur ce bloc et choisir le titre et le type de liste de produits que vous souhaitez afficher :
Produits similaires : affichera des produits similaires à celui que l’utilisateur consulte.
Produits qui s’accordent bien : affichera des produits qui s’accordent bien avec le produit consulté.
-
Afficher le bouton des actions contextuelles de Brilliant sur les cartes produit :
Une fois que vous avez activé le widget Brilliant dans le thème, en plus du bouton principal Brilliant affiché dans le coin inférieur de l’écran, les boutons d’actions contextuelles devraient également commencer à apparaître sur les cartes produit de votre site.
Si ce n’est pas le cas, c’est parce que l’un des cas suivants se présente :
- Vous utilisez un thème public Shopify sans modification du code. Si vous ne voyez pas les boutons d’actions contextuelles sur les cartes produit de votre site et que vous utilisez un thème public Shopify, c’est parce que Brilliant ne prend pas encore en charge ce thème. Dans ce cas, veuillez nous contacter à l’adresse support@getbrilliant.ai en nous indiquant le domaine de votre ecommerce et le nom du thème public que vous utilisez. Nos développeurs mettront à jour le support de Brilliant pour votre thème en priorité.
-
Vous utilisez un thème public Shopify avec des modifications du code, ou un thème privé personnalisé. Dans ce cas, vous devrez ajouter un petit code HTML dans votre thème pour que Brilliant puisse afficher les boutons d’actions contextuelles sur les cartes produit. Le code à ajouter dans chaque carte produit est
data-bri-product-id="id de produit". En code Liquid de Shopify, il faut généralement mettre quelque chose comme :data-bri-product-id="{{ product.id }}". Vous devez l’ajouter sur toutes les cartes produit où vous souhaitez afficher le bouton contextuel de Brilliant. Habituellement, il y a un fichier product-card.liquid ou similaire, et ce composant est réutilisé dans plusieurs types de pages comme la page d’accueil, les produits d’une collection, les résultats de recherche, etc., donc vous n’aurez à ajouter ce code que dans ce fichier, et cela s’appliquera à tout votre thème. Le code ci-dessus est un attribut HTML que vous devez mettre dans l’élément DOM parent qui englobe chaque carte produit. Sauf cas très exceptionnels, il est normal que vous puissiez ajouter ce code dans un élément HTML déjà existant dans votre thème ; c’est-à-dire qu’il ne devrait pas être nécessaire de créer un nouvel élément avec cet attribut englobant toute la carte produit.L’objectif est de générer un code similaire au suivant :
<body> ... <div class="my-theme-product-card" data-bri-product-id="86461581684"> ... contenu HTML interne de cette carte produit </div> ... <div class="my-theme-product-card" data-bri-product-id="95168765168"> ... contenu HTML interne de cette carte produit </div> ... <div class="my-theme-product-card" data-bri-product-id="21564846848"> ... contenu HTML interne de cette carte produit </div> </body>
-
Personnalisation des styles :
Dans la page de gestion de Brilliant, allez dans Paramètres / Styles généraux et ajustez les couleurs et la typographie pour que l’assistant ressemble le plus possible à votre boutique :
4. Vérifications de fonctionnement
Pour vérifier que l’installation a réussi, naviguez sur votre boutique et vérifiez les éléments suivants :
-
Bouton flottant : Le bouton d’activation de Brilliant doit apparaître dans un coin de votre site web.
-
Cartes produit : Vous devez voir les puces ou étiquettes intelligentes intégrées dans les cartes produit.
-
Interaction : Posez une question à l’assistant et vérifiez que les réponses sont générées correctement en se basant sur votre catalogue.
Vous voulez en savoir plus ?