A user seeks help positioning the quantity selector on the same line as the “Add to Cart” button in Shopify’s Impulse theme. A community member provides a CSS solution that involves:
Solution Steps:
Key CSS adjustments:
Multiple users successfully implement variations of this code for different themes (Impulse, Debut, Avenue, Brooklyn, Supply). Some encounter issues:
The helper consistently requests store URLs to provide customized solutions for each theme version. Several users report successful implementation, though some require additional adjustments for responsive design and element alignment. The discussion remains active with ongoing requests for theme-specific adaptations, particularly for newer theme versions where file structures have evolved.
Hey everyone!
I’m using the Impulse theme and trying to place the quantity selector on the same line as the add to cart button. Could anyone help with this? I’ve tried a few things but unfortunately, couldn’t get this to work myself.
This is how it currently looks:
Thank you!
Hello, @spencer123432
Thanks for post.
Please share your site URL,
So I will check and provide a solution here.
Hey, there.
This is Dallas from the Shopify Social Care Team.
Although this is isn’t a Shopify theme and I am not able to send this over to my themes team to get this customized for you, I did want to give you a note of information that you might find helpful if you don’t find an answer for this in this forum thread.
Even though our themes team won’t be able to help you, our Shopify Experts should be able to customize this for you. There is a fee associated with them, but they are very talented.
I hope that helps you out! Best of luck ?
Hey @KetanKumar , thanks for your reply! My store is https://loaskin.com/ 
@KetanKumar This is exactly what I’m looking for!
Thanks for update
it’s can be done change back end some code so i need you to store details can you please send a personal message i will guide.
Hi @spencer123432 ,
Do you mean re-positioning the buttons and the quantity selector like this? If that’s the case, I suggest you try this pre-made template. The template is a ready-made product page template, but you can also adjust the color, spacing, or positions of the elements, without coding.
It’s a free template from PageFly. You can view the full version of it here.
not required now any details I will manage can you please add below code
.product__quantity.product__quantity--button {
position: absolute;
margin-top: -25px;
}
.product-single__meta .payment-buttons .cartbutton {
display: inline-block;
width: calc(100% - 110px);
margin-left: 110px;
}
.product-single__meta .js-qty__num {
padding: 11px 25px;
}
@KetanKumar Thank you SO much for your help, it looks incredible!!
Hi @KetanKumar
I use the same theme and put that code in but this is what i see. Any help on how to correct it would be great! Thank you!
Hello, @LeahandRosemary
Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
Thanks for URL.
Add this code
.product__inventory {
margin-top: -38px;
}
.add-to-cart.btn--secondary {
width: calc(100% - 110px);
margin-left: 110px;
}
Thank you - I changed it a little to make it the same width as the add to bag button. But as you can see below, when i click plus or minus it does not change the quantity and it has now removed the functionality of my cart drawer popping out on the side when i click add to bag.
Any thoughts on how too correct?
Strangely, when i removed “inventory notice” button for the product page it moved the quantity bar. Do you know how to fix this or make it relative so that for the inventory notice button if certain products are low on inventory it does not move the quantity button?
Please disregard! I’m all set. Thank you for your help.
Hey, how did you get the quantity selector up with impulse?
Hi KetanKumar
Would that be applicable to my Supply theme?
I am also looking for ways to do the same button positioning.
