How to add qty plus minus buttons in shopify?

Sorry this is not a detailed description but a summary with all code

Add available quantities first – as shown in this article – How to show stock quantities in all variants of shopify

^The above part is utmost necessary. because the following functions use previous js variables.

So here we go. Good Luck!!

javascript on the product page

<script>
  $(document).ready(function($){
       
    var  $j=new jQuery.noConflict();
    var qtyinput=$j("#quantity");
    var qtyplus=$j("#qtyplus");
    var maxallowed=parseInt($j(qtyinput).attr('max'));
    var qtyminus=$j("#qtyminus");
      var qtyvalue=parseInt($j(qtyinput).val());
    setTimeout(function(){$j(qtyminus).removeClass("hidden");
    $j(qtyplus).removeClass("hidden");
    },8000);
    $j(qtyminus).click(function($){
      qtyvalue=parseInt($j(qtyinput).val());
      maxallowed=parseInt($j(qtyinput).attr('max'));
      if(qtyvalue<2){checkFreeze(); return;}
       $j(qtyinput).val(qtyvalue-1);
                checkFreeze();    });
    $j(qtyplus).click(function($){
      qtyvalue=parseInt($j(qtyinput).val());
      maxallowed=parseInt($j(qtyinput).attr('max'));
      //    console.log(qtyvalue + " -- - -" + maxallowed);
      if(maxallowed<=qtyvalue){
        checkFreeze(); return;}
    $j(qtyinput).val(qtyvalue+1);
           checkFreeze();         });
  
  });
        </script>

html tags on product page. make sure you add these AROUND quantity input

<a id=qtyminus class="freeze fa fa-minus hidden"></a>
<input class="select-on-focus" min=1 type="text" size="3" id="quantity" name="quantity" value="1" {% if issingle %}max="{{ current_variant.inventory_quantity }}" {% endif; %}/>
<a id=qtyplus class="{% if current_variant.inventory_quantity==1 %}freeze {% endif; %}fa fa-plus hidden"></a>
              

javascript function inside your theme.js. Reason: so that this gets loaded aka defined before updateSku is called()

function checkFreeze(){
    $j=new jQuery.noConflict();
    var qtyinput=$j("#quantity");
    var qtyplus=$j("#qtyplus");
    var maxallowed=parseInt($j(qtyinput).attr('max'));
    var qtyminus=$j("#qtyminus");
      var qtyvalue=parseInt($j(qtyinput).val());
  //alert("max is "+maxallowed);
      if(maxallowed==0 || maxallowed===undefined){        
             $j(qtyplus,qtyminus).addClass("freeze");
        $j(qtyinput).val(0);
        return;
      }
  qtyvalue=parseInt($j(qtyinput).val());
      if(qtyvalue>=maxallowed){//newval=1;
        $j(qtyinput).val(maxallowed);
             $j(qtyplus).addClass("freeze");  
        }
      else{
        if(qtyvalue<1)
        $j(qtyinput).val(1);
      $j(qtyplus).removeClass("freeze");
      }
  qtyvalue=parseInt($j(qtyinput).val());
      if(qtyvalue>1){
        
      $j(qtyminus).removeClass("freeze");}
      else {
             $j(qtyminus).addClass("freeze");     
                  }
    };

changes in function updatesku. Add these lines inside the function. Make sure you have already followed part1

if(inv_qty[ variant.id ]!==undefined)$("#quantity").attr('max',inv_qty[ variant.id ]);
    else $("#quantity").attr('max',0);
    $(document).ready(function(){checkFreeze();});

After making changes as discussed in part1 and this article, the final updatesku function looks somewhat this


  _.updateSku = function(variant, $container){
    $container.find('.sku .sku__value').html( variant ? variant.sku : '' );
    $container.find('.sku').toggleClass('sku--no-sku', !variant || !variant.sku);
    if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=bomb>Sold Out!</span></p>");
    else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=fire>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
    else $("#stockstatus").html("<p class=grass><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
  if(inv_qty[ variant.id ]!==undefined)$("#quantity").attr('max',inv_qty[ variant.id ]);
    else $("#quantity").attr('max',0);
    $(document).ready(function(){checkFreeze();});
  }

CSS – can be added in custom.css

#qtydiv a{border: 1px solid #777;
    border-radius: 3px;
    font-size: 16px;
    padding: 0;
    line-height: 30px;
    width: 30px;
    background: #efefef;
    color: #444;
    height: 30px;
    vertical-align: baseline;
    text-align: center;
    cursor: pointer;
  margin:0 5px;}
#qtydiv a.freeze{cursor:not-allowed;
  border: 1px solid #eee;
    color: #bcbcbc;}

How to show stock quantity for all variants in shopify?

How to show “xxx left in stock” on shopify product page?

Shopify – show ONLY XX AVAILABLE IN STOCK on product page

Start by adding snippet in product-template.liquid

 <div id="stockstatus">
        {% if product.variants.size < 2 %}
          {% assign current_variant= product.variants.first %}
        {% endif %}
        {% if current_variant.inventory_quantity < 1 %}
            <p class="zero">Sold Out!<span class="variant-inventory">{{ current_variant.inventory_quantity }}</span></p>
        {% elsif current_variant.inventory_quantity < 6 %}
            <p class="few">Hurry! Only <span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> left in stock.</p>
        {% else %}
            <p class="plenty"><span class="variant-inventory">{{ current_variant.inventory_quantity }}</span> available in stock.</p>
        {% endif %}
 </div>
<script>
     var inv_qty = {};
     {% for var in product.variants %}
           inv_qty[{{- var.id -}}] = {{ var.inventory_quantity | default: 0 }};
     {% endfor %}
</script>

Now in theme.js or theme.js.liquid and edit function updateSku / _.updateSku

if(inv_qty[ variant.id ] <1 || inv_qty[ variant.id ]==undefined)$("#stockstatus").html("<p class=zero>Sold Out!</span></p>");
    else if(inv_qty[ variant.id ] <6)$("#stockstatus").html("<p class=few>Hurry! Only <span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> left in stock.</p>");
    else $("#stockstatus").html("<p class=plenty><span class='variant-inventory'>"+ inv_qty[ variant.id ] + "</span> available in stock.</p>");
  

Now add some CSS in custom.css or styles.css

p.zero,p.few,p.plenty{background: #b2e7b2;
    display: inline-block;
    padding: 3px 10px;}
p.few:before {
    content: "\f0e7";
    font-family: "FontAwesome";
    margin-right: 10px;}
p.zero:before {
    content: "\f119";
    font-family: "FontAwesome";
    margin-right: 10px;}
p.few,p.zero{color: #fff;background: #eb5050 !important;}

Also note, you can add css for the qty number by using selector

.variant-inventory{font-weight:bold}
or more specifically
#stockstatus .variant-inventory{font-weight:bold}

Hopefully it would work on your theme

Extend this functionality to show quantity plus minus buttons also

References:

https://community.shopify.com/c/Shopify-Design/Showing-the-stock-quantity-per-variant/m-p/428953/highlight/true#M111057

https://community.shopify.com/c/Shopify-Design/How-do-I-Show-inventory-quantities-on-product-pages-using-Debut/m-p/330715/highlight/true#M86371

https://community.shopify.com/c/Shopify-Design/See-if-a-product-has-variants/m-p/414669/highlight/true#M107631