Plus (+) Minus (-) Quantity Selector on Supply Theme Using Cart Page

Highlighted
Shopify Partner
6 0 1

Hi all,

I'm looking to replace the text box quantity selector with a plus minus quantity selector in supply theme on product page and cart page through the standard non-ajax cart page. It would be great if someone can help me with a step by step on putting in the html, CSS and JS code at the right files specifically to the supply & brooklyn theme. Appreciate the help here. Thanks.

 

1 Like
Highlighted
Tourist
5 0 2

Did you ever find a solution?

0 Likes
Highlighted
Shopify Expert
2902 497 665

Follow this:

Add this html in section->product-template.liquid and section->cart-template.liquid

 

<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>

Add this css in Asset->theme.scss->at end of file:

 

 

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

 

Add this Js in Asset->theme.js- >at end of file

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

 

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Highlighted
New Member
14 0 0

Hi! Thank you for these codes, they seem pretty good. I paste them all except the first one, because I can't find where to paste them. Which code should I erase to paste this one?

0 Likes
Shopify Expert
2902 497 665

You can find quantity from page and comment it and paste my code 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
New Member
1 0 0

Hi Jasoliya

 

 

0 Likes
Highlighted
Shopify Expert
2902 497 665

Hi @Florian_T 

Go to Section->product-template.liquid and find below code and comment it:

<input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes