How to add quantity plus minus buttons to debut theme?

Create a snippets name qty and add those following code:

 <div class="qtydiv">
  <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>

 .qtydiv label{
   display: block;
   margin-bottom: 12px;
   letter-spacing: 2.8px;
   color: #747a7b;}
.qtydiv .btnqty{
  display: inline-block;
  cursor: pointer;
  user-select: none;
  font-size: 25px;
  padding: 5px;
  line-height: 5px;}
.qtydiv .btnqty.qtyminus{
  margin-right: 8px;
.qtydiv .btnqty.qtyplus{
  margin-left: 8px;
.qtydiv .quantity-input{
  border: none;
  border: none;
  padding: 8px;
  text-align: center;
  width: 50px;
  outline: none;
  display: inline-block;
.qtydiv {
  display: inline-block;
  padding-right: 15px;
  padding-top: 10px;

<script src=""></script>

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


How to add quantity plus minus buttons to debut theme

And add {% include 'qty' %} on product-template.liquid section. That,s it.



1 comment

  • Working perfectly. Saved my time.
    Thanks a lots

    Test den

Leave a comment

Please note, comments must be approved before they are published