Automatically Add Upsell (e.g. Insurance) in Drawer Cart

In this tutorial, we’ll show you how to automatically add an upsell item—like insurance—to the drawer cart. The script stores a flag in session storage so if the customer removes the upsell during their session, it won’t be added again until the browser session is reset.

Important Note: This is an advanced tutorial designed for qualified Shopify developers with JavaScript experience. If you’re not working with a developer and need assistance, we can implement this for a flat fee of $100 USD. Payment can be made at: https://shop.gist-apps.com.

Step 1: Duplicate Your Live Theme

Always work on a duplicated development theme to ensure that your live store remains unaffected.

Step 2: Create and Upload the Snippet

  1. Go to the Assets folder in your theme.
  2. Create a new JavaScript file named giftship-drawer-auto.js
  3. Copy and paste the following code into the file:
(() => {
  const CONFIG = {
    upsellChildName: "auto" // value for data-child-name
  };

  const MODULE = {
    init: function () {
      this.registerDrawerOpenListener();
    },

    registerDrawerOpenListener: function () {
      document.addEventListener('giftship.drawer-cart.opened', this.handleDrawerOpened.bind(this));
    },

    handleDrawerOpened: function () {
      if (sessionStorage.getItem("gs_drawer_upsell")) return;

      const selector = `.gs__cart-option[data-child-name="${CONFIG.upsellChildName}"]`;
      const upsell = document.querySelector(selector);
      if (!upsell) return;

      const button = upsell.querySelector('.gs__upsell-btn.gs__list-upsell-btn');
      if (
        button &&
        button.textContent.trim().toLowerCase() === "add" &&
        !button.disabled &&
        !button.hasAttribute('aria-disabled')
      ) {
        sessionStorage.setItem("gs_drawer_upsell", "true");
        button.click();
      }
    }
  };

  MODULE.init();
})();

Step 3: Edit theme.liquid to Include the Snippet

  1. Open theme.liquid in the theme editor.
  2. Scroll to the bottom, just above the closing </body> tag.
  3. Paste the following code:
    <script src="{{ 'giftship-drawer-auto.js' | asset_url }}"></script>

Step 4: Modify the Drawer Cart

In your drawer cart, create an upsell block and add the upsell item.
Make sure the input name is set to "auto".

Let me know if you need help adjusting this for your theme.

Can't find the answer in our documentation?
Contact Support