Overview
This guide is designed for merchants using Upcart who want to change the color of the text that says 'Save $XXX' beneath the products in the cart. Changing the color allows you to design your cart with your own branding in mind.
By using a bit of CSS and some basic coding knowledge, you can easily add this functionality to your store. These customization options are perfect for store owners or developers with a little bit of CSS experience.
Example
Here is what the cart will look after changing the color of the savings text:
Accessing Custom CSS Settings
To begin customizing the CSS for your Upcart, follow these steps:
Open the Upcart App.
Click on Cart Editor.
Click on Settings and scroll down 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 color of the product savings text by following these steps:
Locate the CSS input area.
Copy and paste the following code into the CSS input area:
.upcart-product-savings {
color: red !important;
}
Choosing a Color format
You can replace red with any color of your choice using three different ways.
For example:
Named Color:
greenRGB:
rgb(0,128,0)Hex Code:
#008000
Still Need Help?
If you need any assistance with customizations, we recommend consulting with a Shopify Expert about adding HTML, CSS, and even JavaScript to your cart drawer.