How to add plus + and minus – buttons to the quantity input on the product page in Shopify

How to add plus + and minus – buttons to the quantity input on the product page in Shopify

In this post, we will talk about the quantity feature

Step 1: Add Code in Product File



{% if section.settings.show_quantity_selector %}
				  <div class="qtydiv">
				  	<label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
				    <div class="qtybox">
				      <span class="btnqty qtyminus icon icon-minus">-</span>
				      <input type="text" id="quantity" name="quantity" value="1" min="1" class="quantity-selector quantity-input" readonly="">
				      <span class="btnqty qtyplus icon icon-plus">+</span>
				    </div>
				  </div>
				{% endif %}

Step 2: Add Js code at the bottom of the file in Theme.js file


$('.qtybox .btnqty').on('click', function(){
  var qty = parseInt($(this).parent('.qtybox').find('.quantity-input').val());
   if($(this).hasClass('qtyplus')) { 
       qty++;
   }else {
   if(qty > 1) {
	qty--;
   }
}
qty = (isNaN(qty))?1:qty;
  $(this).parent('.qtybox').find('.quantity-input').val(qty);
});

Leave a Reply

Your email address will not be published. Required fields are marked *

Back To Top