Skip to main content

​
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

  1. Go to Upcart > Cart Editor > Settings > Custom CSS
  2. Scroll down to the input field and paste your CSS code
  3. Click Save
  4. Refresh your storefront to preview the changes

​
Example CSS to change the arrow color in V1.0

.styles_PreviewCarousel__ [class~="control-next"]::before,  
.styles_PreviewCarousel__ [class~="control-prev"]::before {  
  border-color: white !important;  
}

​
Example CSS to change the arrow color in V2.0

.upcart-public-component-carousel__button svg {  
  stroke: orange;  
}
This changes both the next and previous carousel arrows to white.

​
How to customize

You can update border-color, stroke 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.