Skip to main content

How to Hide the Shopify Quantity Selector

When using the File Quantity Management feature, the total quantity is determined by the number of uploaded files. Leaving the standard Shopify quantity input visible can cause conflicts and confuse your customers.

Updated over a month ago

Follow these steps to hide the standard quantity selector on specific products without affecting your entire store.

Part 1: Hide Quantity on the Product Page

The best way to do this is by creating a dedicated product template in your Theme Editor.

Step 1: Create a New Product Template

  1. From your Shopify Admin, go to Online Store > Themes.
    ​

  2. Click the Customize button next to your current theme.
    ​

  3. At the top center of the screen, click the dropdown menu (usually says "Home page").
    ​

  4. Select Products and then click + Create template.
    ​

  5. Name the template hide-quantity and leave the "Based on" setting as "Default product".
    ​

  6. Click Create template.

Step 2: Remove the Quantity Selector

  1. In your new hide-quantity template, look at the sidebar panel on the left.

  2. Locate the Product Information section.

  3. Find the Quantity selector block (or "Quantity picker").

  4. Click the eye icon 👁️ next to it to hide it, or click on the block and select Remove block to delete it entirely from this template.

  5. Click Save in the top right corner.


​Step 3: Assign the Template to Your Product Now that the template is ready, you need to assign it to the products where you want to use File Quantity logic.

  1. Go back to your Shopify Admin and click on Products.

  2. Select the product you wish to update.

  3. Scroll down to the Online Store section on the right-hand sidebar.

  4. Change the Theme template dropdown from "Default product" to hide-quantity.

  5. Click Save.

The standard quantity selector is now hidden on the product page for these specific items.

Part 2: Hide Quantity on the Cart Page

The steps above only remove the selector from the product listing page. To prevent customers from changing quantities on the cart page, follow the steps below:

  1. Navigate to the Theme Code: In your Shopify admin, go to Online Store > Themes. Find the theme you want to edit and click Actions > Edit code.

  2. Locate the CSS File: In the file editor on the left, find the Assets folder and click on the theme.css file (or a similar main CSS file like base.css, main.css, or style.css depending on your theme).

  3. Add the CSS Code: Scroll to the very bottom of the file and add the following CSS rules:

#CartDrawer .cart-item[data-handle=custom-apparel] .cart-quantity {
  display: none;
}
.cart-item:has(.cart-item__title[href*="/products/custom-apparel"]) quantity-input {
  display: none;
}
.cart-item:has(.cart-item__name[href*="/products/custom-apparel"]) quantity-input {
  display:none;
}

⚠️ Important Customization: You must replace the sample link /products/custom-apparel and the handle custom-apparel in the CSS code above with the specific link and handle of the product whose quantity you wish to hide on the cart page.

  • The handle is the unique, URL-friendly name of the product (e.g., if the URL is yourstore.com/products/single-print-t-shirt, the handle is single-print-t-shirt).

  • The link part is the path after your store URL (e.g., /products/single-print-t-shirt).

🚨 A Note on Compatibility

Please be aware that the CSS code provided above uses specific selectors (#CartDrawer, .cart-item, [data-handle], :has()) that are based on the structure of a common Shopify Dawn-based theme.

These exact lines of code may not work in every Shopify theme. The selectors and classes used by themes can vary widely. If the code does not work after saving, you may need to use different, theme-specific CSS selectors.

Recommendation: If you are unsure or the provided code does not work, it is strongly recommended that you seek assistance from a Shopify developer who can inspect your specific theme's HTML structure and write the correct, theme-compatible CSS rules.

Related Articles
What is File Quantity Management?
Did this answer your question?