How can I move the quantity selector next to the add to cart button?

Store Design
1

Hi

pls can u provide a solution to moving the quantity selector next to the add to cart button

Theme: Warehouse

URL: smartappliancesonline.co.uk

Wanted result:

chrisjames11_0-1658880700645.png
chrisjames11_0-1658880700645.png999×305 21.1 KB

current :

Screenshot 2022-07-26 at 23.27.43.png
Screenshot 2022-07-26 at 23.27.43.png1305×364 15.1 KB

Cheers

1 Like
2

Hi @chrisjames11 ,

You can check it with these steps:

-1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css.liquid->paste the below code at the bottom of the file.

.ProductForm__QuantitySelector {
display: inline-block;
margin-right: 15px;
}
.ProductForm__BuyButtons {
display: inline-block;
}
.Product__Aside {
position: absolute;
right: 0;
bottom: -100px;
max-width: 550px;
}

I hope this helps.

3

Hi @chrisjames11 ,

Edit liquid file and add some CSS code are recommended.

4

Hi @chrisjames11 ,

You can try the following codes

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
@media only screen and (min-width: 1200px) {
.product-form__payment-container {
    display: flex;
    flex-direction: column;
    margin-top: -83px;
}

.shopify-payment-button {
    width: 100%;
}

button.product-form__add-button.button.button--primary {
    width: 50%;
    max-width: 63%;
    right: -50%;
}
}