Add Quantity Buttons to Debut Theme

[OHutchyHutch]

I currently have a quantity setup on my products, however the Debut theme doesn't have any css for the increase/decrease value buttons and so it uses the default for your device. How can I make my quantity field look like this

Venture Theme Example (Barlow Backpack - Boxing Bull)

instead of this?

Debut's Default

I don't care about the font, I just like the buttons. 

Thank you so much,
Owen

[Jess06]

Hello,

The only thing I can recommend is to recheck the codes posted above. My carts are updating correctly, so I'm not sure what the issue may be. Maybe @LobsterNoodels can help with more insight

[saiyam11]

CODE DIDNOT WORK

[Dixravi]

@Jasoliya I have followed all the steps you shared and successfully added the Quantity box there... But it is not working, it contains both the buttons + - left and right side but they both are not clickable.

I am a bit confused with this step but I commented on the old quantity selector code. 

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:

Can you please guide me on what to do now?

[Jasoliya]

Which  theme you have?

[Dixravi]

I am using the Debut theme, please help me in adding the product quantity box? I tried your method but it was not working, I was seeing the box but not clickable.

[Jasoliya]

Hi @Dixravi 

If you follow proper step then it must work because its for debut theme.

which issue getting? send e store url and password. 

[Dixravi]

@Jasoliya As I already said, I have followed the entire tutorial and it worked but the quantity selector is not working. I mean the + and - buttons are not clickable and not adding the quantity as well.

I am a bit confused about the second step, can you please explain me: 

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:

Thanks for your help

[Jasoliya]

Send sore url will check

[Dixravi]

I have removed that because it wasn't working well and hurting my customers and eventually, I was loosing sales.

[Jasoliya]

ok then without checking code i cant say anything,

[Dixravi]

@Jasoliya Okay I understand it completely, can you let me know what 2nd step means?  

[gravpro]

@Jasoliya  I'm having the same issue. Followed the tutorial exactly (with a few minor css changes) but as soon as I publish the code, clicking the "-" or "+" buttons doesn't do anything.

I'm using the Debut theme. Here's a link to my product page. Thanks so much!

[Jasoliya]

Hi,

That's because of you have new theme and in new theme shopify removed Jquery library in build so you have to add Jquery library to make it work, 

You should have to do this:

1. copy code from this library: 

2. open your asset->vendor.js file and add whole code at bottom of file.

Note: if you don't want to use Jquery code then you must have to convert my Jquery code in JavaScript.

[gravpro]

@Jasoliya I'm not seeing the vendor.js file you're referencing. Is there a way around this?

[gravpro]

Got it working by adding the following snippet in my header.liquid file just before </header>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

[Jasoliya]

Yes its same thing but by my given way it will not affect on speed, and direct file adding will bit affect on Js code rendering. 

try to add in top of theme.js file if work. 

[MedSaad]

i tried this code on narrative theme but the minus plus buttons aren't working can you help me here please

[Aravinthmoshi]

Hi,

I have added your code. It is working fine. But the problem is quanitity is not taken in cart section while adding the product. it is showing the quantity:1.  can anyone help me on that?

Thanks,

Aravinth.

[paint-cabin111]

Hello, I know this is an old thread but your solution helped me out, however I've run into a new issue implementing it. The plus button is not rendering correctly, it is rendering as a square symbol. I'm not sure what changes need to now be made to the code in order to have it render correctly?

Thanks, let me know if I can provide any more info.

[Artom]

Hey!
I need help, I added two codes in .html and .css. Took its proper form on the product page, but after the code, for adding to .js there is no functionality.

Thanks.

[Jasoliya]

send me store url or pm me

[Artom]

Jasoliya, 

Thank you!

[Jasoliya]

Where you have added js code? 

[Artom]

this code

document.getElementsByClassName("qtyminus")[0].addEventListener("click", function (){quantityChange("btn_minus");});

document.getElementsByClassName("qtyplus")[0].addEventListener("click", function (){quantityChange("btn_plus");});

function quantityChange(button) {

var input_element = document.getElementById("quantity");

var qty = parseInt(input_element.value);

  if (button == "btn_plus") {

    input_element.setAttribute("value", qty=qty+1); 

    } else if (button == "btn_minus" && qty > 1) {

    input_element.setAttribute("value", qty-1); 

    }

};

but not this

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

[Artom]

Jasoliya, How to add the same look to the cart page as on the product page?

[Jasoliya]

You can add same type of html in section->cart-template.liquid file but you have to manage js code more 

[Artom]

How to understand you about js? do you need to add something or refer to the pro?

[Jasoliya]

need to do whole js code based on your store so  cant do from front side just need store access pm me,