Offrez automatiquement un produit cadeau quand le panier atteint un seuil défini, pour inciter vos clients à augmenter leur commande.
Pourquoi utiliser le cadeau gratuit
Le cadeau gratuit est l'une des stratégies les plus efficaces pour augmenter le panier moyen. Quand un client sait qu'il est à quelques euros d'obtenir un produit offert, il ajoute naturellement un article supplémentaire. Ce mécanisme psychologique, appelé "goal gradient effect", montre que les gens accélèrent leurs efforts quand ils se rapprochent d'un objectif.
Dans Scale Theme, le cadeau gratuit fonctionne en synergie avec la barre de progression. Le client voit en temps réel combien il lui reste à dépenser pour débloquer le cadeau. Quand le seuil est atteint, le produit apparaît automatiquement dans le panier avec un badge "GRATUIT", créant un moment de satisfaction immédiate.
En combinant plusieurs paliers (livraison gratuite à 50 EUR, cadeau à 80 EUR, cadeau premium à 120 EUR), vous créez un parcours d'incitation progressif qui pousse naturellement les clients à dépenser plus, tout en leur donnant l'impression de faire une bonne affaire.
Guide de configuration
Prérequis
Avant de configurer le cadeau gratuit, assurez-vous que :
- La barre de progression est activée dans les réglages du panier (
progress_bar_enabled) - Vous disposez d'un produit à offrir dans votre catalogue Shopify
- Le produit cadeau est en stock et disponible à la vente
Ajouter un palier cadeau
- Ouvrez la section Cart dans l'éditeur de thème
- Cliquez sur Ajouter un bloc
- Sélectionnez Cart Tier
- Dans le paramètre Type, choisissez Gift
- Définissez le Seuil (montant minimum du panier, ex : 80)
- Sélectionnez le Produit cadeau via le sélecteur de produit
- Personnalisez les messages avant et après déblocage
- Choisissez une icône pour le jalon sur la barre de progression
Configurer les messages
Les messages dynamiques guident le client vers l'objectif. Utilisez la variable $amount pour afficher le montant restant.
| Message | Exemple | Contexte |
|---|---|---|
| Message avant seuil | "Ajoutez $amount pour recevoir un cadeau GRATUIT !" | Affiché tant que le seuil n'est pas atteint |
| Message de succès | "Cadeau débloqué !" | Affiché quand le seuil est atteint |
Paramètres du bloc Cart Tier (type Gift)
Chaque palier cadeau est configuré via un bloc Cart Tier de type "Gift" :
| Paramètre | Type | Description | Défaut |
|---|---|---|---|
| Type | Sélecteur | Type de palier : Shipping ou Gift | Shipping |
| Threshold | Nombre | Montant minimum du panier pour débloquer le cadeau (dans la devise de la boutique) | 50 |
| Message | Richtext inline | Message affiché avant d'atteindre le seuil. Supporte $amount pour le montant restant | "Add $amount for FREE shipping!" |
| Success | Richtext inline | Message affiché quand le seuil est atteint | "FREE shipping unlocked!" |
| Icon | Sélecteur | Icône du jalon sur la barre de progression : Truck, Package, Gift, Star, None | Truck |
| Product | Sélecteur produit | Le produit à offrir gratuitement (uniquement visible quand le type est Gift) | - |
Messages complets de la barre
En plus des messages par palier, la barre de progression dispose d'un message global :
| Paramètre | Type | Description | Défaut |
|---|---|---|---|
| Complete message | Richtext inline | Message quand tous les paliers sont atteints | "You've unlocked all rewards!" |
Fonctionnement détaillé
Ajout et retrait automatiques
Le système de cadeau gratuit fonctionne de manière entièrement automatique :
- Le client ajoute des produits au panier
- La barre de progression affiche la progression vers le seuil du cadeau
- Quand le seuil est atteint : le produit cadeau est automatiquement ajouté au panier via l'API Shopify
- Si le panier redescend sous le seuil (retrait d'un article, changement de quantité) : le cadeau est automatiquement retiré
Le client n'a aucune action à effectuer : le cadeau apparaît et disparaît selon le montant du panier.
Propriétés du cadeau dans le panier
Le cadeau est ajouté au panier avec la propriété spéciale _gift_tier: true. Cette propriété est utilisée par le thème pour :
- Afficher le badge "GRATUIT" sur l'image du produit
- Remplacer le prix par un prix barré + mention "Free"
- Masquer le sélecteur de quantité (le client ne peut pas modifier la quantité)
- Masquer le bouton de suppression (le cadeau est géré automatiquement)
- Afficher la mention "Ajouté automatiquement" sous le produit
Interaction avec la barre de progression
Le cadeau gratuit s'intègre dans le système de paliers de la barre de progression :
- La barre affiche visuellement la progression vers chaque palier (shipping, gift, etc.)
- Le message dynamique indique le montant restant pour le prochain palier
- Quand le seuil est atteint, le jalon correspondant est marqué comme atteint sur la barre
- Le message de succès remplace le message de progression
- Si tous les paliers sont atteints, le message global de complétion s'affiche
Affichage dans le panier
Le cadeau apparaît comme un article du panier avec des différences visuelles claires :
| Élément | Article normal | Cadeau gratuit |
|---|---|---|
| Image | Lien vers la page produit | Lien vers la page produit + badge "FREE" |
| Prix | Prix standard du produit | Prix barré + mention "Free" |
| Quantité | Sélecteur modifiable (+/-) | Pas de sélecteur, quantité fixe |
| Suppression | Bouton poubelle | Pas de bouton (géré automatiquement) |
| Note | Aucune | Mention "Ajouté automatiquement" |
Cart drawer vs page panier
Le cadeau gratuit fonctionne de manière identique dans le cart drawer (tiroir latéral) et sur la page panier dédiée. L'affichage, les animations et le comportement automatique sont les mêmes dans les deux contextes.
Plusieurs cadeaux (paliers multiples)
Vous pouvez configurer plusieurs blocs Cart Tier de type Gift pour offrir des cadeaux progressifs à des seuils croissants :
| Palier | Seuil | Cadeau | Icône |
|---|---|---|---|
| 1 | 50 EUR | Échantillon découverte | Gift |
| 2 | 80 EUR | Mini produit | Star |
| 3 | 120 EUR | Produit taille complète | Package |
Chaque palier cadeau a son propre message et son propre jalon sur la barre de progression. Le client voit clairement les objectifs successifs et les récompenses associées.
Combiner Shipping et Gift
La stratégie la plus efficace combine des paliers de types différents :
| Palier | Type | Seuil | Effet |
|---|---|---|---|
| 1 | Shipping | 50 EUR | Livraison gratuite débloquée |
| 2 | Gift | 80 EUR | Échantillon offert |
| 3 | Gift | 120 EUR | Produit offert |
Cette combinaison crée un parcours d'incitation en 3 étapes : le client vise d'abord la livraison gratuite, puis découvre qu'il est proche du cadeau, et continue pour atteindre le cadeau premium.
Exemples de configuration
Boutique cosmétiques : échantillon offert
- Seuil : 60 EUR
- Cadeau : Mini sérum découverte (valeur 12 EUR)
- Message : "Plus que $amount pour recevoir votre sérum découverte OFFERT !"
- Succès : "Votre sérum découverte est dans le panier !"
- Icône : Gift
Pourquoi ça marche : un échantillon a une forte valeur perçue dans la cosmétique. Le client découvre un nouveau produit qu'il pourra racheter en taille complète ensuite.
Boutique alimentaire : progression en 3 étapes
- Palier 1 (Shipping, 35 EUR) : "Ajoutez $amount pour la livraison GRATUITE"
- Palier 2 (Gift, 55 EUR) : Sachet de dégustation offert — "Plus que $amount pour votre sachet découverte !"
- Palier 3 (Gift, 80 EUR) : Coffret surprise offert — "Plus que $amount pour votre coffret surprise !"
Boutique mode : accessoire offert
- Seuil : 100 EUR
- Cadeau : Tote bag de la marque (valeur 25 EUR)
- Message : "Ajoutez $amount et recevez notre tote bag exclusif !"
- Succès : "Tote bag exclusif ajouté à votre commande !"
- Icône : Star
Boutique tech : protection offerte
- Seuil : 150 EUR
- Cadeau : Protection d'écran ou housse
- Message : "Plus que $amount pour une protection OFFERTE pour votre achat !"
- Succès : "Protection offerte ajoutée !"
- Icône : Package
Cadeau gratuit dans les bundles
En plus du système de paliers du panier, Scale Theme propose un système de cadeaux intégré aux bundles via le GiftsMixin. Ce système fonctionne différemment :
| Aspect | Cadeau panier (Cart Tier) | Cadeau bundle (GiftsMixin) |
|---|---|---|
| Déclencheur | Montant total du panier | Quantité ou montant dans le bundle |
| Contexte | Cart drawer / page panier | Section bundle sur la page produit |
| Mode | Montant uniquement | Quantité ou montant |
| Variantes | Première variante du produit | Sélecteur de variante intégré |
| Barre de progression | Barre du panier avec jalons | Barre du bundle avec marqueurs |
Modes de déblocage du bundle
Le GiftsMixin supporte deux modes de déblocage :
| Mode | Description | Exemple |
|---|---|---|
| Quantity | Le cadeau se débloque selon la quantité sélectionnée | Achetez 3 articles, recevez un cadeau |
| Amount | Le cadeau se débloque selon le montant dépensé | Dépensez 100 EUR dans le bundle, recevez un cadeau |
Événements JavaScript
Le système de cadeaux des bundles émet des événements pour permettre des intégrations personnalisées :
| Événement | Contexte | Détail |
|---|---|---|
bundle:gifts-unlocked | Un ou plusieurs cadeaux débloqués/verrouillés | { count, gifts } |
bundle:gift-variant-change | Le client change la variante d'un cadeau | { giftIndex, variantId, productId } |
Aspects techniques
Gestion côté thème
Le cadeau est géré entièrement côté thème via JavaScript. Le script du panier (js-cart.js) surveille les changements de montant et ajoute/retire le produit cadeau via l'API Shopify Cart.
Garantir la gratuité au checkout
Le thème affiche le cadeau comme "gratuit" dans le panier, mais le prix réel du produit est envoyé au checkout Shopify. Pour que le cadeau soit effectivement gratuit lors du paiement, vous avez deux options :
- Produit à prix zéro : créez le produit cadeau avec un prix de 0 EUR dans Shopify
- Automatic Discount : configurez une remise automatique Shopify qui met le prix du cadeau à 0 EUR quand les conditions sont remplies
Couleur de la barre de progression
La barre de progression dispose de sa propre palette de couleurs configurable via le paramètre Progress bar color scheme. Choisissez une palette qui contraste avec le fond du panier pour une visibilité maximale.
| Paramètre | Type | Description | Défaut |
|---|---|---|---|
| Progress bar color scheme | Color scheme | Palette de la barre | background-1 |
Bonnes pratiques
- Choisissez un cadeau attractif : le cadeau doit avoir une valeur perçue suffisante pour motiver l'achat supplémentaire. Un échantillon d'une valeur affichée de 15-25 EUR est un bon point de départ.
- Assurez le stock : si le produit cadeau est en rupture de stock, le système ne pourra pas l'ajouter au panier. Surveillez régulièrement les niveaux de stock du produit cadeau.
- Positionnez le seuil stratégiquement : analysez votre panier moyen et placez le seuil 15-20 % au-dessus. Un seuil de 80 EUR pour un panier moyen de 65 EUR est idéal.
- Communiquez la valeur : le prix barré sur le cadeau montre au client ce qu'il "économise". Assurez-vous que le produit cadeau a un prix de comparaison renseigné dans Shopify.
- Limitez le nombre de paliers : 2 à 3 paliers maximum. Au-delà, la barre de progression devient confuse et l'objectif final semble inatteignable.
- Testez le parcours complet : vérifiez l'ajout automatique, le retrait quand le montant baisse, et surtout le prix au checkout.
- Choisissez des icônes parlantes : utilisez l'icône "Gift" pour les cadeaux et "Truck" pour la livraison, pour une compréhension immédiate.
- Renouvelez le cadeau régulièrement : changez le produit offert toutes les 4 à 6 semaines pour maintenir l'intérêt des clients récurrents. Un cadeau qui ne change jamais perd de son attrait.
- Mettez en avant le cadeau : mentionnez le cadeau offert dans vos campagnes email, vos réseaux sociaux et votre barre d'annonce pour que les visiteurs sachent qu'un cadeau les attend.
Prochaines étapes
- **Cart Drawer** — Configuration complète du tiroir panier latéral
- **Barre de livraison gratuite** — Configurez la barre de progression et ses paliers
- **Upsells panier** — Ajoutez des suggestions de produits dans le panier
- **Cadeaux bundle** — Système de cadeaux intégré aux bundles produit