Change Quantity Box Style

[Anonymous]

Hello there ,

Is there any way to change the style of the quantity box in the product page , Right now it looks like oval shape , i want it to look like this .

Can anyone assist me with this .

Thank You !!

[Moeed · Accepted solution]

Hey @Anonymous 

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>
.quantity {
    border-radius: 0 !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Anonymous]

Thank you ,

How to reduce that box width?

[Moeed]

Hey @Anonymous 

Keep the previous code and add this new code in theme.liquid file above </style> with the same steps.

.quantity {
    border: solid 1px black !important;
    width: 110px !important;
}

RESULT:

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

Best Regards,
Moeed

[Guleria]

Hello @Anonymous ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code below:

.product-form__quantity .quantity {
    border-radius: 0px !important;
    border-color: #ddd;
}

Note: Always use the css code in the css files.

Thanks