Introduction
In this tutorial, we’re going to show you how to prevent upsell-only purchases in your cart by requiring customers to add at least one regular product before checking out. This ensures your upsell offers are only supplementary and not used as stand-alone purchases, protecting your pricing strategy.
With this setup, the checkout button will be greyed out until a regular product is added, guiding your customers to complete their purchase as intended. This customization is ideal for store owners or developers with basic CSS knowledge, and it's a simple way to make sure your upsell system works as you expect.
Let’s get started and make sure your upsell strategy stays effective and protected!
Here is what our end result will look like:
Accessing Custom CSS and HTML Settings
We will be placing code in 3 places. Two in the HTML sections for function and one in the CSS section for styling.
To begin customizing the HTML and CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled “Custom HTML” and "Custom CSS".
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Above Announcements/Rewards”
<script>
// Returns whether or not the cart contains only upsell products
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>
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Below Checkout Button”
Here is where you add the wording that will show for when an upsell only item is in the cart, feel free to adjust the wording to better suit your business:
<div class="upcartUpsellOnlyWarning" style="display: none;">
Your cart only contains upsell products. <br>
Please add a non-upsell product in order to checkout!
</div>
Applying Custom CSS
Next we will apply the CSS for styling. Once you are in the Custom CSS section, you can change the toggle colors by following these steps below. Modify the colors in :root to match your brand or your preferences!
Locate the CSS input area.
Copy and paste the following code into the CSS input area:
.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;
}
Conclusion
And that's it! You've now learned how to prevent upsell-only purchases and ensure customers add a regular product to the cart before checking out. This helps protect your pricing and sales strategy.
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.