How to Add Quantity Buttons to Debut Theme - eCommerce Thesis

How to Add Quantity Buttons to Debut Theme

Posted on by Foysal

In today’s digital age, having a user-friendly and convenient online store is essential for any business to succeed. One way to improve the shopping experience for customers is by adding quantity buttons to the product pages of your online store. In this article, we will be focusing specifically on how to add quantity buttons to the Debut theme on Shopify, one of the most popular e-commerce platforms in the world. By following our step-by-step guide, you can enhance your store’s functionality and make it easier for customers to purchase multiple items with just a few clicks. So let’s dive in and learn how to add quantity buttons to your Debut theme today!

1. Go to theme customize theme editor->select product page->tick “Show quantity selector” box from left side.

2. Go to section->product-template.liquid ->find {% if section.settings.show_quantity_selector %} and comment code that in between condition (only product-form__item–quantity this div ). and paste bellow:

 <div class="qtydiv">
          <label for="Quantity" class="quantity-selector">Quantity</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>

3. Go to Asset->theme.scss file and add this code at bottom

.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;}

4. Go to Asset->theme.js and add this code at bottom:

$('.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);
});