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
- Go to the Assets folder in your theme.
- Create a new JavaScript file named giftship-drawer-auto.js
- 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
- Open
theme.liquid
in the theme editor. - Scroll to the bottom, just above the closing
</body>
tag. - 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 Drawer Cart: Automatically Clear Datepicker After X Hours
Automatically Add Upsell (e.g. Insurance) in Drawer Cart
Disable Multiship Call to Action in Drawer Cart for Certain Product Types
How to Add Product Bundles Manually to Cart
Google Font Real-Time Personalizer
Remove Blocks Based on Country
Remove British Forces from Multi-Address Modal
Preset Bundles: Automatically Ensure All Products in an Upsell Block Are Added to Cart
How to Add Custom Scripts to Multiship
Conditionally Showing Datepicker Blocks Based on Product Types in Cart Using the Hidden Input Block
Showing Product Option Blocks Based on Customer Tags with the Hidden Input Block
Event API Example: Automatically Add an Ice Pack to Each Shipment in the Multiple shipping Address Process
Drawer Cart CSS Styling Options
Preventing Checkout Until Giftship Bundles are Loaded
Javascript Event API
Showing Product Option Blocks Based on Product Variants with the Hidden Input Block
Edit Gift Messages etc on Multiship and Cart Page in Giftship
Adding Bundles when a User Navigates to the Cart Page
How to show bundle price on product page as bundle is built
Conditionally Hide Giftship Options Based on Your Carts Contents
Giftship Checkout API ⚒️