Introduction
Welcome to this tutorial, where we’ll show you how to use CSS to ensure that only one upsell can be accepted in your cart at a time. This is especially useful if you want to limit the number of upsell products a customer can add, helping you control the shopping experience and prevent overloading the cart with too many extras.
This guide is perfect for store owners or developers with basic CSS knowledge. By applying this customization, you can streamline your upsell strategy and make it easier for customers to focus on just one additional offer that complements their main purchase.
Let’s dive in and set up a single upsell rule for a cleaner, more effective cart experience!
Accessing Custom HTML Settings
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll down the page until you find the section labeled “Custom HTML”.
Copy and paste the following code into the “Custom HTML” input area.
Here is the HTML Code to Copy and Paste into the HTML Sections titled “Above Announcements”:
<script>
// Script to bring back the upsells when all upsells are removed from cart
window.upcartOnItemRemoved = (_, item) =>
{
if(item?.properties?.__upcartUpsell)
{
/* removed item was an upsell */
const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");
upsells.style.display = "block";
console.log("Removed item was upsell item");
}
}
// Hide upsells when one is added to cart
window.upcartOnAddUpsell = () =>
{
const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");
upsells.style.display = "none";
console.log("Added item was upsell item");
}
// Check the cart for upsells when page is loaded
window.upcartOnCartLoaded = (cart) =>
{
const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");
var items = cart.items;
for(var i = 0; i < items.length; i++)
{
if(items[i]?.properties?.__upcartUpsell)
{
upsells.style.display = "none";
console.log("Cart contains an upsell item");
}
}
}
</script>
Conclusion
And you’re all set! You’ve now learned how to allow only one upsell in your cart using CSS. This helps keep your cart organized and your upsell strategy focused.
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.