Introduction
Welcome! In this quick CSS tutorial, we’ll show you how to customize the quantity selectors for your products. These small but essential features let customers adjust the number of items they want to purchase, and giving them a polished, user-friendly design can enhance the shopping experience.
This guide is ideal for store owners or developers with basic CSS knowledge. You’ll learn how to tweak the design of your quantity selectors to align with your store’s branding. Beyond the visual upgrade, well-designed selectors can improve usability and even boost sales by making it easier for customers to add more items to their cart.
Let’s jump in and start enhancing those quantity selectors!
Accessing Custom CSS Settings
To begin customizing the CSS for your UpCart, follow these steps:
Open the UpCart App within your dashboard.
Navigate to the Cart Editor.
Click on Settings and scroll to the bottom of the page until you find the section labeled "Custom CSS".
Applying Custom CSS
Once you are in the Custom CSS section, you can change the toggle colors by following these steps below. Modify the colors under ".upcart-cart" to match your brand colors and preferences!
Locate the CSS input area.
Copy and paste the following code into the CSS input area:
.upcart-cart
{
--backgroundColor: #ffffff;
--numberColor: #008060;
--plusMinusColor: #008060;
}
/*Changing the background colour of the quantity field*/
.upcart-product-quantity-minus,
.upcart-product-quantity-input,
.upcart-product-quantity-plus {
background-color: var(--backgroundColor) !important;
}
/*Changing the quantity number colour*/
[class*="styles_quantityInput__"] {
-webkit-text-fill-color: var(--numberColor) !important;
}
/*Changing the + and - colours*/
#UpcartPopup button svg
{
fill: var(--plusMinusColor);
}
Here’s an example of what the finished selectors look like using our code above:
Conclusion
And that’s a wrap! With just a few CSS adjustments, you’ve now learned how to make your product and upsell quantity selectors more attractive and functional. Remember, these customizations not only improve your store's look but also enhance the overall shopping experience for your customers. Keep experimenting with your CSS, and don't be afraid to test different styles until you find the perfect match for your brand!
If you need any assistance or run into any issues along the way, don’t hesitate to reach out to our support team. We’re here to help!