> ## 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.

# Hide the quantity selector for specific products

> Prevent quantity changes for select products by hiding the quantity selector using CSS.

# Overview

This customization hides the quantity input (including the plus and minus buttons) for specific product variants in the cart. This ensures those products can only be purchased in fixed quantities.

This is helpful for free gifts, subscription boxes, or limited-edition items.

This method uses **Shopify variant IDs** (not product IDs), so you can target specific variants directly.

***

## Step 1: Find the variant ID

1. In **Shopify Admin**, go to **Products**
2. Click the product you want to modify
3. In the **Variants** section, select the variant you want to lock
4. Look at the URL in your browser — the variant ID appears after `/variants/`

**Example URL:**

```
https://admin.shopify.com/store/your-store/products/1234567890/variants/36485954240671
```

In this example, the variant ID is: `36485954240671`

***

## Step 2:

1. Go to **Upcart > Cart Editor > Settings > Custom CSS**
2. Paste the following code into the input area, replacing the example variant ID with your own:

#### Add custom CSS in V1.0

```
.upcart-product-item[id*="36485954240671"]  
  [class*="styles_QuantityField__"] {  
  display: none !important;  
}
```

#### Add custom CSS in V2.0

**Per-variant targeting is not possible with CSS in V2.0.** V1 works because each row carries the variant id as a DOM `id`; the V2 row does not expose the variant id as an attribute at all, so there is no selector to match a single variant on.

What you *can* do in V2 is hide the quantity selector on **every** cart item:

```
.upcart-public-component-product-tile__quantity-selector {
  display: none;
}
```

If you need it hidden for specific variants only, use the Cart Items module's custom template instead of CSS. The `productTile` template receives `showQuantitySelector` along with the raw line item, so you can decide per line whether to render the selector. See the [CSS selector library](/upcart/upcart_css_selector_library_v2) and the [customization policy](/upcart/upcart_customization_policy).

***

## Important notes

* Make sure there is exactly **one space** between the selectors:\
  `.upcart-product-item[id*='...']` and `[class*="styles_QuantityField__"]`
* Repeat the rule for each variant you want to target by using its unique ID

**Example for multiple variants in V1.0:**

```
.upcart-product-item[id*="36485954240671"]  
  [class*="styles_QuantityField__"],  
.upcart-product-item[id*="49133203521846"]  
  [class*="styles_QuantityField__"] {  
  display: none !important;  
}
```

In V2.0 there is no multi-variant equivalent — the selector above applies to every cart item, and per-variant control needs the custom template route described earlier.

***

## Result

* Customers still see the product in their cart
* The quantity cannot be adjusted
* The product remains locked to the quantity added initially (for example, 1 unit for a free gift)

**Use this for:**

* Free gifts
* Promotional samples
* One-per-customer product rules

***

## Still need help?

For more complex rules, we recommend working with a **Shopify Expert**. They can help with HTML, CSS, and JavaScript customizations inside your cart drawer.

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