⚠️ 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
By default, the carousel arrows in Upcart’s upsell section are black. If your upsell background is dark, the arrows may be difficult to see. You can fix this by changing the arrow color with a simple CSS update.
Where to find the custom CSS editor
Go to Upcart > Cart Editor > Settings > Custom CSS
Scroll down to the input field and paste your CSS code
Click Save
Refresh your storefront to preview the changes
Example CSS to change the arrow color
.styles_PreviewCarousel__ [class~='control-next']::before, .styles_PreviewCarousel__ [class~='control-prev']::before { border-color: white !important; }This changes both the next and previous carousel arrows to white.
How to customize
You can update border-color to match your brand’s palette. Use any valid color format:
Named colors (example:
black,white,red)Hex codes (example:
#ffffff)RGB values (example:
rgb(255, 255, 255))
Example:
border-color: #00bcd4 !important;
This ensures your upsell navigation arrows remain visible against any background color.