Documentation · Affichage

Régler le message de succès affiché quand tous les paliers du panier sont atteints

La ligne de message affiche le texte du prochain palier, puis un message de succès qui liste ce que le client a débloqué une fois tous les paliers atteints.

· Version MarkdownEN · FR · ES · DE

Comment fonctionne la ligne de message

La barre a une ligne de message, au-dessus ou en dessous. Tant qu’un palier reste à atteindre, elle affiche le texte de ce palier, par exemple « Plus que 12 € pour la livraison offerte » (ce texte s’écrit dans la carte du palier, voir ajouter un palier). Une fois tous les paliers de la barre atteints, la ligne passe au message de succès. Quand le design empile les barres (voir design), chaque barre a sa propre ligne de message.

Le message de succès appartient à un design. Ouvrez Design, choisissez le design, puis l’onglet Message de succès. Chaque design peut avoir son propre message. Le même onglet se trouve aussi sur la page Paliers & Réductions.

Écrire le message

Dans la carte Message de succès par défaut, saisissez votre texte dans Message par défaut, par exemple « 🎉 Félicitations ! Vous avez débloqué {goals}. »

  • {goals} est remplacé par les noms des paliers débloqués, par exemple « la livraison offerte, un tote bag offert et 10 % de remise ».
  • Mot de lien par défaut est le mot placé avant le dernier nom (« and » par défaut) : mettez « et » pour un message en français.
  • Quand plusieurs paliers de remise sont atteints, seul le dernier de chaque type (pourcentage ou montant) est cité, puisqu’il remplace les précédents.
  • L’éditeur accepte gras, italique, couleurs et sauts de ligne. Quand le texte contient une mise en forme, les boutons gomme (Effacer la mise en forme) et </> (Modifier le HTML) passent en noir pour le rappeler.

Deux boutons d’aperçu aident à vérifier : Afficher le message du premier palier montre la barre panier vide, Afficher le message de félicitations la montre avec tous les paliers atteints.

Afficher ou masquer le message

Il y a deux cases distinctes :

  • Afficher le message de succès, en haut de l’onglet, affiche ou masque toute la ligne de message : textes des paliers et message final.
  • Afficher le message de félicitations, dans la carte Message de succès par défaut, ne masque que le message final. Les textes des paliers restent affichés tant qu’un palier reste à atteindre.

Position et style

  • Position : Avant la barre ou Après la barre.
  • Alignement du texte : Début, Centre ou Fin.
  • Taille de police, Hauteur de ligne, Couleur du texte d’en-tête, Marge supérieure et Marge inférieure.
  • Toujours afficher les décimales : cochée, le montant restant dans les textes des paliers garde ses décimales même quand il est rond (« 5,00 € restants » plutôt que « 5 € restants »).
  • Arrondir les montants à l’unité : cochée, tous les montants de la barre perdent leurs centimes et Toujours afficher les décimales est grisé. Les seuils et le montant restant sont arrondis au supérieur, le total du panier et les remises à l’inférieur ; les paliers se débloquent toujours à leur seuil exact et les assistants IA comme les lecteurs d’écran lisent les montants exacts. Voir design.

Masquer la barre quand tous les paliers sont atteints

Sous Tous les paliers atteints, cochez Masquer la barre de progression quand tous les paliers sont atteints pour n’afficher que le message de succès à ce moment-là. La barre revient si le panier repasse sous un palier. Si le message de succès est vide, la barre reste visible pour ne jamais laisser un bloc vide.

Donner à chaque barre son message de succès

En barres empilées, une ligne passe à un message de succès dès que tous les paliers de sa barre sont atteints, pendant que les autres barres continuent de compter. Par défaut, c’est le message de succès du design, où {goals} ne liste que les paliers de cette barre.

Pour écrire le message d’une barre, ouvrez Paliers & Réductions, onglet Barres, ouvrez la barre, puis remplissez Message de succès de la barre dans la carte Message de succès, par exemple « Livraison offerte débloquée ! ». Traduisez-le depuis l’icône au bout du champ. Laissé vide, c’est le message du design qui s’affiche. Des barres enchaînées sur une même ligne affichent le message de la dernière barre de la ligne. Côte à côte, ce message ne sert pas : le message du design s’affiche quand tous les paliers de toutes les barres sont atteints.

Traduire le message

Le message et le Mot de lien par défaut se traduisent depuis leurs propres champs : cliquez sur le picto de traduction au bout du champ, puis sur Traduire pour tous les marchés ou Adapter un marché. Chaque design garde ses propres traductions. Le design créé à l’installation a déjà le message dans votre langue principale, traduit dans les autres langues de votre boutique. Un design resté au message anglais par défaut, sans modification ni traduction, l’affiche dans la langue de l’acheteur, sur la boutique comme au checkout. Dès que vous modifiez le texte, il s’affiche tel que vous l’avez écrit : traduisez-le alors vous-même. Quand votre boutique a plusieurs designs, le titre de la carte Message de succès par défaut affiche le nom du design que vous modifiez.

Choisissez une langue dans le sélecteur Langue de l’aperçu pour vérifier le message traduit. Un message traduit auparavant dans l’application Shopify Translate & Adapt a été recopié dans vos designs : vous n’avez rien à refaire. Pour les autres textes de la barre, voir traductions.

Au checkout

Le bloc du checkout a sa propre case, Afficher le message de succès final, avec son propre alignement, sur la page Checkout. Au checkout, le message suit la langue du client, avec les mêmes traductions que sur la boutique. Voir checkout.

Il manque quelque chose ? Écrivez à support@yaco.studio, ou essayez d’abord dans la démo.

À lire ensuite

Prêt à l'essayer sur votre boutique ?

Installez Yaco Progress Bar, fixez votre premier palier, et la barre apparaît dans votre panier en quelques minutes. Sans développeur, sans pop-up.

Essayer gratuitementEssai gratuit de 14 jours · plan gratuit pour toujours