Running a Shopify store with products like digital downloads, custom prints, or single-purchase items often means you don’t need customers adjusting quantities in the cart. By using Shopify’s tag system and some simple Liquid code, you can hide the quantity selector for specific products. This article guides you through the process step-by-step, ensuring a seamless experience for both you and your customers.
Why Hide the Quantity Selector?
For certain products, like printable artwork or one-off digital items, allowing quantity changes in the cart can complicate the shopping experience or lead to errors. By tagging specific products and tweaking your theme’s code, you can restrict the quantity selector to appear only where needed, keeping your cart clean and user-friendly.
Step-by-Step Guide
1. Duplicate Your Theme for Safety
Before editing your Shopify theme, always create a backup to avoid disrupting your live store:
- Log in to your Shopify Admin.
- Navigate to Online Store > Themes.
- Find your current theme, click Actions, and select Duplicate.
- Work on the duplicated theme to test changes safely.
2. Access the Code Editor
To begin editing:
- In the duplicated theme, click the three-dot menu and select Edit Code.
- You’ll see folders like Layout, Templates, Sections, Snippets, Assets, Config, and Locales.
We’ll focus on the Snippets folder for the cart drawer and the Sections folder for the main cart page.
3. Hide the Quantity Selector in the Cart Drawer
To modify the cart drawer:
- In the Snippets folder, locate and open cart-drawer.liquid.
- Search for the term "quantity" (use Ctrl+F) to find the code block rendering the quantity selector, typically within a <div> or <form> tagged with a quantity popover.
- Wrap the quantity input code with a Liquid conditional statement to hide it for products with a specific tag (e.g., hide):
{% unless item.product.tags contains 'hide' %}
<!-- Quantity selector code here -->
{% endunless %}
This condition ensures the quantity selector is hidden for products tagged with hide. If you also want to hide the remove/delete button, apply the same condition around that code.
4. Tag Products in Shopify Admin
To apply the tag:
- Go to Products in your Shopify Admin.
- Select the product you want to hide the quantity selector for.
- Scroll to the Tags section, add the tag hide, and click Save.
Now, when this product is added to the cart, the quantity selector will be hidden.
5. Hide the Quantity Selector on the Main Cart Page
If your store uses a full cart page instead of a drawer:
- In the Sections folder, locate and open main-cart-items.liquid.
- Search for "quantity" to find the quantity input code.
- Wrap it with the same Liquid condition:
{% unless item.product.tags contains 'hide' %}
<!-- Quantity input code -->
{% endunless %}
This ensures consistency across both the cart drawer and the main cart page.
6. Test Your Changes
To verify everything works:
- Add a product without the hide tag to the cart — the quantity selector should be visible.
- Add a product with the hide tag — the quantity selector should be hidden.
- Optionally, test hiding the delete button if you applied the condition there.