Disable Multiship Call to Action in Drawer Cart for Certain Product Types

As you may know, Giftship’s Multiship functionality is not compatible with third-party bundling apps. In this tutorial, we’ll show you how to automatically hide the Multiship call to action in the drawer cart when a product with the type name “Bundle” is added. This solution listens for drawer open and item update events to re-check and apply the logic dynamically.

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-disable-ms.js
3. Copy and paste the following code into that file:

(() => {
  const CONFIG = {
    hiddenInputName: "hidden",
    hideClass: "hide_button"
  };

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

    registerDrawerListeners: function () {
      document.addEventListener('giftship.drawer-cart.opened', this.deferHandleDrawerEvent.bind(this));
      document.addEventListener('giftship.drawer-cart.item-updated', this.deferHandleDrawerEvent.bind(this));
    },

    deferHandleDrawerEvent: function () {
      requestAnimationFrame(() => {
        this.handleDrawerEvent();
      });
    },

    handleDrawerEvent: function () {

      const options = document.querySelectorAll(`.gs__cart-option[data-child-name="${CONFIG.hiddenInputName}"]`);
      let isEnabled = false;

      options.forEach(option => {
        const isHidden = option.classList.contains('gs__hidden-option');
        if (!isHidden) {

          isEnabled = true;
        }
      });

      const multiShipBtn = document.querySelector('.gs__drawer-footer-btn.gs__drawer-ms-btn');
      if (!multiShipBtn) return;

      if (isEnabled) {
        multiShipBtn.classList.add(CONFIG.hideClass);
      } else {
        multiShipBtn.classList.remove(CONFIG.hideClass);
      }
    }
  };

  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-disable-ms.js' | asset_url }}"></script>

{% style %}
.gs__drawer button.hide_button {
display:none !important;
}

{% endstyle %}

Step 4: Modify the Drawer Cart

In your drawer cart, create a hidden input block and configure the display rules so it only shows when the product type contains “Bundle“. Make sure the input name is set to “hidden“.