Notifications de la vitrine

Lorsque des clients ajoutent des produits au panier, modifient le tiroir du panier de l’application, passent au paiement ou appliquent un code de réduction, l’application affiche un court message de réussite ou d’erreur sur votre vitrine. Storefront notifications vous permet de choisir l’apparence de ces messages.

Il existe trois styles :

• Toast : un petit message dans un coin de l’écran.
• Modal : une fenêtre contextuelle au centre de l’écran avec un bouton OK. Elle reste affichée jusqu’à ce que le client la ferme.
• Banner : une barre en haut ou en bas de l’écran.

Étapes de gestion

1. Ouvrir Storefront notifications

   Dans l’application, cliquez sur Add-on Features, repérez Storefront notifications et cliquez sur Customize.

2. Choisir le style par défaut

   Dans Notification style, choisissez le Default style : Toast, Modal ou Banner. Tous les messages utilisent ce style, sauf si vous en choisissez un autre pour leur fonctionnalité à l’étape suivante.

   

3. Choisir un style par fonctionnalité (facultatif)

   Sous Style per feature, conservez Default ou choisissez un autre style pour un groupe de messages :

   • Add to cart : produits que l’application ajoute au panier, depuis les pages produit, Quick Buy, le Quick Order Form ou le tiroir du panier Wholesale de l’application.
   • Cart updates : modifications dans le tiroir du panier Wholesale de l’application, comme la mise à jour du panier ou l’enregistrement ou la suppression d’une adresse.
   • Checkout & Pay later : erreurs de paiement, ainsi que messages de réussite et d’erreur des commandes Pay later.
   • Discount code : messages du champ de code de réduction de l’application, par exemple lorsqu’un code est accepté ou n’est pas valable pour les articles du panier.

   Exemple : conservez Toast comme style par défaut et choisissez Modal pour Checkout & Pay later, afin que les clients ne manquent pas la confirmation Pay later.

4. Personnaliser chaque style

   Définissez l’apparence de chaque style dans sa propre section. Laissez une couleur vide pour utiliser l’apparence par défaut.

   Toast style

   • Auto hide : activé par défaut. Désactivez-le pour que chaque toast reste affiché jusqu’à ce que le client le ferme.
   • Design : Classic, Card, Soft ou Pill.
   • Position : Top right, Top left, Bottom right ou Bottom left.
   • Auto hide after : de 2 à 30 secondes. La valeur par défaut est 5.
   • Success background, Error background et Text color.

   Modal style

   • Design : Classic, Card ou Dialog.
   • Button background et Button text : les couleurs du bouton OK.
   • Corner radius : de 0 à 40 px.

   Banner style

   • Auto hide : activé par défaut. Désactivez-le pour conserver la bannière jusqu’à ce que le client la ferme.
   • Design : Classic, Soft ou Floating.
   • Position : Top ou Bottom.
   • Auto hide after : de 2 à 30 secondes. La valeur par défaut est 5.
   • Success background, Error background et Text color.

5. Prévisualiser et enregistrer

   Dans Preview, choisissez un Preview template, puis cliquez sur Show success ou Show error pour voir ce style avec vos paramètres. L’aperçu utilise les mêmes modèles que votre vitrine.

   

   Cliquez sur Save.

À savoir

• Les clients ferment un Modal avec OK, le bouton ×, en cliquant en dehors de la fenêtre ou avec la touche Esc. Un modal ne se ferme jamais tout seul.
• Jusqu’à cinq toasts peuvent être affichés en même temps. Lorsqu’un sixième arrive, le plus ancien est supprimé.
• Un seul modal et une seule bannière sont affichés à la fois. Un nouveau message remplace celui qui est à l’écran.
• Lorsqu’une commande Pay later aboutit et que le message de réussite est affiché, l’application vide le panier et recharge la page. Avec Modal, la page se recharge lorsque le client ferme la fenêtre, ce qui lui laisse le temps de lire le message. Avec Toast ou Banner, elle se recharge après quelques secondes.
• Le texte des messages se modifie comme les autres textes de la vitrine. Consultez Modifier et traduire le contenu de certaines fonctionnalités de l’application.
• Vous avez besoin d’un autre affichage des notifications ? Cliquez sur Contact support dans la section Notification style et notre équipe pourra vous aider.

Note

Important : assurez-vous que l’intégration d’application est activée dans votre thème, sinon ces paramètres ne s’appliqueront pas sur votre vitrine. Consultez Activer/Désactiver l’application dans le thème.

Besoin d’aide ?

Si vous rencontrez la moindre difficulté en suivant ces étapes, n’hésitez pas à nous contacter rapidement à l’adresse e-mail [email protected].