How can I style a quantity picker next to my add to cart button?

Store Design
,
1

Hello, i need some help with some CSS customizations.

I have a add to cart button on my collection page, now i want a quantity picker beside it.

I have the code for that:

<input type="number" name="quantity" min="1" value="6" />

The problem is that i can’t make it look good. I thought maybe somebody here could help me style it a bit.

It could be the same design as my add to cart button with a white middle part where the quantity number should be.

The website is in Danish. “Læg i kurv” means add to cart. This is the buttons i am talking about :slightly_smiling_face:

Can anybody help me style this?

My website is: https://americanwine.dk/collections/all

Thanks!

Screenshot 2023-06-16 at 14.27.22.png
Screenshot 2023-06-16 at 14.27.22.png2255×884 184 KB

2

Hey @LauraOO
If you’re talking about the quantity picker on the collection page then it’s not visible on the collection page but if you’re talking about the quantity picker on the product page then, 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.

Moeed_0-1686919262339.png
Moeed_0-1686919262339.png1367×831 120 KB

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

Best Regards,
Moeed

3

Added quantity controller in the collection is more complicated than adding small HTML. It needs to have other logic like show quantity controller when clicking add to cart and hidden in quantity is less than 1. From your question, it seems like you might have figured out how to display the quantity controller but I don’t see it using link above.

4

Hi @LauraOO

Adding a quantity selector can be a little complicated since it does only require html code. You need to add some liquid code. I suggest to hire someone to do this for you