Solved

Add Quantity Buttons to Debut Theme

OHutchyHutch
Tourist
7 0 1

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)Venture Theme Example (Barlow Backpack - Boxing Bull)

instead of this?

Debut's DefaultDebut's Default

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

Thank you so much,
Owen

Accepted Solution (1)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Hi @OHutchyHutch 

Follow this:

1. Go to theme customize theme editor->select product page->tick "Show quantity selector" box from left side.

qty.png

 

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:

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

3. Go to Asset->theme.scss file and add this code at bottom

.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;line-height: 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;}

4. Go to Asset->theme.js and add this code at bottom:

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

Let me know if you need help.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 77 (77)

Jasoliya
Shopify Expert
4808 621 1217

This is an accepted solution.

Hi @OHutchyHutch 

Follow this:

1. Go to theme customize theme editor->select product page->tick "Show quantity selector" box from left side.

qty.png

 

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:

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

3. Go to Asset->theme.scss file and add this code at bottom

.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;line-height: 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;}

4. Go to Asset->theme.js and add this code at bottom:

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

Let me know if you need help.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
OHutchyHutch
Tourist
7 0 1

That worked, thank you so much! Just a few quick questions, the buttons get pushed off to a new line because we have a box to select sizes that is quite large. Do you happen to know where I can find the scss for the box to change the size? Also as you can see the text is different, how can we go about making the text for quantity to be the same font as Size? And one last thing, when I add to cart it adds the correct number of items however the cart notification only says I added 1?Screen Shot 2019-10-26 at 12.03.33 PM.pngEnjoy a test picture of my dog :)Enjoy a test picture of my dog 🙂

Sorry for bugging you with even more questions, they're just tiny details now, though! 

I really appreciate it, thank you!
Owen

yesnatura
Visitor
1 0 1

Same here! Would love to know how to show correct # of items in cart (under Qty) after using that method.

 

Thanks,

Jasoliya
Shopify Expert
4808 621 1217

Send your store url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
OHutchyHutch
Tourist
7 0 1

 


@yesnatura wrote:

Same here! Would love to know how to show correct # of items in cart (under Qty) after using that method.

 

Thanks,


If you are using Debut, I was able to solve the issue of the incorrect number being displayed in the cart notification by editing the cart-popup.liquid

It has been awhile since I have done it and I don't remember what it initially was and what I changed but this is what I currently have if it helps. It is the default debut popup but with quantity fixed.

{%- style -%}
  {% assign cart_popup_box_shadow = settings.color_borders | color_modify: 'alpha', 0.5 %}

  .cart-popup {
    box-shadow: 1px 1px 10px 2px {{ cart_popup_box_shadow }};
  }
{%- endstyle -%}

<div class="cart-popup-wrapper cart-popup-wrapper--hidden" role="dialog" aria-modal="true" aria-labelledby="CartPopupHeading" data-cart-popup-wrapper>
  <div class="cart-popup" data-cart-popup tabindex="-1">
    <h2 id="CartPopupHeading" class="cart-popup__heading">{{ 'cart.popup.added_to_cart' | t }}</h2>
    <button class="cart-popup__close" aria-label="{{ 'general.accessibility.close_modal' | t }}" data-cart-popup-close>{% include 'icon-close' %}</button>

    <div class="cart-popup-item">
      <div class="cart-popup-item__image-wrapper hide" data-cart-popup-image-wrapper>
        <div class="cart-popup-item__image-placeholder" data-cart-popup-image-placeholder>
          <div class="placeholder-background placeholder-background--animation"></div>
        </div>
      </div>
      <div class="cart-popup-item__description">
        <div>
          <div class="cart-popup-item__title" data-cart-popup-title></div>
          <ul class="product-details" aria-label="{{ 'cart.popup.product_details' | t }}" data-cart-popup-product-details></ul>
        </div>
        <div class="cart-popup-item__quantity">
          <span class="visually-hidden" data-cart-popup-quantity-label></span>
          <span aria-hidden="true">{{ 'cart.popup.quantity' | t }}:</span>
          <span aria-hidden="true" data-cart-popup-quantity></span>
        </div>
      </div>
    </div>

    <a href="{{ routes.cart_url }}" class="cart-popup__cta-link btn btn--secondary-accent">
      {{ 'products.product.view_cart' | t }} (<span data-cart-popup-cart-quantity></span>)
    </a>

    <div class="cart-popup__dismiss">
      <button class="cart-popup__dismiss-button text-link text-link--accent" data-cart-popup-dismiss>
        {{ 'cart.general.continue_shopping' | t }}
      </button>
    </div>
  </div>
</div>


if this doesn't work then it is one of the other things I changed. Please pm me and I'll try to help you out 🙂

amohssin
Shopify Partner
1 0 0

Please, I followed all the steps, but by the end, I have a tow quantity button.

how can I remove the olde one?

Thank you.

Jasoliya
Shopify Expert
4808 621 1217

