Overview
This tutorial shows how to adjust the colors of the quantity selector components in the Upcart drawer. You can style the input field, text, and plus/minus icons. Updating these styles helps match your store’s branding and makes the cart experience more visually consistent.
This customization is best suited for store owners or developers with basic CSS knowledge.
Where to find the custom CSS editor
Go to Upcart > Cart Editor > Settings > Custom CSS
Scroll down to the input field and paste your CSS code
Click Save
Refresh your storefront to preview your changes live
Example CSS for quantity selector styling
.upcart-cart { --backgroundColor: #ffffff; --numberColor: #008060; --plusMinusColor: #008060; } /* Change background color of quantity field */ .upcart-product-quantity-minus, .upcart-product-quantity-input, .upcart-product-quantity-plus { background-color: var(--backgroundColor) !important; } /* Change text color of quantity number */ [class*="styles_quantityInput__"] { -webkit-text-fill-color: var(--numberColor) !important; } /* Change color of the + and - icons */ #UpcartPopup button svg { fill: var(--plusMinusColor); }How to customize
You can change the values in --backgroundColor, --numberColor, and --plusMinusColor using any valid color format:
Named colors (example:
white,black)Hex codes (example:
#ff0000)RGB values (example:
rgb(0, 132, 255))
Example for a darker look:
--backgroundColor: #1a1a1a; --numberColor: #ffffff; --plusMinusColor: #ffffff;
These updates affect both product quantity selectors and upsell item selectors in the cart drawer.
Need help?
If you run into issues or need assistance, reach out to our support team.. We’re happy to help.