Comment ajouter un cadeau gratuit avec achat sur Shopify (avec ajout auto au panier)

Points clés

• Shopify peut rendre un cadeau gratuit, mais il ne l’ajoutera pas au panier. Une réduction Achetez X, obtenez Y ne s’applique qu’une fois que le client a ajouté le cadeau lui-même.¹
• Il y a trois façons de combler ce manque : un message clair, du code de thème qui ajoute et retire le cadeau via l’API AJAX du panier, ou une application.
• Fudge écrit ce code de thème à partir d’un prompt. Vous décrivez la règle du cadeau et il ajoute la logique d’ajout et de suppression à votre panier sous forme de code de thème natif.
• La réduction se trouve toujours dans l’admin Shopify. Le code de thème ne fait que placer l’article dans le panier. Achetez X, obtenez Y est ce qui ramène son prix à 0 $.
• Les paliers de dépenses simples fonctionnent nativement avec une réduction automatique par palier, à condition que les paliers ne soient pas configurés pour se combiner entre eux.

Un cadeau gratuit avec achat sur Shopify nécessite de configurer une seule réduction native, et présente une lacune qui ne fait souvent surface qu’après le lancement : Shopify rend le cadeau gratuit, mais le client doit l’ajouter lui-même au panier. Ce guide couvre la configuration native, trois façons d’obtenir le cadeau dans le panier, et les cas particuliers sur lesquels les marchands s’interrogent.

Il arrive à point nommé pour le Black Friday 2026 (du 27 au 30 novembre) mais fonctionne pour n’importe quelle promotion. Vous n’avez pas encore choisi votre offre ? Idées de promotions du Black Friday pour les boutiques Shopify compare un cadeau avec d’autres mécaniques sur la marge.

Pourquoi vous pouvez nous faire confiance

Nous évoluons dans l’écosystème Shopify depuis plus de quatre ans et avons travaillé avec des centaines de marques Shopify sur leurs boutiques. Jacques a plus de 15 ans d’expérience en développement. Nous créons Fudge, un éditeur de boutique avec IA noté 4.9 sur le Shopify App Store et doté du statut “Built for Shopify”. La logique du tiroir du panier, comme le code pour le cadeau dans ce guide, est exactement le type de travail sur les thèmes qu’il est capable d’écrire.

Comment fonctionne un cadeau gratuit avec achat nativement dans Shopify ?

Shopify n’a pas de type de réduction appelé « cadeau gratuit ». La méthode native est une réduction Achetez X, obtenez Y avec un déclencheur de dépense ou de quantité, et une récompense définie sur gratuit.¹

Créez-la en tant que réduction automatique Shopify et il n’y aura aucun code à saisir pour le client. Les réductions automatiques s’appliquent dans le panier et au moment du paiement lorsque les conditions sont remplies.²

Comment configurer la réduction Achetez X, obtenez Y

1. Dans votre admin Shopify, allez dans Réductions et cliquez sur Créer une réduction.
2. Choisissez Achetez X, obtenez Y, puis sous Méthode sélectionnez Réduction automatique et entrez un titre. Dawn affiche le titre de la réduction à côté de la ligne réduite dans le panier, alors rédigez-le pour les clients.
3. Sous Le client achète, choisissez Montant d’achat minimum (par exemple 75 $) ou Quantité minimum d’articles, puis sélectionnez les produits ou collections qui comptent pour y parvenir.
4. Sous Le client obtient, réglez la quantité sur 1, sélectionnez le produit cadeau ou une collection de cadeaux, et sous À une valeur réduite choisissez Gratuit.
5. Cochez Définir le nombre maximum d’utilisations par commande et entrez 1, pour que la promotion s’applique une seule fois par commande.
6. Configurez les Combinaisons et les dates actives, puis cliquez sur Enregistrer.

Le montant d’achat minimum ne prend en compte que les prix des produits. L’expédition et les taxes sont exclues, et les produits comptent au prix fort, avant toute autre réduction.¹

Parce que vous choisissez quels produits comptent, gardez le cadeau lui-même en dehors de cette sélection afin que son propre prix ne puisse pas aider un panier à se qualifier. Pour savoir où définir le montant, consultez notre guide sur la configuration d’un seuil de livraison gratuite - la même logique s’applique.

Quelles sont les limites ?

• 25 réductions automatiques actives par boutique, en comptant les réductions d’un montant fixe, Achetez X, obtenez Y, la livraison gratuite et les réductions automatiques basées sur des applications.²
• Les combinaisons sont optionnelles. Achetez X, obtenez Y est une réduction sur un produit. Elle ne s’applique aux côtés d’une réduction sur la commande ou d’une réduction de livraison gratuite que si les cases Combinaisons correspondantes sont cochées sur les deux.³
• Les produits inclus dans une réduction Achetez X, obtenez Y ne peuvent pas bénéficier d’une deuxième réduction sur le produit pour les forfaits inférieurs à Shopify Plus.³ Une promotion sur tout le site créée en tant que réduction de produit entrera en compétition avec le cadeau au lieu de s’y cumuler.
• Lorsque les réductions ne peuvent pas se combiner, Shopify applique celle qui est la plus avantageuse pour le panier du client.³ Un code de réduction peut l’emporter et laisser le cadeau à plein prix, alors testez un panier avec toutes les réductions que vous prévoyez d’activer.

Pourquoi Shopify n’ajoute-t-il pas automatiquement le cadeau gratuit au panier ?

Parce qu’une réduction modifie les prix, pas le contenu du panier. La page d’aide de Shopify est directe à ce sujet : « L’article gratuit ou à prix réduit à “obtenir” n’est jamais automatiquement ajouté au panier. »¹

Un acheteur qui dépense 80 $ et passe directement à la caisse n’obtient aucun cadeau, aucune erreur et aucune indication qu’une offre était disponible. Il y a trois façons de combler ce manque.

Méthode 1 : L’indiquer clairement au client (sans code)

La solution la moins chère, c’est le texte. Indiquez ce qu’est le cadeau, quel est le seuil, et précisez qu’il doit être ajouté - sur la page produit, dans le panier et dans la barre d’annonces - avec un lien direct vers le produit offert.

Le point faible est évident : certains acheteurs ne le liront pas. Un message qui réagit au panier est plus difficile à rater qu’une ligne statique. Cela fonctionne comme une barre de livraison gratuite qui se met à jour avec le panier : elle lit le total du panier, le compare au seuil et affiche la différence.

La méthode Fudge. Fudge écrit ce message dans le tiroir de votre panier et sur la page produit sous forme de code de thème natif. Dites à Fudge :

“Ajoute un message de progression pour le cadeau dans le tiroir du panier et sur la page produit. En dessous de 75 $, il dit ‘Il vous manque 12 $ pour obtenir un nettoyant format voyage gratuit’ en utilisant le montant restant réel. À 75 $ ou plus, il affiche le nettoyant avec un bouton ‘Ajouter mon cadeau gratuit’.”

Vous obtenez un brouillon à prévisualiser et à réviser avant publication. La réduction Achetez X, obtenez Y se charge toujours de l’aspect promotionnel.

Méthode 2 : Ajouter le cadeau avec le code du thème

L’API AJAX du panier de Shopify permet au JavaScript du thème de modifier le panier : une requête POST vers /cart/add.js ajoute une variante, et un POST vers /cart/change.js avec une quantité de 0 supprime une ligne.⁴ Un court script peut ajouter le cadeau lorsque la dépense atteint le seuil et le retirer lorsque la dépense redescend en dessous.

Dupliquez d’abord votre thème. Ensuite, allez dans Boutique en ligne → Thèmes → ⋯ → Modifier le code, créez snippets/free-gift.liquid et collez-y ceci avec votre propre seuil et ID de variante. L’ID est le numéro après /variants/ dans l’URL de l’admin lorsque vous ouvrez la variante ; pour un produit sans variantes, ajoutez .json à l’URL de l’admin du produit et lisez l’ID de la variante à cet endroit.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        var GIFT_VARIANT_ID = 41234567890123 // l'ID de la variante de votre cadeau
        var THRESHOLD = 7500 // 75,00 $ - l'API du panier fonctionne en centimes
        var root = window.Shopify.routes.root
        var busy = false

        function post(path, body) {
            return fetch(root + path, {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify(body),
            })
        }

        function syncGift() {
            if (busy) return
            busy = true
            fetch(root + 'cart.js')
                .then(function (response) {
                    return response.json()
                })
                .then(function (cart) {
                    var gift = null
                    var spend = 0
                    cart.items.forEach(function (item) {
                        if (item.variant_id === GIFT_VARIANT_ID) gift = item
                        else spend += item.original_line_price
                    })
                    var offered = sessionStorage.getItem('giftOffered') === '1'
                    if (gift) sessionStorage.setItem('giftOffered', '1')

                    if (spend >= THRESHOLD && !gift && !offered) {
                        sessionStorage.setItem('giftOffered', '1')
                        return post('cart/add.js', {
                            items: [{id: GIFT_VARIANT_ID, quantity: 1}],
                        })
                    }
                    if (spend < THRESHOLD) {
                        sessionStorage.removeItem('giftOffered')
                        if (gift) return post('cart/change.js', {id: gift.key, quantity: 0})
                    }
                })
                .then(function (response) {
                    // Dawn : demande au tiroir du panier ou à la page du panier de se recharger
                    if (response && response.ok && window.publish) {
                        publish(PUB_SUB_EVENTS.cartUpdate, {source: 'free-gift'})
                    }
                })
                .catch(function (error) {
                    console.error(error)
                })
                .finally(function () {
                    busy = false
                })
        }

        // Dawn annonce chaque changement du panier sur cet événement
        if (window.subscribe) {
            subscribe(PUB_SUB_EVENTS.cartUpdate, function (event) {
                if (event && event.source === 'free-gift') return
                syncGift()
            })
        }
        syncGift()
    })
</script>

Chargez ensuite le snippet juste avant la balise de fermeture body dans layout/theme.liquid :

{% render 'free-gift' %}

Le script totalise chaque ligne à l’exception du cadeau à son prix avant réduction, ce qui reflète la façon dont la réduction comptabilise le minimum. L’indicateur giftOffered l’empêche d’ajouter le cadeau deux fois, de rajouter un cadeau que le client a retiré, ou de réessayer d’ajouter un cadeau en rupture de stock.

Le script ne fait que déplacer l’article. C’est toujours la réduction Achetez X, obtenez Y qui le rend gratuit, donc les deux seuils doivent correspondre. Si le chiffre du script est inférieur, les clients trouveront un article à plein prix dans leur panier.

Connaissez ses limites avant de le mettre en ligne :

• Il est conçu pour Dawn. subscribe et publish sont les assistants d’événements de panier de Dawn, et le tiroir de panier de Dawn recharge ses lignes et son pied de page lorsque cet événement se déclenche.⁵ D’autres thèmes annoncent les changements de panier différemment, ces lignes doivent donc être réécrites.
• Le compteur du panier dans l’en-tête peut être décalé. Le gestionnaire de Dawn rafraîchit le tiroir, pas l’icône du panier.
• Il compte chaque ligne qui n’est pas un cadeau. Si seuls certains produits se qualifient pour votre réduction, la boucle doit filtrer pour ne cibler que ceux-là.
• Il suppose qu’il n’y a qu’une seule devise. Si vous vendez dans plusieurs devises, testez le cadeau sur chaque marché.

La méthode Fudge. Fudge s’occupe de cela pour vous : il écrit la logique d’ajout et de suppression pour le panier de votre thème, il n’y a donc rien à coder à la main et aucun ajustement par thème. Dites à Fudge :

“Quand le sous-total du panier atteint 75 $, ajoute automatiquement le nettoyant format voyage gratuit au panier et affiche la ligne ‘Cadeau gratuit ajouté’ dans le tiroir du panier. Retire-le si le panier passe sous la barre des 75 $, et ne l’ajoute pas deux fois.”

Fudge écrit la logique du tiroir du panier en tant que code Liquid, CSS et JavaScript natif dans votre thème, sous la forme d’un brouillon que vous révisez avant publication. La réduction qui fait passer le cadeau à 0 $ est toujours la réduction Achetez X, obtenez Y que vous créez dans l’admin Shopify - Fudge ne crée ni ne configure de réductions.

Méthode 3 : Utiliser une application ou une Shopify Function

Les applications de cadeaux encapsulent la Méthode 2 derrière un écran de paramètres : vous choisissez le cadeau et le seuil, et l’application ajoute l’article au panier. Vérifiez la fiche de l’App Store pour connaître les forfaits actuels.

La contrepartie est un abonnement mensuel et du code d’application sur votre boutique, car quelque chose doit s’exécuter dans le navigateur pour ajouter l’article. Si vous utilisez déjà une application pour les ventes incitatives dans le panier, vérifiez si elle gère les cadeaux avant d’en ajouter une autre.

Les Shopify Functions sont moins adaptées qu’elles n’en ont l’air. Les Discount Functions décident du coût des lignes du panier, et l’API Cart Transform développe, fusionne ou met à jour les lignes déjà dans le panier. Aucune de ces références ne décrit une opération consistant à y déposer un nouvel article distinct.⁶

Les boutiques de n’importe quel forfait peuvent utiliser les Functions via une application publique de l’App Store ; les applications personnalisées contenant des Functions nécessitent Shopify Plus.⁶

Quelle méthode de cadeau gratuit avec achat devriez-vous utiliser ?

Mettez en place la communication (le message) quelle que soit la méthode choisie. La page de l’éditeur de boutique Shopify montre comment fonctionne la méthode Fudge.

Quels cas particuliers faut-il prévoir ?

Que se passe-t-il quand le cadeau est en rupture de stock ?

