Comment ajouter automatiquement un cadeau gratuit lorsque le panier atteint un objectif de dépense

Le discountBuy X Get Y natif de Shopify n'ajoute pas automatiquement le cadeau gratuit au panier pour vous. Il peut réduire un cadeau à 0 euro une fois que ce cadeau est dans le panier, et il peut même être déclenché par une dépense minimale, mais le client doit toujours remarquer l'offre, trouver le produit cadeau et l'ajouter lui-même. Un vrai cadeau-avec-achat automatique, où le cadeau apparaît de lui-même dès que le panier dépasse un seuil de dépense et disparaît s'il retombe sous ce seuil, nécessite soit du code personnalisé construit sur l'API Ajax Cart de Shopify, soit une application qui fait l'ajout et le retrait pour vous.

Ce guide explique pourquoi le cadeau-avec-achat natif tombe court, pourquoi l'étape d'ajout manuel tue silencieusement la promotion, comment fonctionne l'approche DIY du panier Ajax et ce qu'elle vous coûte à maintenir, quoi chercher dans une application, et la seule pièce de ce motif que vous pouvez déployer de manière fiable aujourd'hui : une barre de progression du panier en direct qui montre aux acheteurs à quel point ils sont près de la récompense.

Shopify ajoute-t-il automatiquement un cadeau gratuit lorsque le panier atteint un seuil?

Non, pas de lui-même. Shopify vous donne deux éléments de base natifs, et aucun d'eux n'ajoute automatiquement un produit.

Le premier est un discount d'achat minimum, qui soustrait de la commande une fois que le panier dépasse un seuil de dépense. C'est une réduction, pas un produit gratuit.

Le deuxième est Buy X Get Y, qui peut rendre un produit spécifique gratuit. Depuis 2019, Buy X Get Y supporte même un montant d'achat minimum comme déclencheur, vous pouvez donc créer une promotion qui se lit "Dépensez 100 euros, obtenez un cadeau gratuit." Selon le journal des modifications du développeur Shopify, cette option vous permet d'exiger un montant de dépense au lieu d'une quantité spécifique d'articles, ce qui ressemble exactement à un cadeau-avec-achat.

Voici le piège qui trompe presque tous les commerçants qui l'essaient : Les remises Buy X Get Y réduisent un cadeau qui est déjà dans le panier. Ils ne mettent pas le cadeau dans le panier. Le client doit ajouter lui-même le produit cadeau pour que la remise s'active et met à zéro son prix. S'ils ne l'ajoutent jamais, ils n'obtiennent simplement pas l'offre, et la remise reste inactive. Cet écart, entre "la remise existe" et "le client reçoit réellement le cadeau", est tout le problème que cet article traite.

IMAGE PLACEHOLDER (Image 1): Buy X Get Y natif par rapport au vrai auto-add

Visuel suggéré: Un diagramme propre 16:9 sur fond blanc, deux flux côte à côte. Le flux de gauche étiqueté "Buy X Get Y natif" montre quatre étapes avec une icône de friction rouge: le panier atteint 100 euros, une bannière apparaît, le client doit trouver le cadeau, le client doit l'ajouter manuellement. Le flux de droite étiqueté "Cadeau-avec-achat auto-add" montre deux étapes avec une coche verte: le panier atteint 100 euros, le cadeau apparaît à 0.00 euro automatiquement. Couleurs de marque violet et or, vecteur plat, étiquettes sans-serif, pas de photographie.

Pourquoi le Buy X Get Y natif tombe-t-il court pour un cadeau gratuit?

Buy X Get Y est une remise véritablement utile, mais elle a été construite pour fixer les prix des articles, pas pour gérer le contenu d'un panier. Ce choix de conception crée trois lacunes pratiques pour le cadeau-avec-achat.

Il réduit le cadeau, il n'ajoute pas le cadeau

C'est la limitation centrale. Buy X Get Y surveille le panier, et quand la condition "acheter" est remplie (un montant de dépense ou une quantité de produits qualifiants), il applique une remise au produit "cadeau". Mais le produit "cadeau" doit être présent dans le panier pour que la remise ait quelque chose à traiter. Shopify ne l'injecte pas. Donc l'offre ne fonctionne que pour le sous-ensemble d'acheteurs qui remarquent la promotion et prennent les étapes supplémentaires pour ajouter le cadeau.

Le client porte la charge

