Place the add to cart button next to quantity box in Debut theme

Highlighted
Tourist
6 0 2

Hey guys,

Shop url: https://aquamag.nl/products/aquamag-magiko

I want to place the add to cart button right next to the quantity box. I've tried to add some css to the 'product-form__controls-group' element (float: left). But the add to cart button is not in line with the quantity box then. I also tried to lower the add to cart button with margin-top, but when I change the screen width to mobile, the height changes again. Also the width of both items are a problem to get right for me.

I'm sure there must be a way to place them next to each other nicely, just can't figure out how. Anyone who can help me out here?

Thanks!

1 Like
Highlighted
Shopify Partner
1619 352 476

Hey @dennisve,

In Debut theme, Quantity box selector and Add to cart button is totally different part in liquid. As you need to add to cart button beside the quantity selector box then we'll have customize liquid code properly and so it should work properly on mobile devices also.

This is a customization work. So I would suggest hiring a Shopify developer for this.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
305 33 54

@dennisve 

Please give your store access. to check this and provide solution. I have sent store access request from our Shopify Partner account. 

Thanks,
Ittanta Technologies Pvt. Ltd. | Shopify Expert
If reply is helpful, please Like and Accept Solution.
To hire us, contact us at info@ittanta.com
0 Likes
Highlighted
Tourist
6 0 2

@IttantaTech 

 

I dont see any requests yet. Where can I find it?

0 Likes
Highlighted
Shopify Partner
1619 352 476

Hey @dennisve 

please try this 

add code assets/theme.scss.liquid bottom of the file.

 

@media only screen and (max-width:767px) {
.product-form__item .product-form__cart-submit{position: absolute; top: 13.6%; width: 165px;left: 41%; max-width: 200px;}
}
@media only screen and (min-width:768px) {
.product-form__item .product-form__cart-submit{position: absolute; top: 9%; width: 192px;left: 60%; max-width: 200px;}
}

 

Hope this will work for you.


Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Tourist
6 0 2

Hi @dmwwebartisan 

 

Thanks for your reply. Unfortunately it doesn't work correctly. The ATC button jumps around everywhere when changing the screen size

0 Likes
Highlighted
Shopify Partner
1619 352 476

Hello @dennisve 

Thanks for message  and that is code customization work please hire shopify expert or me .

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes