⚠️ Important Notice
This article applies only to Version 1 (V1) of the Upcart cart modules. In Version 2 (V2), the quantity selector is removed by default for free gifts, and customers cannot click free gift items in the cart to navigate to their product page.
As a result, the customization described in this article is not required and not supported in V2.
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 select the "Custom HTML" tab and then the "Custom CSS" tab
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: