Overview
This guide is designed for merchants using UpCart who want to change the appearance of the savings row in their shopping cart. You can hide the whole savings row, just the discount amount, the discount code badges, or the word 'discount'.
Example
Here is what the cart will look like after removing the full discount row:
Note: Hiding these elements, particularly the discount amount, may make it more difficult for customers to quickly notice their savings.
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".
CSS Changes
Use these CSS codes to hide different parts of the savings row:
Hide the Entire Savings Row
This CSS rule will hide the entire savings row from the cart.
.upcart-savings-row {
display: none !important;
}
Hide the Discount Amount
Use this CSS snippet if you want to hide just the discount amount but keep the rest of the savings row visible.
.upcart-savings-amount {
display: none !important;
}
Hide the Discount Code Badges
This CSS rule will remove the visual display of any discount code badges applied to the cart.
.upcart-discount-code-badge {
display: none !important;
}
Hide the Word "Discount"
If you wish to hide the label or word "discount" that appears in the savings row, use the following CSS.
.UpcartDesignSettings__cartTextColor {
display: none !important;
}
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.