Ajouter du CSS personnalisé au widget

Si les réglages intégrés de la page Apparence ne vous donnent pas le rendu souhaité, vous pouvez ajouter votre propre CSS pour modifier l'apparence du widget Olvio sur votre boutique en ligne. Le CSS personnalisé est disponible sur tous les forfaits.

Pour les couleurs, les polices et le rayon des coins, commencez par les réglages intégrés : consultez Personnaliser les couleurs du widget, Personnaliser la police et la taille de police du widget et Personnaliser le rayon des coins du widget.

Votre CSS s'applique à toute la page

Le widget n'est pas isolé du reste de la page de votre boutique en ligne. Olvio ajoute votre CSS à la page sous forme de feuille de style classique : une règle peut donc modifier n'importe quel élément de la page, pas seulement le widget.

Olvio l'ajoute sur les pages produit qui affichent le bloc Olvio et, si vous utilisez Olvio Advisor (forfaits Growth et Scale), sur les autres pages de votre boutique où se charge l'intégration d'application Olvio Advisor.

Incluez une classe Olvio dans chaque sélecteur, par exemple .olvio-panel. Un sélecteur seul comme p ou button modifie le style de tous les paragraphes ou de tous les boutons de ces pages.

Ajouter votre CSS

Dans l'admin Olvio, ouvrez Apparence.
Cliquez sur l'onglet Avancé.
Dans la carte CSS personnalisé, collez ou saisissez votre CSS. Le champ accepte jusqu'à 5 000 caractères et affiche un compteur de caractères.
Cliquez sur Enregistrer dans la barre d'enregistrement.

Le message Modifications enregistrées confirme l'enregistrement. Le champ affiche ensuite votre CSS tel qu'Olvio l'a enregistré : vous voyez ainsi si quelque chose a été supprimé (voir Ce qu'Olvio supprime à l'enregistrement plus bas).

L'Aperçu en direct de la page Apparence n'affiche pas le CSS personnalisé : Le CSS personnalisé n'est appliqué que sur le widget en direct. Pour voir vos modifications, rechargez une page produit de votre boutique en ligne.

Faire primer vos règles sur les styles d'Olvio

Les styles du widget Olvio utilisent !important sur de nombreuses propriétés, pour que votre thème ne puisse pas casser le widget. Ajoutez !important à chaque propriété que vous surchargez : là où le style d'Olvio l'utilise, une règle qui ne l'utilise pas perd face au style par défaut d'Olvio.

Pour aider vos règles à primer, Olvio ajoute html devant chaque sélecteur quand il applique votre CSS : .olvio-panel est appliqué sous la forme html .olvio-panel.

Les sélecteurs placés dans des règles @ comme @media ne reçoivent pas ce préfixe. Commencez-les vous-même par html, par exemple @media (max-width: 600px) { html .olvio-title { font-size: 1.2em !important; } }.

En dehors des règles @, ne commencez pas vous-même un sélecteur par html ou :root : avec le préfixe qu'Olvio ajoute, la règle ne ciblerait plus aucun élément. Évitez aussi les virgules dans :has() et dans les valeurs d'attribut entre guillemets : Olvio y ajoute aussi le préfixe, et cette partie du sélecteur ne cible plus rien.

Sélecteurs utiles

La carte CSS personnalisé propose ces sélecteurs :

.olvio-label : le Nom de l'expert, le petit texte en majuscules au-dessus du titre sur la page produit.
.olvio-title : la Question d'accroche, le titre sur la page produit.
.olvio-suggestion-btn : les boutons des questions suggérées sur la page produit et, dans les conversations Olvio Advisor, les boutons de réponse au-dessus du champ de question ainsi que les boutons Continuer et Recommencer, qui proposent de reprendre une conversation précédente. Pour ne styliser qu'un seul de ces emplacements, placez .olvio-suggestions (page produit) ou .olvio-panel-chips-row (Olvio Advisor) devant la classe, par exemple .olvio-panel-chips-row .olvio-suggestion-btn.
.olvio-input-row : le champ de question, sur la page produit et dans le panneau de chat.
.olvio-panel : le panneau de chat.
.olvio-msg-user : les messages de l'acheteur dans le panneau de chat.
.olvio-msg-assistant : les réponses d'Olvio dans le panneau de chat.
.olvio-atc-btn : le bouton d'ajout au panier du produit consulté, au-dessus du champ de question dans le panneau de chat. Les boutons d'ajout au panier des cartes produit du chat utilisent .olvio-card-atc.

Pour trouver la classe d'un autre élément, faites un clic droit dessus sur votre boutique en ligne et utilisez l'outil Inspecter de votre navigateur.

Exemples

Ombre sur le panneau de chat : .olvio-panel { box-shadow: -12px 0 40px rgba(0,0,0,0.15) !important; }
Titre plus petit sur la page produit : .olvio-title { font-size: 1.25em !important; }
Couleur au survol des questions suggérées et des boutons de réponse d'Advisor : .olvio-suggestion-btn:hover { background: #faf5ff !important; }
Masquer le nom de l'expert : .olvio-label { display: none !important; }

Ce qu'Olvio supprime à l'enregistrement

Olvio vérifie votre CSS à l'enregistrement et supprime notamment :

Les règles @import.
Les commentaires CSS (/* … */).
Les fragments HTML comme <script, </style, .
Les adresses complètes dans url(), image-set(), image(), src() et cross-fade() : une valeur qui commence par http://, https://, //, javascript: ou vbscript: est remplacée par un url() vide, même si elle pointe vers votre propre boutique. Vous ne pouvez pas charger d'images ou de polices depuis une adresse web complète de cette façon. Les URI data: et les chemins relatifs, comme un chemin qui commence par un seul /, sont conservés.
La propriété behavior et expression(), que seules d'anciennes versions d'Internet Explorer utilisaient. Évitez scroll-behavior et overscroll-behavior dans le CSS personnalisé : à l'enregistrement, Olvio supprime une partie de ces déclarations, et le CSS qui les suit peut cesser de fonctionner.
Toute règle dont le sélecteur cible la ligne de pied de page du panneau de chat (.olvio-panel-footer, .olvio-brand-mention) ou la zone en bas du panneau qui la contient (.olvio-panel-input), y compris dans @media et dans les règles imbriquées. La règle entière est supprimée, même si elle contient aussi d'autres sélecteurs. Une règle @ comme @scope qui nomme l'une de ces classes est supprimée avec tout son contenu. Pour styliser le champ de question, utilisez .olvio-input-row.
Tout ce qui dépasse 5 000 caractères.

Dans une chaîne entre guillemets, évitez les échappements avec barre oblique inverse comme \", \\ et \A : ils cassent la chaîne à l'enregistrement. Tapez plutôt le caractère lui-même quand c'est possible, et placez une chaîne qui contient " entre guillemets simples.

La ligne « Propulsé par Olvio » reste affichée sur tous les forfaits

En bas du panneau de chat, une ligne indique Vous discutez avec une IA • Propulsé par Olvio en français, avec un lien vers Olvio sur le Shopify App Store. Olvio ne propose aucun moyen de masquer cette ligne, quel que soit le forfait.

Olvio supprime les règles qui nomment les classes de cette ligne. Sur votre boutique en ligne, le widget impose aussi les styles d'affichage et de visibilité propres à la ligne, et la remet en place si quelque chose la supprime.

Tester et annuler vos modifications

Après l'enregistrement, rechargez une page produit de votre boutique en ligne et cliquez sur une question suggérée (ou saisissez une question) pour ouvrir le panneau de chat. Vérifiez que les messages sont lisibles et que rien ne se chevauche. Vérifiez aussi la page dans une fenêtre étroite, de la taille d'un téléphone.

Pour annuler des modifications non enregistrées, cliquez sur Abandonner dans la barre d'enregistrement. Pour retirer du CSS personnalisé déjà enregistré, videz le champ et cliquez sur Enregistrer : le widget retrouve son apparence par défaut au prochain chargement d'une page de votre boutique en ligne.

Si vos modifications n'apparaissent toujours pas, consultez Mes modifications d'Apparence ne s'affichent pas sur la boutique en ligne.