Barre visuelle multi-paliers montrant la progression vers la livraison gratuite et d'autres recompenses.
Barre de progression livraison gratuite
La barre de progression encourage le client a augmenter son panier en montrant visuellement la distance restante vers la livraison gratuite (ou d'autres recompenses). C'est un puissant levier pour augmenter le panier moyen.
Principe
La barre de progression est un système multi-paliers. Chaque palier représente une recompense à atteindre :
| Palier | Type | Seuil | Message |
|---|---|---|---|
| 1 | Livraison | 50 EUR | "Ajoutez 15 EUR pour la livraison GRATUITE !" |
| 2 | Cadeau | 80 EUR | "Ajoutez 30 EUR pour un cadeau GRATUIT !" |
| 3 | Livraison express | 120 EUR | "Ajoutez 40 EUR pour la livraison EXPRESS !" |
Quand le client ajoute des produits, la barre se remplit progressivement et les messages changent en temps réel.
Activation
| Setting | Description | Défaut |
|---|---|---|
| Activer barre de progression | Active la barre dans le panier | Oui |
| Palette de couleurs | Couleur de fond de la barre | Background 1 |
| Message de completion | Message quand tous les paliers sont atteints | "Vous avez débloqué toutes les recompenses !" |
ℹ️La barre de progression n'apparaît que si au moins un bloc Cart Tier est configure avec un seuil supérieur a 0. Sans blocs, la barre est masquée même si le setting est active.
Configuration des paliers (Cart Tier)
Les paliers sont configurés via des blocs "Cart Tier" dans l'éditeur Shopify. Vous pouvez en ajouter autant que nécessaire.
Settings de chaque palier
| Setting | Description | Défaut |
|---|---|---|
| Type | Shipping / Gift | Shipping |
| Seuil | Montant à atteindre (en devise de la boutique) | 50 |
| Message | Texte affiché avant d'atteindre le palier | "Add $amount for FREE shipping!" |
| Message de succès | Texte affiché quand le palier est atteint | "FREE shipping unlocked!" |
| Icône | Icône à côté du message | Truck |
| Produit cadeau | Produit offert automatiquement (si type Gift) | - |
Placeholder $amount
Le texte $amount dans le message est remplacé dynamiquement par le montant restant :
Setting : "Add $amount for FREE shipping!"
Affiche : "Add 15.00 EUR for FREE shipping!"Types de palier
| Type | Description | Comportement |
|---|---|---|
| Shipping | Livraison gratuite | Affiche un message uniquement |
| Gift | Cadeau gratuit | Ajoute automatiquement le produit cadeau au panier quand le seuil est atteint |
Icônes disponibles
| Icône | Description |
|---|---|
| Truck | Camion de livraison |
| Package | Colis |
| Gift | Cadeau |
| Star | Étoile |
| None | Pas d'icône |
Exemple multi-paliers
Voici un exemple de configuration a 3 paliers :
Palier 1 - Livraison gratuite
- Type : Shipping
- Seuil : 50 EUR
- Message : "Ajoutez $amount pour la livraison GRATUITE !"
- Succès : "Livraison GRATUITE debloquee !"
- Icône : Truck
Palier 2 - Cadeau
- Type : Gift
- Seuil : 80 EUR
- Message : "Plus que $amount pour votre cadeau !"
- Succès : "Cadeau débloqué !"
- Icône : Gift
- Produit : [Echantillon gratuit]
Palier 3 - Livraison express
- Type : Shipping
- Seuil : 120 EUR
- Message : "Ajoutez $amount pour la livraison EXPRESS !"
- Succès : "Livraison EXPRESS offerte !"
- Icône : Star
Affichage
La barre de progression s'affiche :
- Dans le Cart Drawer (au-dessus des articles)
- Dans la page panier (au-dessus des articles)
Elle comprend :
- La barre visuelle avec remplissage progressif
- Les jalons (milestones) marques sur la barre
- Le message dynamique sous la barre
Comportement dynamique
- La barre se met à jour en temps réel quand le panier change
- Quand un palier Gift est atteint, le produit cadeau est automatiquement ajoute au panier
- Quand le panier descend sous le seuil, le cadeau est automatiquement retire
- Le message de completion s'affiche quand tous les paliers sont atteints
⚠️Pour les paliers de type Gift, assurez-vous que le produit cadeau est bien en stock et disponible. Si le produit est en rupture, le cadeau ne sera pas ajouté au panier même si le seuil est atteint.
Bonnes pratiques
- Commencez par un seuil accessible : votre palier 1 devrait être atteignable pour la majorité des paniers
- Espacez les paliers : laissez suffisamment d'écart entre chaque seuil (ex: 50 / 80 / 120)
- Utilisez des messages engageants : incluez des emojis et du texte en gras pour attirer l'attention
- Le palier Gift est puissant : offrir un vrai produit est plus motivant qu'un simple message
- Testez vos seuils : analysez votre panier moyen pour positionner les seuils strategiquement
Prochaines étapes
- Cart drawer — Le tiroir panier où s'affiche la barre
- Cadeau gratuit — Offrez un cadeau à partir d'un montant
- Upsells — Recommandations produits dans le panier
- Trust badges — Renforcez la confiance client