> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Change the toggle colors in the add-on module

> Customize the colors of the add-on toggle to match your store’s branding.

# Overview

This tutorial shows how to change the toggle colors used in Upcart’s add-on module, including shipping protection or any product-based toggle. Custom-colored toggles can help highlight important upsells and create a more cohesive visual experience.

This approach is best 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 to the bottom of the page and paste the CSS code into the input field
3. Click **Save**
4. Refresh your storefront to see the changes applied

***

## Sample CSS for toggle customization in V1.0

The CSS below adjusts the toggle background color (on and off states), the toggle handle color, and resets other elements to avoid visual conflicts.

```
.upcart-cart {  
  --toggleColorWhenOn: #0dcd8d;     /* Color when toggle is ON */  
  --toggleColorWhenOff: #c4cdd5;    /* Color when toggle is OFF */  
  --toggleHandleColor: #ffffff;    /* Color of the toggle handle */  
}  
  
/* Toggle background when OFF */  
[class*="styles_ToggleSwitch"] {  
  background-color: var(--toggleColorWhenOff);  
}  
  
/* Toggle background when ON */  
[class*="styles_ToggleSwitch--active__"] {  
  background-color: var(--toggleColorWhenOn) !important;  
}  
  
/* Toggle handle (the circle) */  
[class*="styles_ToggleSwitch__circle__"] {  
  background: var(--toggleHandleColor) !important;  
}  
  
/* Reset internal parts to avoid unwanted overlap */  
[class*="styles_ToggleSwitch__loader__"],  
[class*="styles_ToggleSwitch__loading__"],  
[class*="styles_ToggleSwitch__checkMark__"] {  
  background-color: unset !important;  
}
```

## Sample CSS for toggle customization in V2.0

```
/* Toggle background color when OFF */  
.upcart-public-addons__toggle-slider {  
  background: blue;  
}  
  
/* Toggle background color when ON */  
.upcart-public-addons__toggle-switch input:checked + .upcart-public-addons__toggle-slider {  
  background: pink;  
}  
  
/* Toggle handle color (the circle) */  
.upcart-public-addons__toggle-slider::before {  
  background: orange;  
}
```

***

## How to customize

You can change the values in `background-color`, `color`, and the rest using any valid color format:

* Named colors (example: `white`, `black`)
* Hex codes (example: `#ff0000`)
* RGB values (example: `rgb(0, 132, 255)`)

***

## 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](https://www.shopify.com/partners/directory)