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

Highlighted
Shopify Partner
6 0 2

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.

 

Highlighted
Tourist
5 0 4

Did you ever find a solution?

0 Likes
Highlighted
Shopify Expert
3897 559 935

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.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Tourist
14 0 1

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
Highlighted
Shopify Expert
3897 559 935

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

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
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
3897 559 935

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.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Excursionist
21 0 5

Hi, Jasoliy,

I followed your steps  in my Minimal theme.

Your instruction is very helpful.

But finally I get additional + and - , like below image, please note the red circle.

Could you kindly tell me how to remove the additional smaller ? Many thanks! 批注 2020-04-19 134336.jpg

 

0 Likes
Highlighted
Shopify Expert
3897 559 935

 You can remove "-" and "+" from <span>

 

 <span class="btnqty qtyminus icon icon-minus">-</span>
 <span class="btnqty qtyplus icon icon-plus">+</span>

Remove "-" and "+" from above html.

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Excursionist
21 0 5

Wow, I got it.  you are really the BIGGEST one!   Many thanks for your help!

0 Likes