Go to section->product-template.liquid ->find {% if section.settings.show_quantity_selector %} and comment code that in between condition

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
MadHatter
Tourist
8 0 2

I don't understand a lot of the grammar. I finally realized what was meant by comment code, but still have no idea what "that in between condition" means. This seems like an awful lot of code to simply add a different style of buttons next to the quantity field. I really doubt this is the best method. 

bhupindersb
Visitor
1 0 0

The code is not working, it still shows wrong quantity in the popup box. The Quantity inside the View Cart button is correct but not in the one next to the Title. Please help.

Jasoliya
Shopify Expert
4808 621 1217

Send you store url and code for product page because cart popup is custom so you have to set by your custom code

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
benjk
Excursionist
59 2 1

I am using the Debut theme and I followed your code however the javascript doesn't seem to wanna work for me

Jasoliya
Shopify Expert
4808 621 1217

HI @benjk 

have you added js code in asset->theme.js file and still not working then its issue of your theme, so may be i have to check in code. so send your store url 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
saiyam11
Tourist
17 0 1

hey i followed the code but nothing happened

finchdeal.com

pass: saiyam

Jasoliya
Shopify Expert
4808 621 1217

Cant see any qty button on product page

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
saiyam11
Tourist
17 0 1

I DONT KNOW HOW TO ADD I DID SOME OF YOUR CODING BUT COULDN'T GET IT 

sachinx
New Member
6 0 0

I need to add a quantity selector for each product in debut theme but I couldn't find any  option to do it 

Jasoliya
Shopify Expert
4808 621 1217

If you have not qty box on your product page then first enable it from theme editor.

1. go to theme editor->product page->from left side section open "product" tab and then tick qty box option.

2. After that add my given code in file by following steps. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4808 621 1217

If you cant do your self then you have to hire developer to do this.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
saiyam11
Tourist
17 0 1

no i can do

 

richiesun
Visitor
3 0 1

To properly show the Qty value in the cart popup notification, make sure you add the data field, 'data-quantity-input' into the <input> line. 

 

Screen Shot 2020-05-01 at 1.47.41 AM.png

Johannis
Tourist
4 0 0

Hello, 

 

I managed to follow the steps before but this one I got slightly confused. 

 

I would love to change the quantity buttons in the cart page and not the cart popup. 

 

You mentioned changing the input line. Where do I need to change it?

 

Screenshot 2020-05-08 at 10.15.53.png

Jasoliya
Shopify Expert
4808 621 1217

You need to do this code in section->cart-template.liquid file but this code only work for product page not cart page.

For that need whole new code with its different Js because on cart page we have multiple qty box t time so cant give you code for that.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Johannis
Tourist
4 0 0

Thank you for the quick response. 

 

What JS do I need to add to have the same quantity boxes but in the cart page also. 

 

Because my cart page looks like this at the moment. 

 

Screenshot 2020-05-08 at 10.27.12.png 


Jasoliya
Shopify Expert
4808 621 1217

You have to do design first and then we can create Js base on selector and for that need custom code. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
amelia22
Tourist
3 0 1

Yeah! It works. Thanks!


@richiesun wrote:

To properly show the Qty value in the cart popup notification, make sure you add the data field, 'data-quantity-input' into the <input> line. 

 

Screen Shot 2020-05-01 at 1.47.41 AM.png


 

ssociety2020
Visitor
2 0 0

image.png

Screenshot from Debut theme - go to customize option and then select 'Product pages' option from drop down menu. By default "home page" is selected here.

First need to select "Product pages" on right and then qty selector with pop up.

Good luck.

 

 

woodgradro
Tourist
5 0 1

Hello! Where should I add this data field? 

kumararavinthfg
Shopify Partner
11 0 3

I am facing the same issue. Cart count showing quantity: 1..  Can anyone pls help me on that??

 

amelia22
Tourist
3 0 1

How should I change the font and add the border of the Quantity button?

Jasoliya
Shopify Expert
4808 621 1217

Hi @amelia22 

You can try this css for qty box css:

Add in asset->theme.scss file

#Quantity-product-template{font-family: cursive; border: 2px solid red;}

If you have standard debut theme then it will work other wise send me store url. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
amelia22
Tourist
3 0 1

Hi, I am using the Debut Theme. The new css that you mentioned is for the original template. Here is the sample of the border that I would like to add for the qty box. Can you tell me how and which line under theme.scss should I insert the new css? Thanks.

 

Quantity_add border.png

 

Jasoliya
Shopify Expert
4808 621 1217

Send your store url so i can check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
MariaAmalia
Visitor
1 0 0

Hello!

 

I am having the same issue. We are using Debut and we need to be able to add quantities to product pages. 

 

Could you help me?

 

FilomenaHome.com

 

Thanks, 
Maria 

andyM291
Visitor
3 0 0

Hi.

I activated the quantity in theme customize editor. Do I still need to do do input the code?

 

THANKS

Jasoliya
Shopify Expert
4808 621 1217

If you have shopify default theme then you can enable just from theme editor no need code.

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
ssociety2020
Visitor
2 0 0
No need for any coding after that.
Remco112
Excursionist
35 4 4

Thank you! this worked!

Midtown1
Visitor
2 0 0

Hi,

Where do I insert the code when using the Empire theme as there is not product-template.liquid in the sections?

Thank you

Mariano7
Excursionist
14 0 4

Hi @Jasoliya, could you please write the instruction number 2 again, in a different way? I'm not sure I understand where to place your code.

Screenshot 2020-11-29 at 18.08.21.png

This is the original I have in Debut theme - product-template.liquid

            {% if section.settings.show_quantity_selector %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
              </div>
            {% endif %}

 Thanks a lot!

Jasoliya
Shopify Expert
4808 621 1217

Comment from "<div class="product-form__item">" to its end <div>

and add my code in between "<div class="product-form__controls-group">"...to </div>

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Expert
4808 621 1217

Then need to check in code because if any selector different then it will not work perfect and cant give all 100% solution from here 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mariano7
Excursionist
14 0 4

Thanks, @Jasoliya. The element appears but it doesn't react to action on "+" button 😕 I click but the counter stays on 1.

Screenshot 2020-12-01 at 15.33.47.png

 

Can you think of a fix? URL is https://genki-natural.myshopify.com/ (Pwd: ketan1) or would you like a staff account to see it better?

Jasoliya
Shopify Expert
4808 621 1217

As i can see you have new debut theme and in new theme they are not proving Jquery file so you must have to do JavaScript code for that, or you can add Jquery library to theme.liquid file, issue generating because Jquery lib not found on store. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Mariano7
Excursionist
14 0 4

@Jasoliya Thank but if I could react with a meme, it would be current US president doing "Sounds good, doesn't work" :'D In another words - can you help me here or is this out of your scope? I feel stuck.

Jasoliya
Shopify Expert
4808 621 1217

As i told you we have to do it by Javacrip or you can add Jquery library or PM me 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
LobsterNoodels
Visitor
2 0 2

After being disappointed by the solutions to this thread I have created my own that should work as of Debut 17.10.0.

As Debut no longer natively supports JQuery or SCSS, this works without installing anything.

This is based on @Jasoliya's initial solution.

 

1. Go to theme customize theme editor->select product page->tick "Show quantity selector" box from left side.

2. Go to section->product-template.liquid -> press CTRL+F,  and search for {% if section.settings.show_quantity_selector %} . Replace your code with this below.

            {% if section.settings.show_quantity_selector %}
        
			{% comment %}
              <div class="product-form__controls-group">
                <div class="product-form__item">
                  <label for="Quantity-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
                  <input type="number" id="Quantity-{{ section.id }}"
                    name="quantity" value="1" min="1" pattern="[0-9]*"
                    class="product-form__input product-form__input--quantity" data-quantity-input
                  >
                </div>
              </div>
			{% endcomment %}  

            <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="" data-quantity-input>
                <span class="btnqty qtyplus icon icon-plus">+</span>
              </div>
            </div>
        
            {% endif %}

When Jasoliya mentions 

 comment code that in between condition (only product-form__item--quantity this div ). and paste bellow:

They mean to comment out the existing code, not to delete it. Commenting code means it will still be present in your files, but not display on your website. (incase you would like to revert your changes in the future for example)

Commenting out code in Shopify's liquid language is done as shown above with {% comment %} and {% endcomment %}.

 

3. Go to Asset->theme.css file and add this code at the bottom. 

.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;
	 line-height: 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;
}

This is called CSS. If you would like to modify the look of the quantity selector, this part is what you would want to modify. 

 

4. Go to Asset->theme.js and add this code at the bottom:

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

 

You are welcome 

 

 

 

Jess06
Visitor
2 0 1

Thank you @LobsterNoodels soooo much. After countless attempts, this one works.  

LobsterNoodels
Visitor
2 0 2

Hi @Jess06, I'm glad I could help!

I've spent a lot of time working on this so ill just provide a follow up in hopes it can help someone who stumbles across this.

If you are considering adding the custom quantity selector to your cart page, it is possible but much more complex if you have automatic cart updates enabled.

I had to rewrite all of my javascript code, as well as heavily modify the cart-template.liquid page to get it to function.

It is not clean, took a long time, and I am just sharing my experience in case you are considering attempting something like this.

I'm happy to share my code if you are interested but there is no guarantee it'll work on your end as I've made a lot of changes and didn't document it.

rbelle
Excursionist
31 0 14

Hi there!

Thank you so much for this fix, I really appreciate it.

Everything seems to be working fine, even automatic updates in the cart. The only thing seems to be the cart popup, where only the quantity at the top right is fixed at 1.

For example, I've just added 3 of this item here and it does add 3 blazers to the cart, but "Qty:" remains at 1.

rbelle_0-1619099557924.png

Not too adept at javascript, would you be able to share any insight on this?

Thank you again 🙂