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.
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
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:
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.