Skip to main content

​
Overview

Upcart allows you to change the colors used for upsell variant selectors using simple custom CSS. This is a quick way to align your cart’s appearance with your brand and improve the customer experience during product selection. This customization is ideal for store owners or developers with basic CSS knowledge.

​
Where to find the custom CSS editor

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

​
Example CSS for variant selector styling in V1.0

.upcart-upsell-item-variant-selector {     
  color: white !important;  
  background-color: #008060 !important;   
}

​
Example CSS for variant selector styling in V2.0

.upcart-public-component-upsell-tile__variant-row select {  
  color: white;     
  background-color: #008060;   
}

​
How to customize

  • color: Sets the text color
  • background-color: Sets the background of the variant selector box
You can use different types of values, such as:
  • Named colors (example: black, white, red)
  • Hex codes (example: #000000)
  • RGB values (example: rgb(255, 0, 0))
Example: 
.upcart-public-component-upsell-tile__variant-row select {     
  color: #000000 !important;     
  background-color: #f3f4f6 !important;   
}
This lets you create a variant selector style that either blends in with your store’s design or stands out to grab attention.

​
Still need help?

For additional customizations, we recommend working with a Shopify Expert. They can assist with adding HTML, CSS, or JavaScript to your cart drawer. See Shopify Experts