Product Page - Quantity selector on the same line as the Add to Cart button - Debut theme

Solved
Highlighted
Tourist
6 0 0

Hi

Can anyone assist with a way to have the quantity selector (single item) on the same line as the Add to cart button so that they are not on 2 lines please. - Product Page

URL: https://leafhealthproducts.com/

pass: fleuza

 

Thank you in advance

0 Likes
Highlighted
Shopify Expert
667 170 233

Hi, @leafhealth ,

This is Evita from On The Map.

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.product-form {
    display: flex;
    align-items: center;
}
.product-form__controls-group {
    display: unset!important;
}
.product-form__cart-submit {
    width: 390px;
}
.product-form__controls-group--submit {
    margin-top: 0!important;
}

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
Highlighted
Shopify Expert
1381 112 211

This is an accepted solution.

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.product-form__cart-submit{
min-width:200px;
}

.product-form__controls-group {
display: inline-block !important;
}

Highlighted
Shopify Partner
101 20 21

Hi @leafhealth 

 

Hope you are doing well

 

For this please go to:

 Edit code>assets>theme.scss

 

Add this code at the very bottom of theme.scss

 

@media only screen and (min-width: 768px) {
.product-form {
    display: flex;
    align-items: center;
}
.product-form__controls-group {
    display: unset!important;
width: 90px; } .product-form__cart-submit { width: 390px; } .product-form__controls-group--submit { margin-top: 0!important; } }
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: codecorneres@gmail.com
Skype: code.corners
Highlighted
New Member
1 0 1

I have a minimal thema and am trying to add the quantity selector along with add to cart

 

I've tried all the different codes proposed here upon the style.css but none is working

 

Can anyone help?

Highlighted
New Member
2 0 0

I am also having the same issue trying to get both the add to cart button and quantity selector on the same line on the minimal theme! 

 

 

Any help would be awesome! Thank you!

0 Likes
Highlighted
New Member
2 0 0

I also would like to do this on another one of my sites which is using the Venture theme! Any help would be greatly appreciated :)

 

Thank you in advance

0 Likes
Highlighted
New Member
2 0 0

Hello there. 

Ive seen your forum post and also checked your website, can you please help me how did you manage to put the add to cart button and the quantity selection in the same line? 

 

thank you

0 Likes
Highlighted
New Member
1 0 0

Hello,

thank you for your help, has already brought me further.
But I still have the following question.

Which code is necessary if I want "variant selection" and "quantity selection" in one line and the "add to cart button" in the next line?

Thank you.

0 Likes