Chaque étape que vous demandez à un acheteur de franchir est une étape où vous pouvez le perdre. Un cadeau-avec-achat qui exige que le client quitte ce qu'il fait, navigue vers la page du produit cadeau et l'ajoute au panier demande un effort au moment exact où il est le plus proche de passer la commande. La plupart des acheteurs ne le feront pas. Ceux qui auraient adoré le cadeau ne le voient jamais arriver, et l'incitation que vous payez reste non rachetée.

Il ne peut pas non plus retirer le cadeau automatiquement

Le cas inverse est tout aussi désordonné. Dites qu'un acheteur ajoute le cadeau, puis retire un article et tombe sous le seuil. Avec une configuration manuelle, le cadeau gratuit peut rester dans le panier. Selon la configuration de la remise, elle revient silencieusement au prix complet (une surprise désagréable à la caisse) ou reste réduite alors que le client ne peut plus la prétendre (marge que vous n'aviez pas l'intention de donner). Un vrai cadeau-avec-achat doit ajouter et retirer le cadeau en synchronisation avec le total du panier.

Les commerçants le ressentent directement. Sur un fil de discussion très consulté de la communauté Shopify, un commerçant a demandé comment ajouter automatiquement un cadeau gratuit une fois que le panier atteint un seuil de dépense sans application tierce, et la réponse est venue de la même manière : le Buy X Get Y natif existe, mais il n'ajoutera pas le cadeau lui-même, vous êtes donc laissé avec du code personnalisé ou une application.

Pourquoi une Shopify Function ne peut-elle pas ajouter le cadeau au panier?

C'est la question naturelle suivante, parce que Shopify Functions est la façon moderne, côté serveur, de personnaliser les remises, et elles s'exécutent à l'intérieur de la caisse où tout est fiable. La réponse honnête est que la fonction de remise peut fixer les prix mais ne peut pas ajouter de produits.

Une fonction de remise Shopify retourne des opérations d'escompte ciblant des articles de panier existants. Selon la documentation de l'API Shopify Discount Function, la fonction applique un pourcentage ou un montant fixe de réduction sur les produits ou la commande, ou réduit la livraison. Elle lit le panier et ajuste les prix. Nulle part dans ce modèle se trouve "insérer un nouvel élément de ligne", parce que le travail d'une fonction de remise est de fixer les prix des marchandises que l'acheteur a choisies, pas de changer ce qui est dans le panier.

L'autre fonction qui touche au panier est l'API Cart Transform. Son travail documenté est de modifier la "tarification et la présentation des articles dans un panier", avec des cas d'usage limités à l'expansion d'un ensemble dans ses composants, la fusion de lignes dans un ensemble et la mise à jour du titre, de l'image ou du prix d'une ligne. Elle fonctionne sur les lignes qui existent déjà. Ce n'est pas un mécanisme pour insérer un tout nouveau produit cadeau dans le panier de nulle part, et certaines de ses opérations se limitent aux magasins de développement ou Shopify Plus.

Donc la boîte à outils côté serveur est excellente pour rendre un cadeau gratuit une fois qu'il est dans le panier et inutile pour le mettre là en premier lieu. Ajouter un produit au panier se fait en vitrine, dans le thème, c'est pourquoi chaque vraie solution auto-add finit par exécuter du JavaScript là-bas.

Comment fonctionne l'approche DIY Ajax Cart API?

Si vous voulez construire l'auto-add vous-même sans application, la route en vitrine est l'API Ajax Cart de Shopify. C'est le même point de terminaison léger que les thèmes utilisent pour ajouter des produits au panier sans rechargement de page.

La mécanique

L'API Ajax Cart expose un point de terminaison POST /{locale}/cart/add.js qui ajoute une ou plusieurs variantes au panier. Selon la référence de l'API Ajax Cart Shopify, vous envoyez l'ID de variante et une quantité, et l'article atterrit dans le panier. En pratique, un cadeau-avec-achat construit de cette façon ressemble à ceci:

1. Un script dans votre thème écoute les modifications du panier.
2. Quand le sous-total du panier dépasse votre seuil, le script appelle cart/add.js avec l'ID de variante du cadeau.
3. Un Buy X Get Y ou une remise produit (natif ou basé sur Functions) fige ce cadeau à 0 euro pour que le client ne soit pas facturé pour cela.
4. Quand le panier tombe sous le seuil, le script appelle l'API panier à nouveau pour retirer le cadeau.

Vous associez un script en vitrine qui gère le contenu du panier avec une remise qui gère le prix. Aucune moitié ne fait le travail entier seule.

