How do i align the quantity selector with "ADD TO CART" button

Store Design
, , , ,
1

Hi everyone,

I’m trying to align the quantity selector next to the “Add to Cart” button on my product page, but I can’t get it to work properly. Right now, the quantity selector is stacked above the button instead of being on the same row. I want this on both mobile and pc, and also make the quantity selector smaller.

Here’s an example of how I want it to look: https://doreandrose.com/en-se/products/joiedevivrepillowcase?variant=43679627378918

Screenshot_36.png

Here’s my store: https://q0p3zs-fq.myshopify.com/products/test1

Thanks in advance!

1 Like
2

Hey @getbodyfuel

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

RESULT:

Moeed_0-1740861599941.png
Moeed_0-1740861599941.png1478×906 187 KB

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

Best Regards,
Moeed

3

nice, now how do i do that on mobile?

1 Like
4

Hey @getbodyfuel

Remove the previous code and add this updated code with the same steps mentioned above. The below code will fix both desktop and mobile.

RESULT:

Moeed_0-1740863491925.png
Moeed_0-1740863491925.png375×646 54.2 KB

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

Best Regards,
Moeed

5

Wow thanks! now is it possible to make the quantity selector smaller in width so the text on the add to cart button becoms one line instead of 2?

6

Hi @getbodyfuel

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
div.product-form__input.product-form__quantity {
    text-align: right !important;
}
div.product-form__input.product-form__quantity .price-per-item__container {
    justify-content: flex-end !important;
}
product-form.product-form .product-form__buttons {
    margin-left: 0 !important;
    margin-right: 170px !important;
}

Here is the result:

image_480.png
image_480.png480×460 80.6 KB

I hope this helps

Best,

Daisy

7

Hello Daisy! When i add this code, (whilst having the code provided earlier in this thread by moeed) the quantity selector is inside of the buy button on over around 500px page width. also is it possible to make the quantity selector smaller, especially on mobile?
Thanks in advance!

Screenshot_37.png
Screenshot_37.png557×133 7.31 KB

8

Hi @getbodyfuel

Please add this code

div.product-form__input.product-form__quantity {
    max-width: 100% !important;
}

image_480.png
image_480.png274×480 35.4 KB

image_720.png
image_720.png720×341 96.1 KB

Daisy

9

Thanks a lot, now its not overlapping! Is it possible to make the quantity selector smaller in width, or is that very complicated?