Quantity Selector next to add to cart button Vision Theme

Quantity Selector next to add to cart button Vision Theme

julson11
Explorer
49 1 6

Hi everybody,

 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 in this thread:  https://community.shopify.com/c/shopify-design/how-to-move-quantity-selector-next-to-add-to-cart-but...

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

Thanks a lot in advance!

Best

Julian

Replies 6 (6)

Asad-Mahmood
Navigator
308 53 61

Go to your online store -> customize -> settings -> custom css and paste the below code there

@media (min-width: 1024px) {
    .button.accent, input[type=submit].accent {
        width: 75%;
        bottom: 125px;
        background: var(--color-accent);
        color: var(--solid-button-label, #fff);
    }
    .add_to_cart_holder {
        display: flex;
        justify-content: flex-end;
    }
}



AsadMahmood_0-1721927875579.png

 

 

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





julson11
Explorer
49 1 6

Thanks for your quick reply.

The "in den Warenkorb" Element is now shown right to the quantity selector which is nice. But the product form section remains at the same position. Thus there is free space and if I hide the "product form" section, the button right to the quantity selector is also hidden.  

julson11_0-1721944606423.png


And can I add a thin border around the "quantity selector" like here?
https://community.shopify.com/c/shopify-design/how-to-move-quantity-selector-next-to-add-to-cart-but...

Thank you in advance!

Best

Julian

Asad-Mahmood
Navigator
308 53 61

Use this code to add border around quantity selector

.thb-product-detail .quantity {
    margin-bottom: 30px;
    border: 1px solid;
}


and for the positioning of add to cart button. we need to make changes in theme file

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





julson11
Explorer
49 1 6

Thanks for your reply.
The border worked.

Okay. Do you need some code of the file we need or how could we try this?

Asad-Mahmood
Navigator
308 53 61

I need collaborator access of your store to see the add to cart form code and adjust the positioning

If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
Hire me: asadmahmood8470@gmail.com
WhatsApp





dddddSQDdaw
Visitor
1 0 0

Hello asad can you also do this for our store please, we have the same issue!