Le coût de maintenance

Cela fonctionne, et de nombreux magasins exécutent une version de cela, mais c'est du code que vous possédez maintenant pour toujours. Quelques points à garder à l'esprit avant de vous engager:

• C'est couplé au thème. L'API Ajax fonctionne uniquement sur les thèmes hébergés par Shopify, et votre script s'accroche au balisage et aux événements du panier spécifiques à votre thème. Changez de thème, ou prenez une mise à jour de thème qui modifie le tiroir panier, et le script peut se casser silencieusement.
• Vous devez protéger les cas limites. Que se passe-t-il si l'acheteur avait déjà le produit cadeau dans son panier en tant qu'article payant? Que se passe-t-il s'il est qualifié pour deux cadeaux différents? Que se passe-t-il s'ils changent rapidement les quantités? Chacun de ceux-ci est une branche que vous devez écrire et tester.
• Le retrait est la moitié difficile. Ajouter un cadeau à un seuil est facile. Le retirer de manière fiable dès que le panier tombe sous le seuil, sans combattre le client qui essaie de modifier son panier, c'est là que les implémentations DIY deviennent instables.

Le piège des paiements accélérés

Voici le mode de défaillance qui coûte de l'argent réel, et c'est le même piège qui frappe toute logique de remise en vitrine uniquement. Les paiements accélérés comme Shop Pay, Apple Pay et Google Pay permettent à l'acheteur de contourner la page panier entièrement et de sauter directement au paiement. Votre JavaScript de thème ne s'exécute pas sur ce chemin. Donc un acheteur qui appuie sur le bouton Shop Pay ne déclenche jamais votre script d'ajout de cadeau, et toute la promotion se produit silencieusement pour eux.

