Re: Quantity add to to cart button design

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

LauraOO
Explorer
67 0 13

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 🙂

Can anybody help me style this?

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

 

Thanks!

Screenshot 2023-06-16 at 14.27.22.png

Replies 3 (3)

Moeed
Shopify Partner
4366 1123 1380

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 </body> tag.

 

<style>
.QuantitySelector {
    background: #BE292E;
    color: white;
}
</style>

 

Moeed_0-1686919262339.png

 

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

 

Best Regards,
Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
kevinkarma55
Shopify Partner
30 1 6

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.

Skilled in building custom Shopify theme

made4Uo
Shopify Partner
3840 716 1177

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

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free