Personnaliser les couleurs du widget

Vous pouvez accorder le widget Olvio à votre marque avec sept couleurs. Elles s'appliquent au widget de vos pages produit et au panneau de chat, y compris le panneau de chat qui s'ouvre depuis les liens Olvio Advisor (forfaits Growth et Scale). Les réglages de couleur eux-mêmes sont disponibles sur tous les forfaits.

Modifier les couleurs du widget

Ouvrez Apparence dans le menu de l'application Olvio.
Cliquez sur l'onglet Style.
Dans la carte Couleurs, modifiez les couleurs de votre choix. Elles sont regroupées en Marque (Couleur d'accent, Avant-plan d'accent), Surfaces (Arrière-plan, Surface, Bordure) et Texte (Texte, Texte atténué).
Cliquez sur Enregistrer dans la barre d'enregistrement qui apparaît dès que vous modifiez quelque chose. Le message Modifications enregistrées le confirme.

Pour choisir une couleur, cliquez sur le carré de couleur à gauche d'un champ pour ouvrir le sélecteur de couleur de votre navigateur, ou saisissez ou collez un code hexadécimal dans le champ. Les codes doivent respecter le format à six chiffres #rrggbb, par exemple #7b3fe4. Les codes courts comme #fff et les noms de couleur ne sont pas acceptés : le champ affiche Format attendu : #rrggbb, et vous ne pouvez pas enregistrer tant que vous ne l'avez pas corrigé.

Pour annuler les modifications que vous n'avez pas enregistrées, cliquez sur Abandonner dans la barre d'enregistrement.

Ce que change chaque couleur

Couleur	Où elle apparaît
Couleur d'accent	Le Nom de l'expert au-dessus de la Question d'accroche, les icônes étincelle des questions suggérées sur la page produit, le bouton d'envoi, les messages de l'acheteur, l'avatar par défaut, la zone derrière un avatar importé dont le fond est transparent, le bouton Ajouter au panier au-dessus du champ de question dans le panneau de chat des pages produit, ainsi que les boutons d'ajout au panier et les badges de réduction des cartes produit. Elle dessine aussi le contour d'une question suggérée au survol et celui du champ de question lorsqu'il est sélectionné, et colore au survol les liens des réponses de l'IA.
Avant-plan d'accent	Le texte et les icônes affichés sur la couleur d'accent : les messages de l'acheteur, la flèche d'envoi, l'icône de l'avatar par défaut, le texte des boutons d'ajout au panier dans le panneau de chat et sur les cartes produit, et les badges de réduction.
Arrière-plan	Le panneau de chat, les questions suggérées, le champ de question (sur la page produit et dans le panneau de chat), ainsi que les sélecteurs de variante et leurs menus sur les cartes produit. Sur la page produit, le reste du widget est transparent : l'arrière-plan de votre thème apparaît donc derrière le Nom de l'expert et la Question d'accroche, et autour des suggestions et du champ de question.
Surface	Les réponses de l'IA, l'indicateur de saisie, le fond derrière les images des cartes produit, la mise en surbrillance lorsqu'un acheteur survole une question suggérée ou une option de variante, et l'option sélectionnée dans un menu de variantes.
Bordure	Le contour des questions suggérées, du champ de question, des sélecteurs de variante et de leurs menus, ainsi que la ligne sous l'en-tête du panneau de chat. La fine ligne au-dessus du champ de question dans le panneau de chat n'utilise pas cette couleur.
Texte	La Question d'accroche, les questions suggérées, le texte saisi par les acheteurs, les réponses de l'IA, les noms de produits dans le panneau de chat et sur les cartes produit, les sélecteurs de variante et leurs options sur les cartes produit, le nom de votre boutique en haut du panneau de chat d'Advisor, ainsi que le bouton de fermeture et la flèche de chargement des messages précédents au survol.
Texte atténué	Le texte indicatif du champ de question, les prix des produits dans le panneau de chat et sur les cartes produit, la flèche déroulante des sélecteurs de variante et les options épuisées dans les menus de variantes des cartes produit, les points de l'indicateur de saisie, le bouton de fermeture et la flèche de chargement des messages précédents (tous deux passent à Texte au survol ; la flèche affiche aussi son libellé Charger les messages précédents), la ligne de mention et Propulsé par Olvio en bas du panneau de chat, et le fond du badge Épuisé sur les cartes produit.