C'est pourquoi le côté tarification d'un cadeau-avec-achat appartient à une Shopify Function (qui s'exécute côté serveur sur chaque chemin de caisse) même quand le côté ajout doit être dans le thème. Gardez la remise côté serveur et elle s'applique de manière identique si l'acheteur est allé à travers la page panier ou une caisse accélérée. Mettez la logique de remise dans le thème JavaScript et vous obtiendrez un total dans le panier et un différent au paiement pour vos acheteurs qui convertissent le plus vite.

IMAGE PLACEHOLDER (Image 2): Où le script Ajax s'exécute et ne s'exécute pas

Visuel suggéré: Une illustration split 16:9. Le panneau de gauche étiqueté "Paiement standard" montre une page panier avec un badge vert "le script cadeau s'exécute" et le cadeau ajouté à 0.00 euro. Le panneau de droite étiqueté "Shop Pay / Apple Pay" montre un bouton de paiement rapide contournant la page panier avec un badge rouge "le thème JS ne s'exécute jamais" et pas de cadeau. Une bande de légende en bas se lit "Les scripts en vitrine contournent le paiement accéléré. Gardez la tarification côté serveur." Couleurs de marque violet et or, style vecteur plat, pas de photographie.

Quoi chercher dans une application de cadeau gratuit?

Si DIY semble être plus de maintenance que vous le souhaitez, une application est la réponse habituelle. Pas toutes les applications de cadeau-avec-achat ne sont construites de la même manière. Voici ce qui compte vraiment.

Ajout automatique et retrait automatique, les deux

Ajouter le cadeau est table stakes. Le vrai test est si l'application retire le cadeau automatiquement quand le panier tombe sous le seuil. Sans retrait automatique, vous obtenez des paniers qui conservent un cadeau gratuit qu'ils n'ont plus droit (marge perdue) ou des cadeaux qui reviennent silencieusement au prix complet et surprennent le client. Insistez pour les deux directions.

Tarification côté serveur pour que le panier et la caisse soient d'accord

Demandez comment le cadeau est fixé à 0 euro. Si la réponse est "notre script définit le prix sur la page panier", vous avez le problème des paiements accélérés intégré. Le motif fiable fige le cadeau avec une Shopify Function pour que le 0 euro soit maintenu sur la page panier, la page de paiement et Shop Pay pareillement. L'ajout peut se faire dans le thème ; la remise ne devrait pas.

Il fonctionne avec vos autres offres

Un cadeau-avec-achat ne s'exécute rarement seul. Vous avez probablement aussi une vente, un niveau de volume ou la livraison gratuite en direct en même temps. Vérifiez que l'offre de cadeau se combine proprement avec vos autres remises selon les véritables règles d'empilement de Shopify, plutôt que de les bloquer ou d'être bloquée. (Si l'empilement de remises est nouveau pour vous, notre guide sur comment fonctionne l'empilement des remises dans Shopify parcoure les trois classes de remises et ce qui se combine avec quoi.)

Il ne réécrit pas votre catalogue

Certaines applications changent les prix des produits pour simuler une remise. C'est fragile et laisse du désordre si vous le désinstallez. L'approche propre est un ajustement au moment de la caisse qui ne touche jamais vos vrais prix de produits, donc la suppression de l'application laisse votre catalogue exactement comme il était.

Ce que vous pouvez déployer de manière fiable aujourd'hui: la barre de progression de l'objectif de dépense

Voici la division honnête. La partie ajout-et-retrait automatique du cadeau-avec-achat est véritablement difficile, parce qu'elle dépend de la manipulation du panier en vitrine que les outils côté serveur de Shopify ne peuvent pas faire. Mais la partie qui produit la plupart de la levée de conversion, montrer aux acheteurs à quel point ils sont près de la récompense, est complètement résoluble aujourd'hui, et Stackable la déploie maintenant.

Un objectif de dépense est une remise au niveau de la commande qui paie une fois que le panier dépasse un seuil que vous définissez: dépensez 75 euros et obtenez 10 pour cent de réduction, ou dépensez 100 euros et obtenez 15 euros de réduction. La fonctionnalité d'objectif de dépense de Stackable est construite et en direct, et elle est livrée avec une barre de progression du panier en direct qui lit le vrai total du panier et compte à rebours au fur et à mesure que l'acheteur ajoute des articles, sans rechargement de page. "Vous êtes à 12 euros de votre récompense" est le nudge le plus efficace d'une promotion par seuil, et il fait le même travail psychologique si la récompense est une réduction ou un cadeau gratuit.

Parce que l'objectif de dépense est calculé par une Shopify Function, la récompense qu'un acheteur voit sur la page panier est exactement ce que la caisse facture, y compris via Shop Pay. Il n'y a pas de dérive panier-versus-caisse à chasser. Et un objectif de dépense s'empile en tant que couche de classe commande, donc il se combine proprement avec une remise produit ou la livraison gratuite sur la même commande.

Pour être clair sur ce qui est et n'est pas disponible maintenant: la fonctionnalité cadeau gratuit auto-add de Stackable, où le produit cadeau lui-même apparaît et disparaît automatiquement à un seuil, est en développement et arrive bientôt, pas quelque chose que vous pouvez activer aujourd'hui. La page de fonctionnalité de cadeau gratuit décrit exactement comment elle fonctionnera quand elle se livrera. Ce que vous pouvez exécuter aujourd'hui est la récompense objectif de dépense avec la barre de progression en direct, qui est la moitié fiable, safe à la caisse du motif.

IMAGE PLACEHOLDER (Image 3): Barre de progression du panier compte à rebours vers la récompense

Visuel suggéré: Un mock-up de tiroir panier en vitrine 16:9. Une barre de progression près du haut est remplie à environ 80 pour cent en violet, avec l'étiquette "Vous êtes à 12 euros de votre récompense." Ci-dessous, deux articles de panier avec prix. Une puce de récompense dorée à la fin de la barre de progression se lit "10 pour cent de réduction." Style e-commerce moderne et propre, thème-neutre, violet et or accentués de marque, pas de photographie. Voir la fiche de manifeste de capture d'écran docs/ pour capturer plus tard le widget réel de l'emplacement spend-goal-step-3.

Exemple travaillé: un cadeau qui s'auto-ajoute à 75 euros et s'auto-retire dessous

Parcourons comment un vrai cadeau-avec-achat auto-add se comporte, pour que vous sachiez exactement comment "fait correctement" ressemble, et comment la barre de progression de dépense supporte maintenant.

Une marque de mode veut chaque commande de plus de 75 euros pour inclure un sac fourre-tout gratuit, ajouté automatiquement. Un acheteur construit ce panier:

• 1 pull à mailles à 58 euros
• 1 bonnet à 22 euros
• Sous-total: 80 euros

Le magasin exécute un cadeau-avec-achat défini pour déclencher à un sous-total de panier de 75 euros, avec le fourre-tout comme cadeau.

Les deux choses qui rendent cela sans effort sont les deux choses que le Buy X Get Y natif ne peut pas faire seul: le fourre-tout s'ajoute lui-même au moment où le panier atteint 75 euros, et il se retire lui-même au moment où le panier tombe sous 75 euros. Le client ne chasse jamais le cadeau et ne se fait jamais facturer pour un qu'il n'a plus droit.

Aujourd'hui, la moitié barre de progression de cette expérience (le nudge "17 euros loin", calculé côté serveur pour qu'il corresponde à la caisse) est ce que l'objectif de dépense de Stackable livre, associé à une récompense en argent. L'ajout-et-retrait automatique du produit cadeau lui-même est la capacité de cadeau gratuit à venir. Dit honnêtement: vous pouvez exécuter le compte à rebours et la récompense maintenant, et le produit cadeau auto-ajout est en route.

