Introduction
In this tutorial, we’ll walk you through how to hide the quantity selector for specific product IDs in your cart using CSS. This means that certain products won’t be able to have their quantities increased or decreased once they’re added to the cart, giving you more control over how specific items are handled.
This customization is perfect for store owners or developers with basic CSS knowledge. Whether it’s a limited-edition item, a gift, or a product with special conditions, this tweak will ensure customers can only purchase a fixed quantity.
Let’s dive in and customize your cart to control quantity for specific products!
Here is what our end result will look like:
Finding Variant ID’s
First, follow these steps to locate the Product/Variant ID in Shopify. We will need these for each product/variant you want to hide the selector for:
From your **Shopify admin** go to **Products.**
Click on the product that has the variant you want to view.
In the Variants section, click on the specific product variant.
Look at the URL in your browser's address bar. The variant ID is the number that appears after
/variants/<https://admin.shopify.com/store/shopname/products/1234567/variants/3648595424067136485954240671> in the URL. For example, in the URL the variant ID is36485954240671
For more details on finding Product IDs, visit Shopify's Help Documentation on Variant IDs.
What your Variant ID looks like:
Accessing Custom CSS Settings:
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled "Custom CSS".
Copy and paste the following code below into the CSS input area:
Note: Replace the variant ID number in [id=’________’]*
Make sure it’s a variant ID. You’ll want to do this for every variant of the product since the Product ID is not what’s used here. My ID is 49133203521846 as indicated in the screenshot above.
Make sure there is a single space between .upcart-product-item[id*='49133203521846'] AND [class*="styles_QuantityField__"] - if there is no space, the code will not work.
.upcart-product-item[id*='49133203521846'] [class*="styles_QuantityField__"]
{
display: none !important;
}
Conclusion
And that’s it! You've successfully learned how to hide the quantity selector for specific product IDs, making sure those items have a fixed quantity in the cart.
Still Need Help?
If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer.