> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Limit the cart to one upsell at a time

> Use custom HTML to hide the upsell module after a single upsell is added to the cart.

# 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

1. Go to **Upcart > Cart Editor > Settings > Custom HTML**

<Warning>
  **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](/upcart/upcart_css_selector_library_v2).
</Warning>

2. 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>
```

<Note>
  **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.
</Note>

***

## 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](https://www.shopify.com/partners/directory)