Les sélecteurs de variante et les boutons d'ajout au panier des cartes produit n'apparaissent que si Activer l’ajout au panier dans le chat est activé, dans l'onglet Avancé de la page Apparence. Consultez Afficher des cartes produit et permettre l'ajout au panier depuis le chat.

Olvio n'ajuste pas le contraste de vos couleurs. Vérifiez que l'Avant-plan d'accent reste lisible sur la Couleur d'accent, que le Texte et le Texte atténué restent lisibles sur l'Arrière-plan, que le Texte reste lisible sur la Surface, et que l'Arrière-plan reste lisible sur le Texte atténué, qui remplit le badge Épuisé. Sur les pages produit, le Nom de l'expert (Couleur d'accent) et la Question d'accroche (Texte) s'affichent directement sur l'arrière-plan de votre thème : vérifiez qu'ils y restent lisibles aussi.

Prévisualiser vos couleurs

L'Aperçu en direct se met à jour pendant que vous modifiez, avant l'enregistrement. Utilisez les boutons Page produit et Panneau de chat au-dessus de l'aperçu pour changer de vue. La couleur Surface n'apparaît que dans la vue Panneau de chat. Tant qu'un code couleur n'est pas valide, l'aperçu affiche à sa place la couleur par défaut d'Olvio.

L'aperçu utilise un contenu d'exemple et n'inclut ni votre CSS personnalisé, ni les couleurs remplacées dans l'éditeur de thème. Dans la vue Panneau de chat, la Bordure colore aussi la ligne au-dessus du champ de question ; sur votre boutique en ligne, cette ligne garde la même couleur discrète quel que soit votre choix. Après l'enregistrement, vérifiez une page produit sur votre boutique en ligne.

Voir les nouvelles couleurs sur votre boutique en ligne

Lorsque vous cliquez sur Enregistrer, Olvio envoie vos nouvelles couleurs à votre boutique en ligne. Rechargez une page produit pour les voir. Si les anciennes couleurs s'affichent toujours, consultez Mes modifications d'Apparence ne s'affichent pas sur la boutique en ligne.

Remplacer les couleurs pour un modèle de produit

Le bloc Olvio — Product page a ses propres paramètres de couleur, qui s'affichent lorsque vous sélectionnez le bloc dans l'éditeur de thème Shopify. Use custom colors for this block : lorsque cette case est cochée, les couleurs Accent, Accent foreground, Background, Surface, Border, Text et Muted text du bloc remplacent celles définies sur la page Apparence. Cliquez sur Enregistrer dans l'éditeur de thème.

Le remplacement s'applique à tous les produits qui utilisent le modèle, ainsi qu'au panneau de chat qui s'ouvre depuis ce bloc, même si la description du paramètre indique for this block only.
Les paramètres de couleur du bloc partent des couleurs par défaut d'Olvio, et non des couleurs définies sur la page Apparence. Lorsque vous activez le remplacement, définissez les sept.
Use custom colors for this block : pour revenir aux couleurs de la page Apparence, décochez cette case et enregistrez le thème.

Pour la configuration complète du bloc, consultez Ajouter le widget Olvio à vos pages produit.

Couleurs par défaut d'Olvio

Il n'y a pas de bouton de réinitialisation. Pour revenir à la palette par défaut d'Olvio, saisissez ces codes et cliquez sur Enregistrer :

Couleur d'accent : #7b3fe4
Avant-plan d'accent : #ffffff
Arrière-plan : #ffffff
Surface : #f7f6ff
Bordure : #e3e0f5
Texte : #0e0c1b
Texte atténué : #6e6c8a

Réglages associés

Police et taille du texte : Personnaliser la police et la taille de police du widget
Coins arrondis : Personnaliser le rayon des coins du widget
Nom de l'expert, question d'accroche et avatar : Modifier le nom de l'expert, la question d'accroche et l'avatar du widget
Tout ce que les sept couleurs ne couvrent pas : Ajouter du CSS personnalisé au widget