Put Quantity Selector and Add to Cart button on same line in Craft Theme

Store Design
, ,
1

Hi, me again! I’m looking to put the quantity selector and add to cart button on the same line. Thank you :grin:

Screenshot 2023-07-12 042529.png
Screenshot 2023-07-12 042529.png585×668 27.7 KB

2

@planandstick

Please add the following css code to your assets/ bottom of the file.

@media screen and (min-width: 750px){
.product-form .button--full-width {
    width: 60% !important;
    position: absolute !important;
    top: 18rem !important;
    float: right !important;
    left: 16rem !important;
}
}

Thanks!

3

Thank you so much for your help! I had to change the position a little, but it looks great!

4

@planandstick

Thank you! Welcome Again.

5

Hey @planandstick

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Moeed_0-1689153734992.png
Moeed_0-1689153734992.png328×590 25.5 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

@planandstick

The second solution for you

Please add the following CSS code to your assets/base.css bottom of the file.

@media only screen and (min-width: 1024px) {
.product-form {
    display: flex !important;
    justify-content: center !important;
    margin-top: -63px !important;
    margin-left: 20px !important;
}
}
@media only screen and (max-width: 600px) {
.product-form {
    display: flex;
    justify-content: center;
    margin-top: -63px !important;
    margin-left: 150px !important;
}
}
7

Thank you so much! Is it possible to change the width of the Add to Cart button? I would like it to match the width of the body text.