Example Image
Accessing Custom CSS and 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 to the bottom of the page until you find the section labeled "Custom CSS" and below that is "Custom HTML" .
Code
CSS
Changes to Make
.free-item-disable-qty .upcart-product-quantity-input,
.free-item-disable-qty .upcart-product-quantity-minus,
.free-item-disable-qty .upcart-product-quantity-plus {
pointer-events: none !important;
cursor: not-allowed;
opacity: 0.5;
}
.free-item-disable-qty .upcart-product-title,
.free-item-disable-qty .upcart-product-image-wrapper {
pointer-events: none !important;
}
HTML
Changes to Make
Scripts (Before load)
<script>
function upcartDisableQtyOnFreeItems(cart) {
const freeItems = cart.items.filter((item) => item.price === 0);
for (const item of freeItems) {
const cartRow = document.querySelector(`[id="${item.key}"].upcart-product-item`);
cartRow?.classList.add('free-item-disable-qty');
}
}
window.upcartOnCartLoaded = upcartDisableQtyOnFreeItems;
window.upcartOnCartUpdated = upcartDisableQtyOnFreeItems;
</script>
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.