Change Quantity button to round corners and size

Store Design
, , , ,

Topic summary

A user wants to customize the quantity button on their Shopify product page to have rounded corners and match the size of variant buttons, without affecting contact form fields.

Specific Requirements:

  • Round corners for quantity button (matching variant buttons)
  • Same size as variant buttons
  • Smaller font size for quantity numbers
  • Avoid changing contact form field styling

Solutions Provided:
Multiple responses offered CSS code snippets to add to base.css, theme.css, or custom.css files:

  • Set min-height: 38px for the quantity input
  • Apply border-radius: 40px to quantity-input elements using :before and :after pseudo-elements
  • Adjust font size (14px or 20px suggested)
  • One solution recommended setting corner radius to 0px in Theme Settings > Buttons to prevent affecting other elements

Follow-up:
The user requested additional help to reduce the width of the quantity button, indicating it’s currently too wide. The discussion remains open with this outstanding request.

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

I’d like changing the Quantity button to round corners as the variant buttons, without changing the contact form fields to round corners. Its the same setting for both in the Theme so some coding is needed.

I also want the quantity button to be the same size as the variant buttons.

Using Dawn Theme misteri.ca

IMG_0580.jpeg
IMG_0580.jpeg2360×1640 255 KB

IMG_0579.png
IMG_0579.png2360×1640 206 KB

2

Quantity number font size too.

3

Hi @MiguelMaya ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css, styles.css, custom.css or theme.scss.liquid

Step 3: Insert the below code at the bottom of the file → Save

.product quantity-input.quantity {
    min-height: 38px !important;
}
.product .quantity__input {
    font-size: 14px;
}

Here is result:

BSSCommerceB2B_1-1720059286251.png
BSSCommerceB2B_1-1720059286251.png1135×704 337 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

4

Please go to Online Store > Themes > Edit code, open theme.liquid file, add this code after to make fields on contact page not round
5

Hi @MiguelMaya ,

You can follow these steps to make the quantity button the same size as the variant buttons and rounded

  1. Open Online Store > Theme > Edit Code

  2. Find and open the base.css (or theme.css, custom.css) file

  3. Paste the code snippet below at the bottom of the file and hit save

quantity-input.quantity {
  min-height: 38px !important;
}

quantity-input.quantity:before {
  border-radius: 40px !important;
}

quantity-input.quantity:after {
  border-radius: 40px !important;
}

quantity-input.quantity input {
  /* You can change this value to fit your preference */
  font-size: 20px;
}

  1. Open Sales Channels > Online Store > Select your current theme > Customize

  2. Open Theme Settings > Buttons > Corner radius

  3. Set the value for the corner radius back to 0px to set all other buttons to default

Hope this helps you solve the issue.

Please don’t forget to Like and Mark it as an Accepted Solution if you find this helpful. Thank you!

1 Like
6

Thanks again for another clear and straightforward solution. Can you tell me how to reduce the width a little? Its too wide currently.