Introduction
In this quick tutorial, we’re going to show you how to change the color of your upsell product's variant selection using CSS. If you're looking to give your upsell section a more cohesive look or match it with your store’s branding, this simple customization can make a big difference. Adjusting the variant selection colors helps create a smoother and more visually appealing shopping experience, making your store look more polished while guiding your customers' choices.
These tips are perfect for store owners or developers with some basic CSS knowledge who want to take their store’s design to the next level. Let’s get started!
Example
Here is what this will look like when done:
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: Modify the colors for each to match your brand or your preferences using color names (black, red, green etc), hex color codes (#000000) or RGB color codes (rgb(255, 0, 0) for red).
.upcart-upsell-item-variant-selector {
color: white !important;
background-color: #008060 !important;
}
Conclusion
And that’s it! With these simple changes, your upsell section will be looking great with personalized variant colors.
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.