Barre d’objectif du panier

La Cart Goal Bar transforme une offre dépensez plus, économisez plus en une ligne et une barre : combien dépenser de plus, ce que cela débloque et une marque pour chaque palier du parcours. Elle se remplit à mesure que le panier du client grossit.

Configuration

1. Activez Show on storefront dans la réduction dépensez plus, économisez plus.

   Ouvrez la réduction dépensez plus, économisez plus et activez Show on storefront. Ce réglage est activé sur une nouvelle réduction.

2. Cliquez sur Add à côté de Cart Goal Bar.

   Dans le panneau Add to your theme de cette carte, la ligne Cart Goal Bar indique “Shows progress toward the next tier in the cart”. Son bouton Add ouvre votre éditeur de thème avec le bloc prêt à être placé.

   

3. Placez le bloc dans l’éditeur de thème et enregistrez.

   Mettez le bloc là où les clients doivent voir leur progression, puis cliquez sur Save.

4. Définissez les couleurs et les textes de la barre.

   Tout ce qui suit est un paramètre de l’éditeur de thème sur le bloc.

Paramètres

Bar

• Track color — la partie non remplie de la barre. Par défaut #e5e5e5.
• Fill color — la partie remplie. Par défaut #1a1a1a.
• Unlocked color — utilisée une fois le palier le plus haut atteint. Par défaut #2e7d32.
• Text color — la ligne au-dessus de la barre.
• Bar height — 4–32 px. Par défaut 10.
• Roundness — 0–24 px. Par défaut 8.
• Show amounts under the bar — désactivé par défaut. Affiche le montant dépensé et le seuil suivant.

Wording

• Goal text — par défaut Spend {amount} more to get {percent} off. {amount} et {percent} sont remplacés automatiquement.
• Unlocked text — par défaut You’ve unlocked {percent} off!
• Tier mark colour — par défaut #ffffff. Pour les marques pas encore atteintes ; une marque atteinte prend la couleur de déblocage.
• Tier mark shape — Circle (par défaut) ou Square.
• Tier mark size — 6–28 px. Par défaut 14.
• Show tier amounts under the bar — désactivé par défaut, parce que les étiquettes peuvent se chevaucher sur les écrans étroits.
• Tier reached text — par défaut You've got {current} off. Spend {amount} more to get {percent} off. Affiché une fois qu’un palier est atteint et qu’il en reste un autre ; {current}, {amount} et {percent} sont remplacés automatiquement.
• Code hint prefix — par défaut “Use code”. Affiché uniquement pour les réductions par code.
• Static text — par défaut Spend {amount} to get {percent} off. Utilisé quand la progression ne peut pas être mesurée.
• Static text with excluded items — par défaut Spend {amount} to get {percent} off eligible items. Utilisé à la place du texte statique quand la réduction exclut certains articles.

Exemples

Une barre discrète aux couleurs de votre marque

Fill color: #1a1a1a
Unlocked color: #2e7d32
Bar height: 10
Roundness: 8
Show amounts under the bar: off

Une barre voyante qui nomme chaque palier

Bar height: 16
Tier mark shape: Square
Tier mark size: 18
Show tier amounts under the bar: on
Goal text: Only {amount} more for {percent} off

Comment le client le voit

Tant que l’application peut mesurer le panier, la ligne décompte — “Spend $20 more to get 15% off” — et la barre se remplit vers la marque suivante. Une fois qu’un palier est atteint et qu’il en reste un autre, la ligne passe au Tier reached text ; au palier le plus haut, elle passe au Unlocked text et la barre prend la couleur de déblocage. Des marques sont dessinées pour jusqu’à 6 paliers.

Quand la progression ne peut pas être mesurée, le bloc énonce l’offre avec le Static text à la place — jamais une promesse de progression qu’il ne peut pas tenir. La réduction elle-même n’est affectée dans aucun des deux cas : Shopify vérifie le panier et l’applique quand le panier est éligible.

Pour une réduction par code, le Code hint prefix est affiché pour que le client sache qu’un code est nécessaire.

Limites et remarques

• Les marques de palier sont dessinées pour 6 paliers au maximum. Au-delà, la barre se remplit toujours et les textes décomptent toujours ; seules les marques disparaissent.
• Bar height 4–32 px · Roundness 0–24 px · Tier mark size 6–28 px.
• Les conditions et les exclusions peuvent désactiver la progression en direct. Quand les règles de l’offre font que l’application ne peut pas mesurer la partie éligible du panier, le bloc se rabat sur le texte statique. La carte Show on storefront de la réduction indique quel cas s’applique.
• Mettre l’offre en pause masque la barre, et la carte le dit plutôt que de laisser un interrupteur qui a l’air actif.
• Aucun app embed (intégration de l’application) n’est nécessaire. Le bloc s’affiche de lui-même.

Pages associées

• Dépensez plus, économisez plus — la réduction derrière la barre.
• Widgets de la boutique en ligne — les trois autres blocs de thème.
• App embed — nécessaire pour les Sale Badges et les Price Drops, pas pour les blocs.