To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more

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

Solved
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)

Accepted Solutions
KetanKumar
Shopify Partner
36262 3609 11692

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 60 (60)
KetanKumar
Shopify Partner
36262 3609 11692

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
Dallas
Shopify Staff
Shopify Staff
916 61 199

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

spencer123432
Tourist
4 0 3

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

KetanKumar
Shopify Partner
36262 3609 11692

@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
36262 3609 11692

@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
PageFly-Victor
Shopify Partner
5444 947 2297

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

 

05:27-01.png

 

If it’s helpful to you, please let me know by giving it a like or marking it as a solution.


PageFly #1 Shopify Landing Page Builder - Free to use, 24/7 Live Chat Support.


Hesitate to begin? Check out our top brands with successful stories with PageFly’s Case Studies.

KetanKumar
Shopify Partner
36262 3609 11692

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

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
36262 3609 11692

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
KetanKumar
Shopify Partner
36262 3609 11692

@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
36262 3609 11692

@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
fairmanny
New Member
1 0 0

Hey, how did you get the quantity selector up with impulse?

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