Activez Suivre la quantité pour la variante du cadeau et laissez la case Continuer à vendre en cas de rupture de stock décochée. À zéro stock, les clients ne peuvent plus l’acheter, la demande d’ajout de la Méthode 2 est rejetée avec une erreur 422, et les commandes sont validées sans cadeau.⁴

Votre message ne se met pas à jour tout seul, alors retirez la bannière lorsque le cadeau est épuisé, ou pointez Le client obtient vers une collection de cadeaux afin qu’un deuxième article puisse prendre le relais.

Et si le panier passe en dessous du seuil ?

La réduction cesse de s’appliquer. Le cadeau ne quitte pas le panier de lui-même - il y reste au prix fort. Le script de la Méthode 2 le supprime ; avec la Méthode 1, le message du panier doit indiquer que le cadeau n’est plus gratuit.

Et si le client retire le cadeau ?

Laissez-le faire. Le script ci-dessus ajoute le cadeau une fois, et ne le réajoute pas tant que le panier n’est pas redescendu en dessous du seuil pour remonter ensuite.

Les clients peuvent-ils choisir leur cadeau ?

Oui. Le client obtient accepte une collection, n’importe quel article de cette collection peut donc être celui qui est gratuit. L’ajout automatique ne peut pas deviner une teinte ou une taille, un choix nécessite donc un sélecteur. Si le cadeau fait vraiment partie d’un ensemble, comparez les bundles natifs Shopify aux applications de bundles.

La méthode Fudge. Dites à Fudge :

“Quand le panier atteint 75 $, affiche un bloc ‘Choisissez votre cadeau gratuit’ dans le tiroir du panier avec les trois produits de ma collection Cadeaux gratuits. Laisse le client en choisir un, l’ajouter au panier, et lui permettre de l’échanger contre un autre.”

Le résultat est un bloc de thème natif en brouillon. Réglez Le client obtient de la réduction sur la même collection.

Comment empêcher que le cadeau soit acheté seul gratuitement ?

Donnez un vrai prix au produit cadeau. La réduction ne le fait passer à 0 $ que lorsque le minimum est atteint, il se vend donc seul au prix normal. Un produit dont le prix est fixé à 0 $ peut être ajouté par n’importe qui.

Que se passe-t-il lorsque l’article éligible est retourné ?

Les pages sur les réductions que nous avons vérifiées ne décrivent aucune récupération automatique du cadeau, traitez-le donc comme une décision liée à vos conditions générales. Précisez dans votre politique de retour si le cadeau doit être renvoyé ou si sa valeur est déduite du remboursement.

Comment le cadeau apparaît-il sur la commande ?

Comme un article de ligne normal avec son propre SKU, remisé à 0 $. Un vrai produit avec un suivi d’inventaire arrive au stade de la préparation et de l’emballage comme n’importe quel autre article.

Dépensez plus, économisez plus : quid des réductions par paliers ?

Les réductions par paliers Shopify n’ont pas de type de réduction dédié. La page d’aide de Shopify renvoie les marchands qui ont besoin de réductions par paliers avancées vers l’App Store, ou vers Checkout Blocks pour Shopify Plus.⁷

Les paliers de dépenses simples peuvent toujours être assemblés à partir d’éléments natifs. Créez une réduction de commande automatique d’un montant fixe par palier, chacun ayant son propre montant d’achat minimum :

• Palier 1 : 10 % de réduction, achat minimum de 100 $
• Palier 2 : 20 % de réduction, achat minimum de 200 $

Sous Combinaisons, laissez les réductions sur les commandes décochées sur les deux. Un panier éligible à deux réductions qui ne peuvent pas se combiner obtient celle qui est la plus avantageuse pour le client.³

Exemple pratique. Un panier de 230 $ est éligible aux deux paliers. Ils ne peuvent pas se combiner, c’est donc le palier de 20 % qui s’applique : 46 $ de réduction, 184 $ à payer. Un panier de 150 $ n’atteint que le premier palier : 15 $ de réduction, 135 $ à payer.

Le piège réside dans la case des combinaisons. Si les paliers sont autorisés à se combiner, les deux pourcentages sont calculés sur le sous-total d’origine, de sorte que le panier de 230 $ obtient 30 % de réduction et paie 161 $.³

Chaque palier utilise l’un de vos 25 emplacements de réductions automatiques.

Ce qui nécessite encore une application ou une Discount Function : les paliers gérés comme une seule réduction, et une réduction qui mélange les récompenses comme un pourcentage de réduction plus la livraison gratuite.⁷ Pour faire fonctionner les paliers en même temps que le cadeau gratuit, cochez les réductions de produits sur chaque palier et les réductions de commande sur la réduction Achetez X, obtenez Y, puis testez un panier à chaque limite de palier.

Notre guide BFCM explique où afficher les paliers sur la boutique.

FAQ