Overview
This tutorial shows you how to apply a gradient background and animation effect to your Upcart rewards bar using custom CSS. This enhancement helps your reward tiers stand out and adds visual appeal to your cart.
These customizations are simple to apply and are suitable for store owners or developers with basic CSS knowledge.
Where to find the custom CSS editor
Go to Upcart > Cart Editor > Settings > Custom CSS
Scroll to the bottom of the page and paste your code into the input area
Click Save
Refresh your storefront to see the changes live
Example CSS for gradient animation
This code adds a diagonal shimmering gradient effect to your rewards progress bar:
.upcart-rewards-bar-foreground { background-image: linear-gradient( 45deg, rgba(255, 255, 255, 0.4) 25%, transparent 0, transparent 50%, rgba(255, 255, 255, 0.4) 0, rgba(255, 255, 255, 0.4) 75%, transparent 0, transparent ); background-size: 1rem 1rem; animation: slide 4s linear infinite; } @keyframes slide { from { background-position-x: 0; } to { background-position-x: 113px; } }Notes
To change the shimmer angle, adjust
45degto another direction (example:-45deg).To change the base bar color, use the built-in color settings in the Rewards module.
Final result
After applying this CSS, your rewards bar will display a subtle moving texture overlay. This draws attention to your rewards system without overwhelming the rest of your cart design.
Need help?
For advanced customizations, we recommend working with a Shopify Expert. They can help implement HTML, CSS, or JavaScript in your cart drawer. Upcart support does not assist with writing or debugging custom code.