How can I alter the style of the product page quantity box?

Shopify Discussion
1

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 !!

2

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 tag

RESULT:

Moeed_0-1698824408642.png
Moeed_0-1698824408642.png1550×652 61.8 KB

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

Best Regards,
Moeed

1 Like
3

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

4

Thank you ,

How to reduce that box width?

5

Hey @Anonymous

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

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

RESULT:

Moeed_0-1698824923844.png
Moeed_0-1698824923844.png1512×660 61.1 KB

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

Best Regards,
Moeed

1 Like