Adjusting size of quantity button in cart drawer

Shopify Discussion
,

Topic summary

A user is attempting to customize the quantity selector buttons in their Shopify cart drawer. They successfully reduced the button width using custom CSS but are unable to decrease the overall height/size of the buttons.

Current Status:

  • Width adjustment achieved through CSS modifications targeting .drawer.active .quantity, .quantity__button, and .quantity__input classes
  • Height/size reduction remains unresolved
  • User shared website credentials for troubleshooting assistance

Technical Details:

  • Website: jajamoon.com
  • Password: skawts (corrected after initial typo)
  • Custom CSS includes width calculations using CSS variables like --font-body-scale and --inputs-border-width

Discussion Activity:
Two community members requested access to help troubleshoot, with the original poster correcting the password from “skwats” to “skawts.” The issue remains open and awaiting solutions for reducing button height.

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

Hello,

After playing with the code for a while I was able to reduce the width of the quantity buttons of my cart drawer, but I haven’t managed to reduce the size. Any ideas?

nahuel_123_0-1736373885335.png
nahuel_123_0-1736373885335.png393×293 31.4 KB

My website is jajamoon.com and pasw is skwats

This is the code I added to make the buttons with less width;

.drawer.active .quantity {
width: calc(9rem / var(–font-body-scale) + var(–inputs-border-width) * 2);
}
.drawer.active .quantity__button {
width: calc(3rem / var(–font-body-scale));
}
.drawer.active .quantity__input {
width: 100%;
max-width: 29px;
flex-grow: 1;
-webkit-appearance: none;
appearance: none;
}

2

Hi @nahuel_123 ,
The password you shared is incorrect, can you please share correct password?

3

Hi @nahuel_123

The pass is wrong, please share it again

Best,

Daisy

4

Sorry, here it is: skawts

5

Sorry, here it is: skawts