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)
KetanKumar
Shopify Partner
36688 3633 11884

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 62 (62)
glowcreativenz
Shopify Partner
15 1 5

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

Ashleigh
Web Designer | Shopify Partner
Glow Creative
KetanKumar
Shopify Partner
36688 3633 11884

@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
15 1 5

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
36688 3633 11884

@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
36688 3633 11884

@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
36688 3633 11884

@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
36688 3633 11884

@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
36688 3633 11884

@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
36688 3633 11884

@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
Tomoff
Tourist
6 0 5

Perfect! Can you make it look like that? Thank you so much!

KetanKumar
Shopify Partner
36688 3633 11884

@Tomoff 

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

 

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

It works! Thank you!

KetanKumar
Shopify Partner
36688 3633 11884

@Tomoff 

its my pleasure to help us 

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
topdogracing
Visitor
3 0 0

Does anyone have a code to put the qty selector next to the add to cart button in supply theme? 

KetanKumar
Shopify Partner
36688 3633 11884

@topdogracing 

yes, 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
topdogracing
Visitor
3 0 0

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.

ToplineEyewear
Visitor
2 0 0

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

Sunglass retailer since 2001.
OsmanEyser
Visitor
3 0 0
fairmanny
Visitor
1 0 0

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

Dallas
Shopify Staff (Retired)
Shopify Staff (Retired)
916 61 206

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 😊

To learn more visit the Shopify Help Center or the Community Blog.

PageFly-Victor
Shopify Partner
7865 1785 2995

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

 

OsmanEyser
Visitor
3 0 0

ı wanna change my store look by putting add to cart button next to guantitity selector. Please help me? 
https://www.enginshop.com/products/pet-semi-automatic-cat-litter-basin-deodorization-semi-enclosed