Skip to main content

Hide the discount row or specific savings elements

Hide parts of the discount summary section for a cleaner cart design.

Updated over 2 weeks ago

⚠️ Important notice

This customization only works with Version 1 of the Upcart cart modules. If you recently upgraded your cart to Version 2, these customizations may not work. You will need to use the new selectors provided for Version 2 in the migration guide.

If your customizations are not working as expected, you can also revert your cart back to Version 1 instead of using Version 2.

We are currently working on new customization templates for Version 2 of the modules, and they will be available soon.

Overview

Upcart’s savings row displays information about applied discounts, codes, and savings. If you prefer a more minimal layout, you can selectively hide elements using custom CSS.

You can remove the entire row or just specific pieces like the discount amount, code badges, or the word “Discount.”


Where to find the custom CSS editor

  1. Go to Upcart > Cart Editor > Settings > Custom CSS

  2. Paste the code snippets below into the input area

  3. Click Save

  4. Refresh your storefront to see the changes live


CSS examples

Hide the entire savings row

.upcart-savings-row {
display: none !important;
}

V2 Version

.upcart-public-cart-summary {
display: none !important;
}

Removes all discount-related content from the cart drawer.

Hide only the discount amount

.upcart-savings-amount {     
display: none !important;
}

V2 Version

.upcart-public-cart-summary__total-discount {     
display: none !important;
}

Keeps the discount label or code visible but hides the amount saved.

Hide discount code badges

.upcart-discount-code-badge {     
display: none !important;
}

V2 Version

.upcart-public-cart-summary__slide-codes {     
display: none !important;
}

Hides the visual badge displaying the active discount code.

Hide the word "Discount"

.UpcartDesignSettings__cartTextColor {     
display: none !important;
}

V2 Version

.upcart-public-cart-summary__discount-label {     
display: none !important;
}

Hides static text that uses the word “Discount.” You may want to adjust this selector manually for more precise targeting.

Important note

Hiding elements, especially the discount amount, may reduce visibility of promotions and savings. Consider the customer experience before applying these changes.

Need help?

For advanced styling or layout changes, we recommend working with a Shopify Expert. Upcart’s support team does not assist with custom code implementation.

Did this answer your question?