⚠️ 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 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.