Skip to main content
⚠️ Important notice This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide. If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2. We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.

​
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
  2. Paste the following code into the Above announcements section

​
HTML script to copy

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

​
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