Skip to main content

​
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

  1. Go to Upcart > Cart Editor > Settings > Custom CSS
  2. Scroll down to the input field and paste your CSS code
  3. Click Save
  4. Refresh your storefront to preview your changes live

​
Example CSS for quantity selector styling for V1.0

/* Change background color of quantity field */  
.upcart-product-quantity-minus,  
.upcart-product-quantity-input,  
.upcart-product-quantity-plus {  
  background-color: yellow;  
}  
  
/* Change text color of quantity number */  
.upcart-product-quantity-input {  
  color: green;  
  -webkit-text-fill-color: green;  
}  
  
/* Change color of the + and - icons */  
.upcart-product-quantity-minus svg,  
.upcart-product-quantity-plus svg {  
  fill: pink;  
}

​
Example CSS for quantity selector styling for V2.0

/* Change background color of the - icons */  
.upcart-public-component-product-tile__quantity-minus,  
.upcart-public-component-product-tile__quantity-plus {  
  background-color: yellow !important;  
}  
  
/* Change background color of quantity field */  
.upcart-public-component-product-tile__quantity-selector input {  
  background-color: yellow;  
}  
  
/* Change text color of quantity field */  
.upcart-public-component-product-tile__quantity-selector input {  
  color: red;  
}  
  
/* Change color of the + and - icons */  
.upcart-public-component-product-tile__quantity-minus svg,  
.upcart-public-component-product-tile__quantity-plus svg {  
  fill: orange;  
}

​
How to customize

You can change the values in background-color, color, and the rest 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: 
background-color: #1a1a1a;   
color: #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.