Skip to main content

​
Overview

This customization uses HTML, CSS, and JavaScript to block checkout when the cart only contains upsell items. It helps ensure that upsells are treated as secondary offers, not standalone purchases, supporting a more controlled and intentional upsell strategy. This ensures that upsell products function within specific boundaries, emphasizing their role as complementary items to primary products. When implemented, the checkout button will be disabled until at least one non-upsell product is added to the cart.

​
How it works

  • If the cart contains only upsell items, the checkout button is greyed out
  • A warning message appears below the button
  • Once a regular product is added, the button becomes active and the warning disappears- Provides clear validation for scenarios ensuring that upsell products are only purchased with associated trigger products, such as displaying targeted warning messages.
This setup is ideal for store owners or developers with basic knowledge of JavaScript and CSS.

​
Step 1: Add custom HTML

Go to:
Upcart > Cart Editor > Settings > Custom HTML

​
In the Above announcements/rewards section, paste:

<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  upcartOnCartLoaded = (cart) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(cart));  
  };  
</script>

​
In the Below checkout button section, paste:

<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
Feel free to adjust the wording in the warning message to fit your brand tone.

​
Step 2: Add custom CSS

Go to:
Upcart > Cart Editor > Settings > Custom CSS Paste the following code: 
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
This styles the warning message and disables the checkout button visually and functionally.

​
Final result

Once set up:
  • Checkout is blocked unless at least one non-upsell product is in the cart
  • A message informs customers why checkout is disabled
  • The experience feels smooth and brand-aligned
This is especially helpful for: Coupling effective upsell strategies with these techniques also improves the overall customer shopping experience by eliminating unnecessary conflicts in the purchase process.
  • Preventing accidental single-item upsell purchases
  • Maintaining upsells as add-on only products
  • Ensuring better control over AOV and product bundling

​
Still Need Help?

If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer. See Shopify Experts