Shopify's native Buy X Get Y-korting voegt het gratis geschenk niet automatisch aan het winkelwagentje toe. Het kan een geschenk tot $0 korting bieden zodra dat geschenk in het winkelwagentje zit, en het kan zelfs door een minimale uitgaven worden geactiveerd, maar de klant moet zelf nog steeds het geschenkproduct opmerken, vinden en toevoegen. Een echte auto-add gift-with-purchase, waar het geschenk zich automatisch toont op het moment dat het winkelwagentje een bestedingsdrempel overschrijdt en verdwijnt als het winkelwagentje eronder daalt, vereist aangepaste themcode gebouwd op Shopify's Ajax Cart API of een app die het toevoegen en verwijderen voor je doet.
Deze gids legt uit waarom native gift-with-purchase tekortkoomt, waarom de handmatige stap stilzwijgend de bevordering afbreekt, hoe de DIY Ajax-wagenbenadering werkt en wat het je kost om het te onderhouden, wat je moet zoeken in een app, en het ene stuk hiervan dat je vandaag op betrouwbare manier kunt verzenden: een live winkelwagenprogressiebalk die kopers laat zien hoe dicht ze bij de beloning zijn.
Voegt Shopify automatisch een gratis geschenk toe wanneer het winkelwagentje een drempel bereikt?
Nee, niet op zichzelf. Shopify geeft je twee native bouwstenen, en geen van beide voegt automatisch een product toe.
De eerste is een minimale aankoop order-korting, die geld van de bestelling haalt zodra het winkelwagentje een bestedingsdrempel overschrijdt. Dat is geld uit, geen gratis product.
De tweede is Buy X Get Y, wat kan een bepaald product gratis maken. Sinds 2019 ondersteunt Buy X Get Y zelfs een minimale aankoopaantal als trigger, dus je kunt een bevordering bouwen die luidt: "Geef $100 uit, krijg een gratis geschenk." Volgens de Shopify-changelog voor ontwikkelaars, stelt deze optie je in staat een bestedingsbedrag in plaats van een specifieke hoeveelheid artikelen te vereisen, wat exact klinkt als gift-with-purchase.
Hier is de valkuil die bijna elke handelaar die het probeert, hindert: Buy X Get Y kortingen een geschenk dat al in het winkelwagentje zit. Het plaatst het geschenk niet in het winkelwagentje. De klant moet het geschenkproduct zelf toevoegen om de korting te activeren en de prijs op nul te zetten. Als ze het nooit toevoegen, krijgen ze de aanbieding gewoon niet, en de korting zit daar niets te doen. Die kloof, tussen "de korting bestaat" en "de klant ontvangt werkelijk het geschenk," is het hele probleem waar dit artikel over gaat.
AFBEELDINGSPLAATSHOUDER (Afbeelding 1): Native Buy X Get Y versus echte auto-add
Aanbevolen visueel: Een schoon 16:9-diagram op een witte achtergrond, twee side-by-side-flows. Linkerstroom gelabeld "Native Buy X Get Y" toont vier stappen met een rood wrijvingspictogram: winkelwagentje bereikt $100, banner verschijnt, klant moet geschenk vinden, klant moet het handmatig toevoegen. Rechterstroom gelabeld "Auto-add gift-with-purchase" toont twee stappen met een groen vinkje: winkelwagentje bereikt $100, geschenk verschijnt automatisch op $0,00. Merkkleur violet en goud, platte vector, sans-serif labels, geen fotografie.
Waarom schieten native Buy X Get Y tekort voor een gratis geschenk?
Buy X Get Y is een werkelijk nuttige korting, maar het is gebouwd om artikelen te prijzen, niet om de inhoud van een winkelwagentje te beheren. Die ontwerpmogelijkheid creëert drie praktische hiaten voor gift-with-purchase.
Het kortingt het geschenk, het voegt het geschenk niet toe
Dit is de kernlimiet. Buy X Get Y controleert het winkelwagentje, en wanneer aan de "buy"-voorwaarde wordt voldaan (een bestedingsbedrag of hoeveelheid kwalificerende producten), past het een korting toe op het "get"-product. Maar het "get"-product moet in het winkelwagentje aanwezig zijn om de korting iets te hebben waar het op kan werken. Shopify injecteert het niet. Dus de aanbieding werkt alleen voor de subset van kopers die zowel de promotie opmerken als de extra stappen ondernemen om het geschenk toe te voegen.
De klant draagt de last
Elke stap die je een koper vraagt, is een stap waar je hem kunt verliezen. Een gift-with-purchase die de klant vereist om wat ze doen te verlaten, naar de geschenkproductpagina te navigeren en deze aan het winkelwagentje toe te voegen, is om moeite op het moment dat ze het dichtst bij checkout zijn. De meeste kopers zullen het niet doen. Degenen die het geschenk geweldig hadden gevonden, zien het nooit gebeuren, en de stimulans waarvoor je betaalt, wordt niet gebruikt.
Het kan het geschenk ook niet automatisch verwijderen
Het omgekeerde geval is net zo rommelig. Zeg dat een koper wel het geschenk toevoegt, dan verwijdert een artikel en daalt onder de drempel. Met een handmatige setup kan het gratis geschenk in het winkelwagentje achterblijven. Afhankelijk van hoe de korting is geconfigureerd, keert deze stilzwijgend terug naar volledige prijs (een onplezierige verrassing bij checkout) of blijft gedisconteerd wanneer de klant niet meer kwalificeert (marge die je niet van plan was weg te geven). Een goede gift-with-purchase moet het geschenk en verwijderen in gelijke tred met het winkelwagentotaal.
Handelaren voelen dit direct. Op een veel bekeken Shopify Community-thread, vroeg een handelaar hoe hij een gratis geschenk automatisch kon toevoegen wanneer het winkelwagentje een bestedingsdrempel bereikt zonder een app van derden, en het antwoord kwam altijd op dezelfde manier terug: native Buy X Get Y bestaat, maar het voegt het geschenk niet zelf toe, dus je bent afhankelijk van aangepaste code of een app.
Waarom kan een Shopify Function het geschenk niet gewoon aan het winkelwagentje toevoegen?
Dit is de natuurlijke volgende vraag, omdat Shopify Functions de moderne, server-side manier zijn om kortingen aan te passen, en zij werken in checkout waar alles betrouwbaar is. Het eerlijke antwoord is dat de discountfunctie dingen kan prijzen maar geen producten kan toevoegen.
Een Shopify-discountfunctie retourneert discountbewerkingen die zich richten op bestaande winkelwagentjes. Volgens Shopify's Discount Function API-documentatie, past de functie een percentage of vast bedrag korting toe op producten of de bestelling, of kortingen verzending. Het leest het winkelwagentje en past prijzen aan. Nergens in dat model is "een nieuwe regelitem invoegen," omdat een discountfunctie ervoor is om merchandise die de koper koos te prijzen, niet om te veranderen wat in het winkelwagentje zit.
De andere functie die het winkelwagentje aanraakt, is de Cart Transform API. Zijn gedocumenteerde taak is het veranderen van de "prijzen en presentatie van artikelen in een winkelwagen," met gebruiksgevallen beperkt tot het uitbreiden van een bundel in haar componenten, het samenvoegen van regels in een bundel en het bijwerken van de titel, afbeelding of prijs van een regel. Het werkt op regels die al bestaan. Het is geen mechanisme voor het ergens uit het niets druppelen van een gloednieuw geschenkproduct in het winkelwagentje, en enkele van zijn bewerkingen zijn beperkt tot ontwikkelingswinkels of Shopify Plus.
De server-side toolkit is dus uitstekend in het gratis maken van een geschenk zodra het in het winkelwagentje zit en waardeloos in het daar plaatsen in de eerste plaats. Het toevoegen van een product aan een winkelwagentje gebeurt op de winkel, in het thema, daarom eindigt elke echte auto-add-oplossing met het uitvoeren van enkele JavaScript daar.
Hoe werkt de DIY Ajax Cart API-benadering?
Als je auto-add zelf zonder app wilt bouwen, is de winkelroute Shopify's Ajax Cart API. Dit is hetzelfde lichte eindpunt dat thema's gebruiken om producten aan het winkelwagentje toe te voegen zonder pagina vernieuwing.
De mechanica
De Ajax Cart API stelt een POST /{locale}/cart/add.js eindpunt bloot dat een of meer varianten aan het winkelwagentje toevoegt. Volgens de Shopify Ajax Cart API-referentie, stuur je de variant-ID en een hoeveelheid, en het artikel landt in het winkelwagentje. In de praktijk ziet een gift-with-purchase gebouwd op deze manier er als volgt uit:
- Een script in je thema luistert naar winkelwagen veranderingen.
- Wanneer het winkelwagentotaal je drempel overschrijdt, roept het script cart/add.js aan met de geschenkvariant-ID.
- Een Buy X Get Y- of productkorting (native of Functions-gebaseerd) prijst dat geschenk op $0 zodat de klant er niet voor wordt belast.
- Wanneer het winkelwagentje onder de drempel daalt, roept het script de winkelwagen-API opnieuw aan om het geschenk te verwijderen.
Je koppelt een winkelscript dat de winkelwagen inhoud beheert, met een korting die de prijs beheert. Geen van beide helften doet alleen het hele werk.
De onderhoudskosten
Dit werkt, en veel winkels voeren een bepaalde versie ervan uit, maar het is code die je voortaan in eigendom bent. Een paar dingen waar u zich van bewust moet zijn voordat u dit doorvoert:
- Het is aan thema gekoppeld. De Ajax API werkt alleen op door Shopify gehoste thema's, en je script koppelt zich aan je specifieke themawagenmerkering en -evenementen. Wissel thema's in, of neem een themaupdate die de winkellade verandert, en het script kan stilzwijgend breken.
- Je moet de randgevallen bewaken. Wat gebeurt er als de koper al het geschenkproduct als betaald artikel in hun winkelwagentje had? Wat als ze voor twee verschillende geschenken kwalificeren? Wat als ze snel hoeveelheden veranderen? Elk van deze is een tak die je moet schrijven en testen.
- Verwijdering is het moeilijke gedeelte. Een geschenk toevoegen bij een drempel is gemakkelijk. Het op betrouwbare wijze verwijderen op het moment dat het winkelwagentje onder de drempel daalt, zonder met de koper te vechten die hun winkelwagentje probeert te bewerken, is waar DIY-implementaties flakky worden.
De versnelde checkout-valkuil
Hier is de foutvolgorde die werkelijk geld kost, en het is dezelfde val die elke winkellogica-only discountlogica raakt. Versnelde checkouts zoals Shop Pay, Apple Pay en Google Pay laten de koper de winkelwagenpagina volledig overslaan en rechtstreeks naar checkout springen. Je themajavaScript werkt op dat pad niet. Een koper die op de Shop Pay-knop tikt, activeert dus nooit je add-het-geschenkscript, en de hele bevordering gebeurt stilzwijgend niet voor hen.
Dit is waarom de prijskant van een gift-with-purchase behoort in een Shopify Function (die server-side op elk checkout-pad werkt), zelfs wanneer de toevoegkant in het thema moet wonen. Houd de korting server-side en deze is identiek of de koper door de winkelwagenpagina of een versnelde checkout is gegaan. Zet de kortinglogica in themajavaScript en je krijgt één totaal in het winkelwagentje en een ander bij checkout voor je snelst converterende kopers.
AFBEELDINGSPLAATSHOUDER (Afbeelding 2): Waar het Ajax-script wel en niet werkt
Aanbevolen visueel: Een 16:9 split illustratie. Linkerpaneel gelabeld "Standaard checkout" toont een winkelwagenpagina met een groen "gift script werkt" badge en het geschenk toegevoegd op $0,00. Rechterpaneel gelabeld "Shop Pay / Apple Pay" toont een snelle checkout-knop die de winkelwagenpagina omzeilt met een rood "thema JS nooit werkt" badge en geen geschenk. Een onderschriftstrip hieronder luidt "Winkelscripts slaan versnelde checkout over. Houd prijzen server-side." Merkkleur violet en goud, platte vectorstijl, geen fotografie.
Wat moet je zoeken in een gratis geschenkapp?
Als DIY meer onderhoud lijkt dan je wilt, is een app het gebruikelijke antwoord. Niet alle gift-with-purchase-apps zijn op dezelfde manier gebouwd. Hier is wat werkelijk uitmaakt.
Auto-add en auto-remove, beide
Het toevoegen van het geschenk is tafelstakes. De echte test is of de app het geschenk automatisch verwijdert wanneer het winkelwagentje terug onder de drempel valt. Zonder automatische verwijdering krijg je winkelwagentjes die een gratis geschenk behouden waarvoor ze niet meer kwalificeren, of geschenken die stilzwijgend terugkeren naar volledige prijs en de klant verrassen. Staande op beide richtingen.
Server-side prijzen zodat winkelwagen en checkout overeenstemmen
Vraag hoe het geschenk op $0 wordt geprijsd. Als het antwoord "ons script stelt de prijs in op de winkelwagenpagina" is, hebt je het versnelde checkout-probleem ingebakken. Het betrouwbare patroon prijst het geschenk met een Shopify Function zodat de $0 op de winkelwagenpagina, de checkout-pagina en Shop Pay hetzelfde blijft. Het toevoegen kan in het thema gebeuren; de korting niet.
Het werkt met je andere aanbiedingen
Een gift-with-purchase werkt zelden alleen. Je hebt waarschijnlijk ook een verkoop, een volumestier of gratis verzending tegelijk live. Controleer of het geschenkbod schoon combineert met je andere kortingen onder Shopify's echte stapelingsregels, in plaats van deze te blokkeren of geblokkeerd. (Als discountstapeling nieuw voor je is, onze gids over hoe discountstapeling in Shopify werkt loopt door de drie discountklassen en wat combineert met wat.)
Het herschrijft je katalogus niet
Sommige apps wijzigen productprijzen om een korting te simuleren. Dat is fragiel en laat een puinhoop achter als je verwijdert. De schone aanpak is een checkout-time-aanpassing die je echte productprijzen nooit aanraakt, dus het verwijderen van de app laat je katalogus precies zoals het was.
Wat kun je vandaag op betrouwbare manier verzenden: de bestedingsdoel-progressiebalk
Hier is de eerlijke splitsing. Het auto-add-en-remove-gedeelte van gift-with-purchase is werkelijk moeilijk, omdat het afhankelijk is van winkelwagenbeheer dat Shopify's server-side tools niet kunnen doen. Maar het onderdeel dat het meeste van de conversieliften aandrijft, kopers tonen hoe dicht ze bij de beloning zijn, is volledig vandaag oplosbaar, en Stackable verzendt het nu.
Een bestedingsdoel is een order-level korting die uitbetaalt zodra het winkelwagentje een drempel overschrijdt die je instelt: geef $75 uit en krijg 10% korting, of geef $100 uit en krijg $15 korting. Stackable's functie voor bestedingsdoel is gebouwd en live, en het komt met een live winkelwagenprogressiebalk die het echte winkelwagentotaal leest en aftelt terwijl de koper artikelen toevoegt, zonder pagina vernieuwing. "Je bent $12 weg van je beloning" is de meest effectieve aanmoediging in een drempelbevordering, en het doet dezelfde psychologische werkingen of de beloning geld uit of een gratis geschenk is.
Omdat het bestedingsdoel door een Shopify Function wordt berekend, is de beloning die een koper op de winkelwagenpagina ziet, exact wat checkout aanrekent, inclusief via Shop Pay. Er is geen winkelwagen-versus-checkout-drift om te achtervolgen. En een bestedingsdoel stapt als een order-classlaag, dus het combineert schoon met een productkorting of gratis verzending op dezelfde bestelling.
Om duidelijk te zijn over wat en wat niet nu beschikbaar is: Stackable's functie voor auto-add gratis geschenk, waar het geschenkproduct zelf automatisch op een drempel verschijnt en verdwijnt, staat op de routekaart en komt binnenkort, niet iets wat je vandaag kunt inschakelen. De featurepagina voor gratis geschenken beschrijft exact hoe het zal werken wanneer het wordt verzonden. Wat je vandaag kunt uitvoeren, is de bestedingsdoelbeloning met de live progressiebalk, die het betrouwbare, checkout-veilige halve deel van het patroon is.
AFBEELDINGSPLAATSHOUDER (Afbeelding 3): Winkelwagenprogressiebalk aftellend naar de beloning
Aanbevolen visueel: Een 16:9 winkelpagina-winkellaademulatie. Een progressiebalk dichtbij de bovenkant is ongeveer 80 procent gevuld in violet, met het label "Je bent $12 weg van je beloning." Hieronder twee winkelwagentjeartikelen met prijzen. Een gouden beloningschip aan het einde van de progressiebalk leest "10% korting." Schoon modern e-commerce stijl, themaneutraal, merkaccent violet en goud, geen fotografie. Verwijzing naar de docs/schermafbeelding-manifest.md slot spend-goal-step-3 om de echte widget later vast te leggen.
Werkvoorbeeld: een geschenk dat auto-add op $75 en auto-remove hieronder
Laten we doorlopen hoe een echte auto-add gift-with-purchase zich gedraagt, zodat je precies weet hoe "goed gedaan" eruit ziet, en hoe de bestedingsdoel-progressiebalk het vandaag ondersteunt.
Een modemerk wil dat elk bestelling boven $75 automatisch een gratis draagtas bevat. Een koper bouwt deze winkelwagen:
- 1 gebreide trui op $58
- 1 muts op $22
- Subtotaal: $80
De winkel voert een gift-with-purchase uit ingesteld om te triggeren op een $75 winkelwagen subtotaal, met de draagtas als geschenk.
De twee dingen die dit moeiteloos laten voelen, zijn de twee dingen die native Buy X Get Y op zichzelf niet kan doen: de draagtas voegt zichzelf toe op het moment dat het winkelwagentje $75 bereikt, en het verwijdert zichzelf op het moment dat het winkelwagentje onder $75 daalt. De klant zoekt nooit naar het geschenk en wordt nooit belast voor iets waarvoor ze niet meer kwalificeren.
Vandaag is het progresciebalk-halve van die ervaring (de "$17 weg" aanmoediging, berekend server-side zodat het checkout overeenkomt) wat Stackable's bestedingsdoel biedt, gepaard met een geldkorting. Het automatisch toevoegen en verwijderen van het geschenkproduct zelf is het komende gratis geschenkfunctie. Eerlijkheid gezegd: je kunt het aftelding en de beloning nu uitvoeren, en het auto-add-geschenkproduct is onderweg.
Voer drempelbeloningen betrouwbaar uit met Stackable
Als je wilt dat de drempel-beloningmechanika betrouwbaar is in plaats van een themascript dat je oppast, is dat wat Stackable is gebouwd voor, binnen Shopify's echte regels.
- Bestedingsdoelen met een live winkelwagenprogresciebalk die aftelt tot de beloning terwijl de koper artikelen toevoegt, zonder pagina vernieuwing.
- De beloning wordt berekend door een Shopify Function, dus de winkelwagenpagina, de checkout-pagina en Shop Pay tonen allemaal hetzelfde totaal. Er is geen thema-versus-checkout-drift.
- Bestedingsdoelen stapelen als een order-classlaag, dus zij combineren schoon met je productkorting en gratis verzending onder Shopify's combinatieregels.
- Stackable herschrijft nooit je productprijzen. Beloningen zijn alleen checkout-aanpassingen, dus verwijderen laat je katalogus ongewijzigd.
- De functie voor auto-add gratis geschenk staat op de routekaart en wordt eerlijkheid als binnenkort gemarkeerd, dus je weet altijd wat live is en wat gepland.
Installeer Stackable gratis en laat je kopers vandaag nog aftellen naar hun cadeau, op usestackable.com/pricing. 🎁
De belangrijkste boodschap
- Shopify's native Buy X Get Y voegt het geschenk niet automatisch toe. Het kan een geschenk op $0 prijzen en kan door een bestedingsbedrag worden geactiveerd, maar de klant moet het geschenkproduct zelf toevoegen.
- De handmatige toevoegstap is waar de bevordering lekt. De meeste kopers merken het op of moeite zijn, dus de stimulans waar je voor betaalt, gaat ongebruikt.
- Server-side functies kunnen geen product aan het winkelwagentje toevoegen. Discount functies prijzen alleen bestaande regels, en Cart Transform breidt alleen, voegt alleen samen of werkt regels bij die al aanwezig zijn.
- De DIY-route is een themascript op de Ajax Cart API dat het geschenk toevoegt en verwijdert, gepaard met een korting die het prijst. Het werkt maar is thema-gekoppeld, edge-case-zwaar, en overgeslagen door versnelde checkouts.
- In een app moet je automatisch toevoegen en automatisch verwijderen, server-side prijzen zodat winkelwagen en checkout overeenstemmen, schoon stapelen met je andere aanbiedingen en geen herschrijven van katalogusprijzen.
- Wat je vandaag op betrouwbare manier kunt verzenden, is een bestedingsdoelbeloning met een live winkelwagenprogresciebalk. Stackable biedt dit nu, berekend server-side zodat het checkout overeenkomt, terwijl het auto-add gratis geschenkfunctie eerlijkheid als binnenkort is gemarkeerd.
Verwante artikelen
- Bestedingsdoelen en order-kortingen: beloon de hele bestelling op een winkelwagen-waardedrempel, met een live progresciebalk die checkout overeenkomt. Gebouwd en live vandaag.
- Auto-add een gratis geschenk met aankoop: hoe de automatische add-en-remove-geschenkfunctie zal werken. Binnenkort.
- Gratis verzendaanbiedingen: voeg gratis verzending toe als een verzending-classdrempelbeloning die stapt met je andere aanbiedingen.
- Discount stacking, gedaan rechts: hoe de drie per-classcombinateschakelaars bepalen wat je drempelbeloning kan laag met.
- Hoe discountstapeling in Shopify werkt: de drie discountklassen en waarom native alleen het hoogste toepast.
- Shopify's 100-productlimiet op Buy X Get Y: nog een native Buy X Get Y plafond en hoe je grote-catalogusbiedingen hieromheen voert.
- Stackable-prijzen: plannen, de gratis laag en wat elk omvat.
