Overview

This customization prevents multiple upsells from being added at once by hiding the upsell section as soon as one upsell is accepted. Once the upsell is removed, the module reappears. This is useful if you want to:

Simplify the cart experience
Reduce decision fatigue
Maintain exclusivity around certain offers

How it works

When a customer accepts an upsell, the upsell section is hidden
If the upsell item is removed, the upsell section becomes visible again
Works with both AI-recommended and manual upsells

Where to add the code

Go to Upcart > Cart Editor > Settings > Custom HTML

The selector below is Version 1 only. .upcart-upsells-module is on the V1 upsells carousel. If your Upsells module is on Version 2, swap it for .upcart-public-upsell in all three handlers — the rest of the script is unchanged. See the V2 CSS selector library.

Paste the following code into the Above announcements/rewards location

HTML script to copy

<script>  
  // Show upsells again when upsells are removed  
  window.upcartSubscribeItemRemoved((event) => {  
    if (event.item?.properties?.__upcartUpsell) {  
      const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
      if (upsells) upsells.style.display = "block";  
    }  
  });  
  
  // Hide upsells once one is added  
  window.upcartSubscribeUpsellsAddedToCart(() => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    if (upsells) upsells.style.display = "none";  
  });  
  
  // Check for upsell in cart when it loads  
  window.upcartSubscribeCartLoaded((event) => {  
    const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");  
    const items = event.cart.items || [];  
    const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);  
    if (upsells && hasUpsell) {  
      upsells.style.display = "none";  
    }  
  });  
</script>

Legacy note: window.upcartOnItemRemoved, window.upcartOnAddUpsell, and window.upcartOnCartLoaded callbacks still work but are deprecated and log console warnings. Use upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart, and upcartSubscribeCartLoaded for all new scripts.

Result

Once this customization is added:

Customers only see upsells if they have not already accepted one
The upsell module is hidden as soon as an upsell is added
The module reappears automatically if the upsell item is removed
No need to configure product IDs or tags

This keeps your upsell experience focused, uncluttered, and easy for customers to engage with.

Still need help?

For more advanced customization, we recommend working with a Shopify Expert. They can assist with HTML, CSS, and JavaScript inside your cart drawer. See Shopify Experts

⌘I

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

Limit the cart to one upsell at a time

Overview

How it works

Where to add the code

HTML script to copy

Result

Still need help?

​Overview

​How it works

​Where to add the code

​HTML script to copy

​Result

​Still need help?

Overview

How it works

Where to add the code

HTML script to copy

Result

Still need help?