How to add add to cart button with quantity plus minus in Shopify website

Add CSS to theme.css file


<style>
.cpb-category {
    width: 200px;
    float: left;
}
.cpb-product-actions {
    clear: both;
 
}
#product-builder .cpb-theme-provider.aloha .cpb-layout:not(.cpb-is-admin) .cpb-product-actions {
    margin-top: 70px;
    padding: 60px 20px !important;
}

#product-builder button, #product-builder input, #product-builder optgroup, #product-builder select, #product-builder textarea {
    font-family: sans-serif;
    font-size: 100%;
    font-size: 19px;
    line-height: 1;
    margin: 0;
}
 input#input-quantity {
 border: none;    
    background-color: inherit;
    font-size: 16px;
       max-width: 53px;
   padding: 0px;
}
 
span.input-group-btn.item-count-left{
  float:left;
  width:50px;
  }
span.input-group-btn.item-count-right{
  float:right;
   width:50px; 
}
  .input-group.number-spinner {
    width: 100%;
    vertical-align: middle;
    /*display: inline-table;*/
}
  .input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.form-add-to-cart{
  text-align:center;
}
input.btn.add-to-cart-btn {
    margin-top: 20px;  
}
button.btn.btn-default.btn-number {
    padding: 4px 8px;
}
.grid-view-item {
    margin: 20px auto 35px;
}
@media only screen and (max-width: 749px)
  {

  }
</style>

Add this code after end of file product-card-grid.liquid file under snippets


<form action="/cart/add" method="post" class="form-add-to-cart">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<select name="id">{% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }}</option>{% endfor %}</select>
{% endif %}
<div class="input-group number-spinner number-spinner{{ product.id }}">
			      <span class="input-group-btn item-count-left">
					<button type="button" class=" btn btn-default btn-number" data-dir="dwn"><i class="fa fa-minus"></i></button>
			      </span>
				<input type="text" readonly name="quantity" value="1" id="input-quantity" class="form-control input-number text-center">
				  <span class="input-group-btn item-count-right">
					<button type="button" class=" btn btn-default btn-number" data-dir="up"><i class="fa fa-plus"></i></button>
				  </span>
			    </div>
  <input type="submit" value="Add to cart" class="btn add-to-cart-btn" />
  <input type="hidden" name="return_to" value="back" />
</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
  $(document).on('click', '.number-spinner{{ product.id }} button', function () {    
	var btn = $(this),
		oldValue = btn.closest('.number-spinner{{ product.id }}').find('input').val().trim(),
		newVal = 1;
			
	if (btn.attr('data-dir') == 'up') {
		newVal = parseInt(oldValue) + 1;
	} else {
		if (oldValue > 1) {
			newVal = parseInt(oldValue) - 1;
		} else {
			newVal = 1;
		}
	}
	btn.closest('.number-spinner{{ product.id }}').find('input').val(newVal);
});
</script>

Leave a Reply