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>
