Reduce size of Quantity button plus and minus signs

Store Design

Topic summary

A user sought help reducing the size of plus and minus signs on product quantity buttons in their Shopify store.

Problem:

  • The quantity selector buttons had oversized plus/minus symbols
  • User couldn’t locate the appropriate CSS properties (font-size, height, or other elements) when inspecting the stylesheet

Solution provided:
Add CSS code to the base.css file targeting .btn-quantity.minus and .btn-quantity.plus pseudo-elements:

  • Adjust width to 8px
  • Modify left positioning to 11px
  • Set top positioning to 22px for the plus button’s after element
  • Use !important flags to override existing styles

Outcome:
The CSS solution successfully resolved the issue. The discussion is closed with the problem solved.

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

quantityplus.jpg
quantityplus.jpg203×116 3.28 KB

Hello,

I’m back again this time I’m looking to reduce or decrease the size of the plus and minus sign. I wasn’t able to locate a height, font-size or any other element when inspecting the stylesheet. Any help is greatly appreciated.

url link is: https://foreverfive.com/products/unconditional

2

url is https://foreverfive.com/products/unconditional

1 Like
3

Hi @foreverfive

You can do that by adding this CSS code at the bottom of your base.css file

.btn-quantity.minus:before,
.btn-quantity.plus:before, 
.btn-quantity.plus:after {
    width: 8px !important;
    left: 11px !important;
}
.quantity__group--1 .btn-quantity.minus:before, 
.quantity__group--1 .btn-quantity.plus:before, 
.quantity__group--1 .btn-quantity.plus:after {
    top: 22px !important;
}

Screenshot 2023-08-02 at 09.39.54.png
Screenshot 2023-08-02 at 09.39.54.png1479×602 127 KB

1 Like
4

that worked for me! Thank you!