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

Solved
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
Shopify Expert
665 170 199

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

Success.

Shopify Partner
1140 92 138

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

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
1 Like
Shopify Partner
100 20 17

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
1 Like