Overview
This guide is intended for UpCart merchants looking to eliminate quantity selectors and product page links for free and reward items. Making this adjustment protects your reward strategy and helps prevent misuse of your rewards offerings.
Example
Here is what the cart will look like after disabling the quantity selector and product page links:
Accessing Custom CSS and HTML Settings
To begin customizing the CSS and HTML for your UpCart, follow these steps:
Open the UpCart App.
Click on Cart Editor.
Click on Settings and scroll down the page until you find the section labeled "Custom HTML" and then "Custom CSS" further down.
CSS and HTML Code Changes
CSS
Copy and paste the code below into the Custom CSS section. Save and add the HTML below.
.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 Scripts (Before load)
Copy and paste the code below into the Custom HTML dropdown for Scripts (Before load). Save.
<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');
console.log("Free item disabled")
}
}
window.upcartOnCartLoaded = upcartDisableQtyOnFreeItems;
window.upcartOnCartUpdated = upcartDisableQtyOnFreeItems;
</script>
🚧 Support for Customizations
UpCart's support team cannot assist with implementing custom CSS or HTML solutions in your cart.
If you need help designing or styling something custom, we recommend consulting a Shopify Expert: