Add Quantity Buttons to Debut Theme

Solved
New Member
3 0 0

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

Screen Shot 2019-10-25 at 4.24.29 PM.pngVenture Theme Example (Barlow Backpack - Boxing Bull)

instead of this?

Screen Shot 2019-10-25 at 4.23.59 PM.pngDebut's Default

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

Thank you so much,
Owen

0 Likes

Success.

Shopify Expert
2488 417 525

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 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
New Member
3 0 0

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.pngScreen Shot 2019-10-26 at 12.16.15 PM.pngEnjoy 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

0 Likes
New Member
1 0 0

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

 

Thanks,

0 Likes
Shopify Expert
2488 417 525

Send your store url 

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
New Member
3 0 0

 


@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 :)

0 Likes
New Member
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.

0 Likes
Shopify Expert
2488 417 525

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

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
New Member
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.

0 Likes
Shopify Expert
2488 417 525

Send you store url and code for product page because cart popup is custom so you have to set by your custom 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