Skip to main content

​
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

.upcart-public-cart-items  
  [data-variant-id="36485954240671"]  
  .upcart-public-component-product-tile__quantity-selector {  
  display: none;  
}

​
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;  
}
Example for multiple variants in V2.0: 
.upcart-public-cart-items  
  [data-variant-id="36485954240671"]  
  .upcart-public-component-product-tile__quantity-selector,  
.upcart-public-cart-items  
  [data-variant-id="36485954240672"]  
  .upcart-public-component-product-tile__quantity-selector,  
.upcart-public-cart-items  
  [data-variant-id="36485954240673"]  
  .upcart-public-component-product-tile__quantity-selector {  
  display: none;  
}

​
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