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

Points clés à retenir

• Shopify peut rendre un cadeau gratuit, mais il ne l’ajoutera pas au panier. Une réduction Buy X Get Y (Achetez X, Obtenez Y) ne s’applique qu’une fois que le client a ajouté le cadeau lui-même.¹
• Il existe trois façons de combler cette lacune : un message clair, du code dans le thème qui ajoute et supprime le cadeau via l’API AJAX du panier, ou une application.
• Fudge écrit le code de ce 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, et il peut préparer la réduction Buy X Get Y dans Shopify en parallèle.
• La réduction se trouve toujours dans l’admin Shopify. Le code du thème ne fait que déplacer l’article dans le panier. C’est le Buy X Get Y qui fait passer le prix à 0 $.
• Les paliers de dépenses simples fonctionnent nativement avec une réduction automatique par palier, tant que les paliers ne sont pas configurés pour se cumuler entre eux.

Un cadeau gratuit avec achat sur Shopify (free gift with purchase) ne nécessite qu’une seule réduction native à configurer, 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 de mettre le cadeau dans le panier, et les cas particuliers que les marchands demandent.

Il est prévu pour le Black Friday 2026 (du 27 au 30 novembre) mais fonctionne pour n’importe quelle promotion. Vous cherchez encore la bonne offre ? Idées de promotions du Black Friday pour les boutiques Shopify compare l’impact sur la marge d’un cadeau par rapport à d’autres mécaniques.

Pourquoi vous pouvez nous faire confiance

Nous sommes 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 développons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store et le statut Built for Shopify. Les offres de cadeaux gratuits comme celle de ce guide, logique du panier incluse, font partie des choses qu’il configure pour les boutiques.

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 : un POST vers /cart/add.js ajoute une variante, et un POST vers /cart/change.js avec une quantité de 0 supprime une ligne.⁴ Un petit script peut ajouter le cadeau lorsque les dépenses atteignent le seuil et le retirer lorsqu’elles redescendent.

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 ceci avec votre propre seuil et l’ID de la 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 votre variante de cadeau
        var THRESHOLD = 7500 // 75,00 $ - l'API Cart 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 modification 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>

Ensuite, chargez le snippet juste avant la balise body de fermeture dans layout/theme.liquid :

{% render 'free-gift' %}

Le script totalise chaque ligne à l’exception du cadeau à son prix avant réduction, reflétant la façon dont la réduction compte le minimum. Le flag giftOffered l’empêche d’ajouter le cadeau deux fois, de réajouter un cadeau que le client a supprimé, ou de réessayer un cadeau en rupture de stock.

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

Connaissez ses limites avant de le mettre en ligne :

• Il est conçu pour Dawn. subscribe et publish sont les helpers d’événements du panier de Dawn, et le tiroir du panier (cart drawer) de Dawn recharge ses lignes et son footer lorsque cet événement se déclenche.⁵ D’autres thèmes annoncent les modifications du panier différemment, ces lignes doivent donc être réécrites.
• Le compteur du panier dans le header peut avoir du retard. Le script 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 sont éligibles à votre réduction, la boucle doit les filtrer.
• 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 écrit la logique d’ajout et de suppression pour n’importe quel thème que vous utilisez. Dites à Fudge :

“Lorsque le sous-total du panier atteint 75 $, ajoute automatiquement le nettoyant format voyage gratuit au panier et affiche une ligne ‘Cadeau gratuit ajouté’ dans le tiroir du panier. Supprime-le si le panier passe en dessous de 75 $, et ne l’ajoute pas deux fois.”

Fudge écrit la logique du tiroir du panier en Liquid natif, CSS et JavaScript dans votre thème, sous forme de brouillon que vous examinez avant de publier. La réduction qui fait passer le cadeau à 0 $ reste une réduction Buy X Get Y de Shopify. Fudge peut la préparer dans Shopify en même temps que la logique du panier, règles de cumul incluses, et les deux sont mis en ligne lorsque vous publiez. Si vous préférez créer la réduction vous-même dans l’admin, Fudge n’écrit que la partie panier.

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

Les applications de cadeaux comme BOGOS: Free Gift Bundle Upsell intègrent 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. En août 2026, BOGOS proposait un forfait gratuit (30 commandes à vie) et des forfaits payants à partir de 29,99 $ par mois.

Le compromis est un abonnement mensuel plus le code de l’application sur votre vitrine, car quelque chose doit s’exécuter dans le navigateur pour ajouter l’article. Si vous utilisez déjà une application pour les upsells 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 étend, fusionne ou met à jour les lignes déjà présentes dans le panier. Aucune de ces références ne décrit une opération qui y dépose un nouvel article distinct.⁶

Les boutiques, quel que soit leur forfait, peuvent utiliser les Functions via une application publique de l’App Store ; les applications sur mesure (custom apps) qui contiennent des Functions nécessitent Shopify Plus.⁶

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

Affichez un message clair, quelle que soit la ligne que vous choisissez. La page bundles et réductions montre comment fonctionne la méthode Fudge, de la réduction au bloc du panier. Pendant que l’offre est en cours, Fudge indique la valeur des commandes et ce que le cadeau vous a coûté, par rapport aux semaines précédant son lancement.

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 sur Shopify (tiered discounts) 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 sur Shopify Plus.⁷

Les paliers de dépenses simples peuvent tout de même être assemblés à partir d’éléments natifs. Créez une réduction automatique de montant sur la commande par palier, chacune avec 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 pour les deux. Un panier éligible à deux réductions qui ne peuvent pas se cumuler 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 cumuler, 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 est la case de combinaison. Si les paliers sont autorisés à se cumuler, les deux pourcentages sont calculés sur le sous-total d’origine, de sorte que ce 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 des récompenses comme un pourcentage de réduction plus la livraison gratuite.⁷ Pour utiliser des paliers en même temps que le cadeau gratuit, cochez les réductions sur les produits pour chaque palier et les réductions sur les commandes pour la réduction Buy X Get Y, puis testez un panier à chaque limite de palier.

Notre Playbook BFCM explique où afficher les paliers sur la vitrine.

FAQ