Introduction
Want to make your rewards bar stand out and grab attention? In this tutorial, we’ll walk you through how to add a gradient background and some smooth animation to your rewards bar using CSS. This can give your store a more modern and dynamic look, helping to engage your customers and highlight the value they’re getting. Whether you're looking to boost conversions or just give your design a little extra flair, these simple customizations can do the trick. Plus, you don’t need to be a coding expert to get started!
These customization options are perfect for store owners or developers with basic CSS knowledge. Let’s dive in and make that rewards bar pop!
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".
Next, copy and paste the code into the CSS input area
When you are done “Click Save” and refresh your storefront page to see the results live.
Here is the CSS Code to Copy and Paste into the CSS Section:
Note: To change the color, change the color of the rewards bar as usual, see the Rewards bar help doc for a refresher. To change the direction of the gradient lines, change 45deg to -45deg.
.upcart-rewards-bar-foreground {
background-image: linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 0,transparent 50%,rgba(255,255,255,.4) 0,rgba(255,255,255,.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;
}
}
Conclusion
And that’s it! With just a few tweaks to your CSS, you’ve now got a more eye-catching rewards bar that your customers will love.
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.