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

Store Design
,
1

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!

Screenshot 2023-08-18 at 9.29.45 am.png
Screenshot 2023-08-18 at 9.29.45 am.png1019Ă—193 26.1 KB

1 Like
2

Hi @bradpc

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

3

Thank you - please see this preview link:

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

4

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:

Ribe_Dagandara_0-1692316745612.png
Ribe_Dagandara_0-1692316745612.png1155Ă—838 120 KB

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

5

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.

Screenshot 2023-08-18 at 11.33.32 am.png
Screenshot 2023-08-18 at 11.33.32 am.png558Ă—453 32.1 KB

6

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;
}
7

Hi @Made4uo-Ribe

thanks for your code.
On my website: "https://weinhausottopaus.myshopify.com/products/weingut-hilz-grauburgunder-trocken-2023?_pos=1&_psq=hilz+graub&_ss=e&_v=1.0" 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