Free gift automatically added to cart drawer or checkout

Technical Q&A
,

Topic summary

A developer seeks to automatically add a free gift to the cart when customers reach a spending threshold, without using apps.

Current Status:

  • Successfully implemented JavaScript solution for standard cart page
  • Solution checks cart total against threshold and adds/removes gift variant accordingly
  • Uses jQuery AJAX to update cart with specific variant ID

Challenge:

  • Cannot get the same functionality working with cart drawer
  • Uncertain if checkout extensibility supports auto-adding free gifts (only sees upsell options)

Proposed Solution:
Another user suggests locating the cart drawer code in the theme and adding the JavaScript there, noting that some code modifications may be needed depending on the specific theme structure.

Status: Discussion remains open with implementation guidance provided but not yet confirmed as resolved.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I’m looking for a solution to automatically add a free gift when a customer spends a certain amount.

It needs to be without an app. I have written the js etc. to add it to a cart page automatically, but have not been able to get this to work with the cart drawer.

It would also be fine to auto add it to checkout but I’m not sure if this is possible with checkout extensibility. I only see a way to do an upsell not a free gift.

Here is what I have that works for the cart page.

{% assign free_gift_threshold_2 = settings.free-gift-threshold-2 | times:100 %} 
{% assign variant_id = '42765098975425' %}

  <script>
  (function($) {
    var cartItems = {{ cart.items | json }},
        qtyInTheCart = 0,
        cartUpdates = {},
        cartTotal = {{ cart.total_price }};
    for (var i=0; i < cartItems.length; i++) {
      if ( cartItems[i].id === {{ variant_id }} ) {
        qtyInTheCart = cartItems[i].quantity;
        break;
      }
    }
    if ( ( cartItems.length === 1 ) && ( qtyInTheCart > 0 ) ) {
      cartUpdates = { {{ variant_id }}: 0 }
    }
    
    else if ( ( cartItems.length >= 1 ) && ( qtyInTheCart !== 1 ) && (cartTotal >= {{ free_gift_threshold_2 }} ) ) {
      cartUpdates = { {{ variant_id }}: 1 }
    }
    else if ( ( cartItems.length >= 1 ) && ( qtyInTheCart > 0 ) && (cartTotal < {{ free_gift_threshold_2 }} ) ) {
    cartUpdates = { {{ variant_id }}: 0 }
    }
      
    else {
      return;
    }
    
     var params = {
      type: 'POST',
      url: '/cart/update.js',
      data: { updates: cartUpdates },
      dataType: 'json',
      success: function(stuff) { 
        window.location.href = '/cart';
      }
    };
    $.ajax(params);
  })(jQuery);
  </script>
1 Like
2

Hi @michaelae

You need to find the cart drawer code and add the said HTML. You might have to change some of the code depending in your theme