Re: Put "Quantity Selector" Next to "Add to Cart" Button in Impulse Theme

Solved

Put "Quantity Selector" Next to "Add to Cart" Button in Impulse Theme

spencer123432
Tourist
4 0 3

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:

 

Screen Shot 2020-05-26 at 6.32.43 PM.png

 

 

 

 

 

 

Thank you!

Accepted Solution (1)
KetanKumar
Shopify Partner
37282 3652 12088

This is an accepted solution.

@spencer123432 

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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 65 (65)

KetanKumar
Shopify Partner
37282 3652 12088

Hello, @spencer123432 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spencer123432
Tourist
4 0 3

Hey @KetanKumar , thanks for your reply! My store is https://loaskin.com/ 🙂

KetanKumar
Shopify Partner
37282 3652 12088

@spencer123432 

Thanks, for the URL.

do you have something like this?

Botanical Beauty Elixir – Loa Skin.png

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spencer123432
Tourist
4 0 3
@KetanKumar This is exactly what I’m looking for!
KetanKumar
Shopify Partner
37282 3652 12088

@spencer123432 

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. 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
KetanKumar
Shopify Partner
37282 3652 12088

This is an accepted solution.

@spencer123432 

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;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
spencer123432
Tourist
4 0 3

@KetanKumar Thank you SO much for your help, it looks incredible!!

JayTheshop5
Shopify Partner
3 0 0

hi @spencer123432  do you mind share your code on how you did the effect on your website?

 

It looks so good!!

 

thank you

LeahandRosemary
Excursionist
31 0 5

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!

 

Screen Shot 2020-07-09 at 7.35.35 PM.png

KetanKumar
Shopify Partner
37282 3652 12088

Hello, @LeahandRosemary 

Welcome to the Shopify community!
Please share your site URL,
So I will check and provide a solution here.
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LeahandRosemary
Excursionist
31 0 5
KetanKumar
Shopify Partner
37282 3652 12088

@LeahandRosemary 

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

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LeahandRosemary
Excursionist
31 0 5

@KetanKumar 

 

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?

 

 

LeahandRosemary
Excursionist
31 0 5

@KetanKumar 

 

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?

 

Screen Shot 2020-07-10 at 1.39.32 PM.png

LeahandRosemary
Excursionist
31 0 5

@KetanKumar 

 

Please disregard! I'm all set. Thank you for your help.

KetanKumar
Shopify Partner
37282 3652 12088

@LeahandRosemary 

Thanka for udpate

sorry i can't see quantity button right now.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
AudreyWatt
Visitor
2 0 2

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.

Screenshot 2021-06-18 at 12.48.55 am.png

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/

KetanKumar
Shopify Partner
37282 3652 12088

@AudreyWatt 

i have check bt i can see can you please show me proper url so i will ck

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Atzoy
Tourist
10 0 2

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

KetanKumar
Shopify Partner
37282 3652 12088

@Atzoy 

sorry for that issue 

your store is password protect 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Atzoy
Tourist
10 0 2

Right, sorry for that the pass is "rowfeu", thank you!

Deoxes
Navigator
361 2 85

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.

MTorralba
Visitor
1 0 0

Hi KetanKumar

 

Would that be applicable to my Supply theme?

I am also looking for ways to do the same button positioning.

 

Hardi
Visitor
2 0 1

@KetanKumar After adding the code nothing happens can you please assist?

KetanKumar
Shopify Partner
37282 3652 12088

@Hardi 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Hardi
Visitor
2 0 1
KetanKumar
Shopify Partner
37282 3652 12088

@Hardi 

Thanks 

sorry doesn't work

KetanKumar_0-1606193377933.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JulieWipeout
Excursionist
11 1 2

Hi do you have a solution for Debut theme please??

 

KetanKumar
Shopify Partner
37282 3652 12088

@JulieWipeout 

Thanks for post 

can you please share store url and issue image so i will guide you.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
austinferrari
Visitor
2 0 1

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

KetanKumar
Shopify Partner
37282 3652 12088

@austinferrari 

yes, please first check the theme customization option

or it can be done custom code sent a personal message

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
austinferrari
Visitor
2 0 1

@KetanKumar 

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.

 

 

KetanKumar
Shopify Partner
37282 3652 12088

@austinferrari 

Yes, is possible to custom code sent me personal message

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JayTheshop5
Shopify Partner
3 0 0

hi @KetanKumar 

I tried your code, but just cant get the add to bag button away from the Qty selection

 

JayTheshop5_0-1611762371213.png

 

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

glowcreativenz
Shopify Partner
17 1 6

Hi there, do you have an equivalent solution for the Debut theme? 

Ashleigh
Web Designer | Shopify Partner
Glow Creative
KetanKumar
Shopify Partner
37282 3652 12088

@glowcreativenz 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
glowcreativenz
Shopify Partner
17 1 6

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.

Ashleigh
Web Designer | Shopify Partner
Glow Creative
Cropsybd
Tourist
4 0 2

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 

KetanKumar
Shopify Partner
37282 3652 12088

@Cropsybd 

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.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cropsybd
Tourist
4 0 2
Hi KetanKumar,

Thank you for your replay.
Here is my shop url-
https://cropsy.com.bd
Store password- dihaud.

KetanKumar
Shopify Partner
37282 3652 12088

@Cropsybd 

thanks, for the details 

sorry but i can't see the quantity button how can i guide you?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cropsybd
Tourist
4 0 2
“ Add to Cart”button is there. I just want to have option to select
quantity next to the “ Add to cart” button on collection page

Thanks for your help.

KetanKumar
Shopify Partner
37282 3652 12088

@Cropsybd 

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>

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Cropsybd
Tourist
4 0 2
Can you please tell me where exactly I have to use this code? which file
and location within the file would be a great help.

Thanks again.

KetanKumar
Shopify Partner
37282 3652 12088

@Cropsybd 

this code add to your collection product cart, or product grid item or product girt etc maybe file snippets file 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tomoff
Tourist
6 0 5

Hey! Can you please help me because when I put the code this happens:Screenshot_4.png

KetanKumar
Shopify Partner
37282 3652 12088

@Tomoff 

sorry for that issue please share store URL.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Tomoff
Tourist
6 0 5

Store URL: www.wanttex.com

KetanKumar
Shopify Partner
37282 3652 12088

@Tomoff 

thanks for store url can you please confirm this look!

KetanKumar_0-1638829742258.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing