> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Disable Quantity Selector and Product Page Links For Reward / Free Items

> Disable the quantity selectors and product page links for rewards/free items in Upcart, ensuring users cannot exploit your free rewards.

⚠️ **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:

<img src="https://mintcdn.com/aftersell/-dxnKm0Mro2whB9j/images/upcart/674d86a92851.png?fit=max&auto=format&n=-dxnKm0Mro2whB9j&q=85&s=1fa5270d4ddc10f5a6b85e54c3be0f0c" alt="Image" width="520" data-path="images/upcart/674d86a92851.png" />

***

# Accessing Custom CSS and HTML Settings

To begin customizing the CSS and HTML for your Upcart, follow these steps:

1. Open the **Upcart App**.
2. Click on **Cart Editor**.
3. 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.upcartSubscribeCartLoaded((event) => upcartDisableQtyOnFreeItems(event.cart));  
  window.upcartSubscribeCartUpdated((event) => upcartDisableQtyOnFreeItems(event.cart));  
</script>
```

<Note>
  **Legacy note:** `window.upcartOnCartLoaded` and `window.upcartOnCartUpdated` callbacks still work but are deprecated and log console warnings. Use `upcartSubscribeCartLoaded` and `upcartSubscribeCartUpdated` for all new scripts.
</Note>

***

## 🚧 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:

[See Shopify Experts](https://www.shopify.com/partners/directory)

##

##