Shopify themes, liquid, logos, and UX
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
instead of this?
I don't care about the font, I just like the buttons.
Thank you so much,
Owen
Solved! Go to the solution
This is an accepted solution.
Follow this:
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 ->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.
This is an accepted solution.
Follow this:
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 ->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.
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?
Sorry for bugging you with even more questions, they're just tiny details now, though!
I really appreciate it, thank you!
Owen
Same here! Would love to know how to show correct # of items in cart (under Qty) after using that method.
Thanks,
Send your store url
@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 🙂
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.
Go to section->product-template.liquid ->find {% if section.settings.show_quantity_selector %} and comment code that in between condition
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.
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.
Send you store url and code for product page because cart popup is custom so you have to set by your custom code
I am using the Debut theme and I followed your code however the javascript doesn't seem to wanna work for me
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
hey i followed the code but nothing happened
finchdeal.com
pass: saiyam
Cant see any qty button on product page
I DONT KNOW HOW TO ADD I DID SOME OF YOUR CODING BUT COULDN'T GET IT
I need to add a quantity selector for each product in debut theme but I couldn't find any option to do it
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.
If you cant do your self then you have to hire developer to do this.
no i can do
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.
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?
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.
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.
You have to do design first and then we can create Js base on selector and for that need custom code.
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.
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.
Hello! Where should I add this data field?
I am facing the same issue. Cart count showing quantity: 1.. Can anyone pls help me on that??
How should I change the font and add the border of the Quantity button?
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.
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.
Send your store url so i can check
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
Hi.
I activated the quantity in theme customize editor. Do I still need to do do input the code?
THANKS
If you have shopify default theme then you can enable just from theme editor no need code.
Thank you! this worked!
Hi,
Where do I insert the code when using the Empire theme as there is not product-template.liquid in the sections?
Thank you
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.
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!
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>
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
Thanks, @Jasoliya. The element appears but it doesn't react to action on "+" button 😕 I click but the counter stays on 1.
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?
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.
@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.
As i told you we have to do it by Javacrip or you can add Jquery library or PM me
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
Thank you @LobsterNoodels soooo much. After countless attempts, this one works.
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.
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.
Not too adept at javascript, would you be able to share any insight on this?
Thank you again 🙂
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024