Récompenses de seuil fiables d'exécution avec Stackable

Si vous voulez que la mécanique de récompense de seuil soit fiable plutôt qu'un script de thème que vous gardez, c'est ce que Stackable est construit pour, selon les véritables règles de Shopify.

• Objectifs de dépense avec un barre de progression du panier en direct qui compte à rebours vers la récompense au fur et à mesure que l'acheteur ajoute des articles, sans rechargement de page.
• La récompense est calculée par un Shopify Function, donc la page panier, la page de paiement et Shop Pay affichent tous le même total. Il n'y a pas de dérive thème-versus-caisse.
• Objectifs de dépense s'empilent en tant que couche de classe commande, ils se combinent donc proprement avec vos remises produit et livraison gratuite selon les règles de combinaison de Shopify.
• Stackable ne réécrit jamais vos prix de produits. Les récompenses sont des ajustements de caisse uniquement, donc la désinstallation laisse votre catalogue intact.
• La fonctionnalité cadeau gratuit auto-add est en développement et honnêtement marquée comme à venir, vous savez toujours ce qui est en direct et ce qui est planifié.

Installez Stackable gratuitement et affichez dès aujourd'hui un compte à rebours vers le cadeau devant vos acheteurs, sur usestackable.com/pricing. 🎁

L'essentiel

• Le Buy X Get Y natif de Shopify n'ajoute pas automatiquement le cadeau. Il peut fixer un cadeau à 0 euro et peut être déclenché par un montant de dépense, mais le client doit ajouter lui-même le produit cadeau.
• L'étape d'ajout manuel est là où la promotion fuit. La plupart des acheteurs ne remarquent jamais ou ne s'ennuient, donc l'incitation que vous payez reste non rachetée.
• Les fonctions côté serveur ne peuvent pas ajouter un produit au panier. Les fonctions de remise ne font que fixer les prix des lignes existantes, et Cart Transform n'élargit, fusionne ou met à jour que les lignes qui sont déjà là.
• La route DIY est un script de thème sur l'API Ajax Cart qui ajoute et retire le cadeau, associé à une remise qui le fixe. Cela fonctionne mais est couplé au thème, lourd de cas limites, et ignoré par les paiements accélérés.
• Dans une application, insistez pour l'ajout automatique et le retrait automatique, la tarification côté serveur pour que le panier et la caisse soient d'accord, l'empilement propre avec vos autres offres, et pas de réécriture des prix du catalogue.
• Ce que vous pouvez déployer de manière fiable aujourd'hui est une récompense objectif de dépense avec une barre de progression du panier en direct. Stackable livre cela maintenant, calculée côté serveur pour qu'elle corresponde à la caisse, tandis que la fonctionnalité de cadeau gratuit auto-add est honnêtement marquée comme à venir.

Articles connexes

• Objectifs de dépense et remises de commande: récompensez la commande entière à un seuil de valeur panier, avec une barre de progression en direct qui correspond à la caisse. Construit et en direct aujourd'hui.
• Ajouter automatiquement un cadeau gratuit avec achat: comment fonctionne la fonctionnalité de cadeau automatique d'ajout et retrait. À venir.
• Offres de livraison gratuite: ajoutez la livraison gratuite comme une récompense de seuil de classe d'expédition qui s'empile avec vos autres offres.
• Empilement de remise, bien fait: comment les trois commutateurs de combinaison par classe décident ce que votre récompense de seuil peut superposer.
• Comment fonctionne l'empilement des remises dans Shopify: les trois classes de remise et pourquoi native n'applique que la plus élevée.
• Limite de produit Shopify 100 sur Buy X Get Y: un autre plafond Buy X Get Y natif et comment exécuter de grandes offres de catalogue autour de lui.
• Tarification Stackable: plans, le niveau gratuit et ce que chacun inclut.