Shopify themes, liquid, logos, and UX
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!
Solved! Go to the solution
This is an accepted solution.
not required now any details I will manage can you please add below code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.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; }
Hello, @spencer123432
Thanks for post.
Please share your site URL,
So I will check and provide a solution here.
Thanks, for the URL.
do you have something like this?
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.
This is an accepted solution.
not required now any details I will manage can you please add below code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.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; }
hi @spencer123432 do you mind share your code on how you did the effect on your website?
It looks so good!!
thank you
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
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
.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?
Thanka for udpate
sorry i can't see quantity button right now.
This looks amazing!
How did you get the Quantity above the box, in the smaller text. This is mine and I'd love to lose the black quantity box and have the smaller qty selection box on the same line as add to cart.
I'd love to have the + & - in the box too!
Thanks
Audrey
My store is in build mode, but here's a preview - https://f55gnw8g4si8d3xr-26536935529.shopifypreview.com/
i have check bt i can see can you please show me proper url so i will ck
Hey KetanKumar, could I trouble you for the same thing as everyone else, I need to get the QTY and Add to cart in the same line, I´m Using the Brooklyn theme, the URL is www.rakunkids.cl
thank you so much
sorry for that issue
your store is password protect
Right, sorry for that the pass is "rowfeu", thank you!
Hello, can you also help me with that quantity? I tried putting some codes from the forum but for me, nothing happens. My web dehome.co.uk and theme Impluse, thanks.
Hi KetanKumar
Would that be applicable to my Supply theme?
I am also looking for ways to do the same button positioning.
Welcome to the Shopify community!
and Thanks for your Good question.
Please share your site URL,
So I will check and provide a solution here.
I got it working now but I need to move down Buy it now button
Thanks
sorry doesn't work
Hi do you have a solution for Debut theme please??
Thanks for post
can you please share store url and issue image so i will guide you.
Hi @KetanKumar
How do I move my product description below the product title?
And then I want the quantity selector to be on the same exact line as the "add to cart button"
And then I want the "Add to cart button" to be on top of the PayPal checkout and "ask a question" button.
Any help with coding would be amazing.
Thanks!
Site url is here:
https://momnemcoffee.com/collections/merchandise/products/mom-n-em-camper-mug
yes, please first check the theme customization option
or it can be done custom code sent a personal message
is it possible to have the custom code by chance? I’ve checked the theme and I cannot figure out how to do it.
thanks for any help.
Yes, is possible to custom code sent me personal message
hi @KetanKumar
I tried your code, but just cant get the add to bag button away from the Qty selection
.product__quantity.product__quantity--button {
position: absolute;
margin-top: -25px;
}
.product-single__meta .payment-buttons .cartbutton {
display: inline-block;
width: calc(90% - 120px);
margin-left: 210px;
}
.product-single__meta .js-qty__num {
padding: 11px 25px;
}
.product__inventory {
margin-top: -38px;
}
.add-to-cart.btn--secondary {
width: calc(80% - 110px);
margin-left: 110px;
}
Appreciate your advise.
thank you.
Hi there, do you have an equivalent solution for the Debut theme?
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
Thanks, it is a client's which isn't live yet so I won't post it. But it is a standard Debut website, it would work the same as any other using the theme.
Hi, I am trying to do the same thing in my store. Cannot find "Asset->/theme.scss.liquid-" I'm using "Avenue" theme. Can you please help?
Thanks
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
thanks, for the details
sorry but i can't see the quantity button how can i guide you?
oh I see can you please try this similar code
<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
<input min="1" type="number" id="quantity" name="quantity" value="1"/>
<input type="submit" value="Add to cart" class="btn" />
</form>
this code add to your collection product cart, or product grid item or product girt etc maybe file snippets file
Hey! Can you please help me because when I put the code this happens:
sorry for that issue please share store URL.
thanks for store url can you please confirm this look!
Perfect! Can you make it look like that? Thank you so much!
thanks for confirm please try this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
@media only screen and (min-width: 769px){
.product-single__form .add-to-cart {
margin-top: -80px;
margin-left: 120px;
width: calc(100% - 120px);
}
}
It works! Thank you!
its my pleasure to help us
Does anyone have a code to put the qty selector next to the add to cart button in supply theme?
yes, please share store url
Cascade Innovations ~ Customize Supply ~ Shopify (cascade-innovations.myshopify.com) this is the supply theme. I don't currently have it published but I can do so if needed.
I am also using IMPULSE theme, V6.0.1. I added this code to the bottom of the Asset->/theme.scss.liquid however it did nothing on my product page. Do you think it might be something within the newer update since it's now 2 years later? Thank you
Hey, how did you get the quantity selector up with impulse?
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 😊
Dallas | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog
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.
User | RANK |
---|---|
74 | |
69 | |
62 | |
59 | |
43 |
As a business owner, have you ever wondered when your customer's first impression of yo...
By Skye Jun 6, 2023We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023