Notice: End-of-Life Announcement for all Shopify themes by Barrel > Read More

Close

I sell unique products. How do I remove the quantity fields?

Some stores sell only unique products, meaning they have only one of each product available. These might be collector’s items, art pieces, antiques, etc. For these stores, it might not make sense to show the quantity fields anywhere in the store.

This tutorial will show you how to remove the quantity fields from the product pages, the shopping cart, and the product quick view.

NOTE: Be sure to set the inventory of your products to “1” as well, so that products cannot be purchased more than once. Shopify has a guide on how to do this here.

 

Part A: Remove Quantity Field from Product Pages

This part of the tutorial will show you how to hide the quantity field from appearing on all of your product pages.

1. Go to Edit HTML/CSS to edit the theme code. Shopify has a guide on how to do this here.

2. In the Templates folder, open the file called product.liquid.

3. Around line 79, you should see the following code:

 <div class="productForm-block">
   <label class="product-option-label">{{ 'products.form.quantity' | t }}</label>
   <div class="js-counter counter inputGroup">
     <input type="text" class="inputCounter" name="quantity" value="1"/>
     <span class="inputCounter-up">+&nbsp;</span>
     <span class="inputCounter-down">&nbsp;–</span>
   </div>
 </div>

4. On the very first line of code above, you’re going to add the code shown in blue here:

 <div style="display: none;" class="productForm-block">
   <label class="product-option-label">{{ 'products.form.quantity' | t }}</label>
   <div class="js-counter counter inputGroup">
     <input type="text" class="inputCounter" name="quantity" value="1"/>
     <span class="inputCounter-up">+&nbsp;</span>
     <span class="inputCounter-down">&nbsp;–</span>
   </div>
 </div>

That’s it! The quantity field should no longer appear on your product pages. Now let’s move on to Part B.

 

Part B: Remove Quantity Column from Shopping Cart

This part of the tutorial will show you how to remove the quantity column from the Shopping Cart.

1. Make sure you’ve followed Step 1 from Part A above.

2. In the Snippets folder, open the file called site-cart.liquid.

3. Around line 21, you should see the following code:

 <div class="cart-product-quantity d-table-cell">
   <h3 class="">{{ 'cart.labels.quantity' | t }}</h3>
 </div>

Delete the code in red above. This will remove the “Quantity” text that appears at the top of the quantity column on larger devices.

4. In this same file, scroll down to around line 66, and look for this code:

 <div class="cart-product-quantity med_u-block med_d-block d-table-cell">
   <div class="js-counter counter inputGroup">
     <input type="text" name="updates[]" id="updates_{{ item.id }}" class="inputCounter" value="{{ item.quantity }}" />
     <span class="inputCounter-up">+&nbsp;</span>
     <span class="inputCounter-down">&nbsp;–</span>
   </div>
 </div>

Delete the code in red above. This will remove the quantity picker from each product that has been added to the cart.

5. (OPTIONAL) You can also remove the “UPDATE” button, since it’s no longer necessary. So, to do this, stay in the same file and scroll down to around line 80-83, and look for this code:

 <div class="d-table-footer">
   <div class="d-table-row">
     <div class="d-table-cell"></div>
     <div class="d-table-cell"></div>
     <div class="d-table-cell">
       <button class="cart-update" type="submit" name="update" value="Update +">{{ 'cart.labels.update' | t }} <i class="icon-update"></i></button>
     </div>

Delete the code in red above, and you should be all set! Be careful not to delete any lines of code above or below. 🙂

 

Part C: Remove Quantity from the Product Quick View

This part of the tutorial will show you how to remove the quantity column from the product quick view.

1. In the Assets folder, open the file called shop.js.liquid.

2. Around line 2207, you should see the following code:

 '<div class="productForm-block">'+
   '<div class="js-counter counter inputGroup">'+
     '<label>Quantity</label>'+
     '<input type="text" class="inputCounter" name="quantity" value="1"/>'+
     '<span class="inputCounter-up">+&nbsp;</span>'+
     '<span class="inputCounter-down">&nbsp;–</span>'+
   '</div>'+
 '</div>'+
 '<div class="productForm-block">'+

Delete the code in red above. This will remove the “Quantity” button from the product quick view.

 

That’s it!