How to center - & + on quantity selector

Store Design
, , , , , , , ,

Topic summary

A user encountered alignment issues with the minus and plus buttons on their quantity selector, which appeared slightly higher than the center of the quantity box. They also wanted to adjust the button opacity to better match the box outline on both mobile and desktop.

Solution provided:

  • Add CSS code to the theme’s stylesheet (base.css, theme.css, style.css, main.css, or custom.css)
  • The code uses flexbox properties (display: flex, justify-content: center, align-items: center) on the quantity-input.quantity.cart-quantity selector

Outcome:

  • The solution successfully resolved the centering issue
  • The opacity adjustment for the buttons was not addressed in the final solution
Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I can see that the minus and plus is a bit higher from the center of the quantity box I’m looking to center it and make - + a bit more faded to match the outline but not exactly matching the box for mobile and desktop. I used code to make the quantity boxes smaller and rectangular.

url knmb1c-pf.myshopify.com

password samurai

IMG_7779.jpeg
IMG_7779.jpeg1290×1389 46.9 KB

IMG_7780.jpeg
IMG_7780.jpeg1242×2208 46.9 KB

2

HI @undercoverfresh ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

quantity-input.quantity.cart-quantity {
    display: flex !important;
    justify-content: center;
    align-items: center;
}
1 Like
3

This worked thank you