Quantity selector next to add to cart button

[BYS2]

How can I make it such that the quantity selector is on the same line as the 'add to cart' button? Store link is https://illumix.uk/ 

[Dan-From-Ryviu]

Hi @BYS2 

Please add this code to Custom CSS in Online store > Themes > Customize > Theme settings 

.product-form__quantity {float: left;}
.main-product__info-container div:has(.main-product-form) {
    margin-top: 3.4rem;
    width: calc(100% - 152px);
    float: right;
}
.payment-badges-block { clear: both; }
@media (max-width: 749px) {
div:has(.main-product-form) {
    margin-top: 3rem !important;
}
}

[BYS2]

Hi Dan, I added the code to the base.css file but the add to cart button and quantity selector are still not on the same height.

[Dan-From-Ryviu · Accepted solution]

Please update the code if you added it to the base.css file 

.main-product__info-container .product-form__quantity {float: left; !important}
.main-product__info-container div:has(.main-product-form) {
    margin-top: 3.4rem !important;
    width: calc(100% - 152px) !important;
    float: right;
}
.main-product__info-container .payment-badges-block { clear: both; }
@media (max-width: 749px) {
body .main-product__info-container div:has(.main-product-form) {
    margin-top: 3rem !important;
}
}

[BYS2]

It worked, thanks! 

[PaulMartin]

Hi BYS2,

In order to make the quantity selector appear on the same line as the add-to-cart button, your theme's code needs to be changed. You'll need to look for the file that controls the quantity selector and the add to cart, then once you've done that, copy the code for the add to cart and add it into the quantity selector file. Then add the necessary CSS in order for the two to sit together in one line. Then with extra CSS for it to look good on mobile. That's it.

TLDR; You'll need to change the layout of the page by changing its code, then add the needed CSS to have it sit beside each other and make it look good on mobile.

Hope this helps! and good luck!

If you're looking to save time, avoid the pains of coding and testing for many hours, I'd be happy to do this as a paid service. The charge will be $25. Let me know if you're interested and if you have any questions, feel free to ask! 🙂