How to move quantity selector next to add to cart button in Vision Theme?

[bradpc]

Hi,

Please can someone help identify the code change to move the quantity selector next to add to cart button in Vision Theme?

Thanks so much!

[Made4uo-Ribe]

Hi @bradpc 

Please share your website so we can provide a code appropriate for you

[bradpc]

Thank you - please see this preview link: 

https://5c58am3nsfisdt8y-45252706456.shopifypreview.com

[Made4uo-Ribe]

Hi @bradpc 

Please follow the instructions below

For Shopify 2.0 Free themes, you can follow the instructions below. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Asset" folder, click on "app.css" file
• Add the code below at the very bottom of the file

product-form.product-form {
    width: 70%;
    position: absolute;
    top: 20vh;
    left: 7rem;
}


quantity-selector.quantity.buttons_added > * {
    height: 50px;
}

quantity-selector.quantity.buttons_added {
    border-radius: 7px;
}


.product-information {
    position: relative;
}

• Make to SAVE

Result here:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[bradpc]

Thanks for your suggestion. I have tried but please see how it is coming out on mobile, the add to cart button seems to be floating higher. 

 

 

[Made4uo-Ribe]

Hi @bradpc 

Sorry about that. Fixed the issue. Please change the code with the following

product-form.product-form {
    width: 70%;
    position: absolute;
    top: -80px;
    left: 7rem;
}


quantity-selector.quantity.buttons_added > * {
    height: 50px;
}

quantity-selector.quantity.buttons_added {
    border-radius: 7px;
}


#ProductInfo-template--16973026656505__main-product > div:nth-child(6) {
    position: relative;
}

[julson11]

Hi @Made4uo-Ribe 

thanks for your code.
 On my website: "https://weinhausottopaus.myshopify.com/products/weingut-hilz-grauburgunder-trocken-2023?_pos=1&_psq=... password is "lakoer", I also try to fit the "add to cart / In den Warenkorb" button next to the quantity. I also would like to make a thin line around the quantity like it is shown in the images here in the thread.

Could you help me with the correct code?
Which information do you need else?

Thanks a lot in advance!

Best

Julian