Personnaliser le rayon des coins du widget
Le rayon des coins définit l'arrondi des angles du widget : des coins carrés à 0 px jusqu'au cercle pour l'avatar et à la forme de pilule pour le bouton d'ajout au panier et le champ de saisie. Olvio vous propose cinq curseurs distincts pour accorder chaque partie du widget à votre thème. Ils sont disponibles sur tous les forfaits.
Les mêmes valeurs s'appliquent au widget de vos pages produit, au panneau de chat et aux conversations Olvio Advisor (forfaits Growth et Scale).
Trouver les curseurs de rayon des coins
Dans l'admin Olvio, ouvrez Apparence.
Dans l'onglet Page produit, la carte Suggestions contient un curseur Rayon des coins.
Dans l'onglet Panneau de chat, la carte Avatar contient un curseur Rayon des coins, et la carte Forme contient les curseurs Bulle de conversation, Bouton d'ajout au panier et Champ de saisie.
Onglet | Carte | Curseur | Plage | Valeur par défaut |
Page produit | Suggestions | Rayon des coins | 0 à 24 px | 12 px |
Panneau de chat | Avatar | Rayon des coins | 0 à 16 px | 16 px (cercle) |
Panneau de chat | Forme | Bulle de conversation | 0 à 24 px | 12 px |
Panneau de chat | Forme | Bouton d'ajout au panier | 0 à 32 px | 32 px (pilule) |
Panneau de chat | Forme | Champ de saisie | 0 à 32 px | 32 px (pilule) |
Le libellé de chaque curseur affiche sa valeur actuelle, par exemple Bulle de conversation — 12 px. Le curseur de l'avatar ajoute (cercle) à 16 px, et les curseurs Bouton d'ajout au panier et Champ de saisie ajoutent (pilule) à partir de 28 px.
Ce que chaque curseur modifie sur votre boutique en ligne
Rayon des coins de la carte Suggestions : les questions suggérées du widget Olvio sur la page produit.
Rayon des coins de la carte Avatar : l'avatar affiché à côté de chaque réponse de l'IA dans le panneau de chat. À 16 px, l'avatar est un cercle.
Bulle de conversation : les messages de l'acheteur, les réponses de l'IA et l'indicateur de saisie. Ce curseur arrondit aussi l'image du produit en haut du panneau de chat, les images des cartes produit dans le chat, ainsi que les badges de réduction et de rupture de stock sur ces cartes. Quelle que soit la valeur du curseur, le coin inférieur de chaque message, du côté de l'expéditeur, garde un rayon de 4 px.
Bouton d'ajout au panier : le bouton d'ajout au panier situé au-dessus du champ de saisie dans le panneau de chat de vos pages produit, et les boutons d'ajout au panier des cartes produit dans le chat lorsque l'option Activer l’ajout au panier dans le chat est activée. Consultez Afficher des cartes produit et permettre l'ajout au panier depuis le chat.
Champ de saisie : le champ de question sur la page produit et en bas du panneau de chat, les menus de variantes des cartes produit (lorsque l'option Activer l’ajout au panier dans le chat est activée) et les boutons de réponse affichés au-dessus du champ de saisie dans les conversations Olvio Advisor.
Le bouton d'envoi et le bouton de fermeture sont ronds et n'ont pas de curseur.
Prévisualiser vos modifications
L'Aperçu en direct se met à jour pendant que vous faites glisser un curseur. Quand vous ouvrez l'onglet Page produit, il montre l'aperçu de la page produit, avec les suggestions et le champ de saisie. Quand vous ouvrez l'onglet Panneau de chat, il montre l'aperçu du panneau de chat, avec l'avatar, les bulles de message, le bouton d'ajout au panier et le champ de saisie. Vous pouvez aussi passer de l'un à l'autre avec les boutons Page produit et Panneau de chat situés au-dessus de l'aperçu.
L'aperçu ne montre pas les cartes produit, les boutons de réponse d'Advisor ni votre CSS personnalisé, et l'emplacement réservé à la vignette produit en haut de l'aperçu du panneau de chat ne suit pas le curseur Bulle de conversation (l'image du produit sur votre boutique en ligne, elle, le suit). L'avatar à côté des réponses dans l'aperçu suit le curseur Avatar, mais le grand avatar de la carte Avatar est toujours affiché en cercle. Vérifiez votre boutique en ligne après l'enregistrement.
Enregistrer et vérifier votre boutique en ligne
Dès que vous déplacez un curseur, une barre d'enregistrement apparaît. Cliquez sur Enregistrer, ou sur Abandonner pour revenir à vos dernières valeurs enregistrées.
Attendez le message Modifications enregistrées. Si un message d'erreur s'affiche à la place, par exemple Too many requests, vos modifications ne sont pas enregistrées : la barre d'enregistrement reste ouverte, patientez donc quelques instants et cliquez à nouveau sur Enregistrer.
Ouvrez ou rechargez une page produit de votre boutique en ligne pour voir les nouveaux coins. L'avatar, la Bulle de conversation et le Bouton d'ajout au panier n'apparaissent que dans le panneau de chat. Posez une question dans le widget pour l'ouvrir et les vérifier.
Si vous ne pouvez pas cliquer sur Enregistrer, cherchez dans l'onglet Style un champ de couleur affichant Format attendu : #rrggbb et corrigez-le d'abord.
Il n'y a pas de bouton de réinitialisation. Pour revenir aux valeurs par défaut, placez chaque curseur sur la valeur par défaut indiquée dans le tableau ci-dessus, puis enregistrez.
Si votre boutique en ligne affiche toujours les anciennes formes, consultez Mes modifications d'Apparence ne s'affichent pas sur la boutique en ligne.
Ce que les curseurs ne couvrent pas
Paramètres du bloc dans l'éditeur de thème : le bloc Olvio — Product page de l'éditeur de thème Shopify peut remplacer uniquement les couleurs et la taille de police. Le rayon des coins provient toujours de la page Apparence.
Autres formes : pour modifier une forme qui n'a pas de curseur, comme le bouton d'envoi, utilisez du CSS personnalisé. Consultez Ajouter du CSS personnalisé au widget.