Introduction
Welcome to this tutorial on changing the color of the toggle for add-on options like shipping protection or any product of your choice! Customizing the color of the toggle can help align it with your store's branding, making it more visually appealing and consistent. A well-designed toggle can also draw attention to important add-ons, encouraging customers to make additional purchases and boosting your overall sales.
These steps are geared toward store owners or developers who have a basic understanding of CSS. By making this simple adjustment, you can create a more cohesive shopping experience that highlights key products or services, improving both aesthetics and customer engagement.
Let's dive in and make your toggles stand out!
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".
Applying Custom CSS
Once you are in the Custom CSS section, you can change the toggle colors by following these steps below. Modify the colors in :root to match your brand or your preferences!
1. Locate the CSS input area.
2. Copy and paste the following code into the CSS input area:
.upcart-cart {
--toggleColorWhenOn: #0dcd8d;
--toggleColorWhenOff: #c4cdd5;
--toggleHandleColor: #FFFFFF;
}
/* Addons Toggle Color When OFF */
[class*="styles_ToggleSwitch"] {
background-color: var(--toggleColorWhenOff);
}
/* Addons Toggle Color When ON */
[class*="styles_ToggleSwitch--active__"] {
background-color: var(--toggleColorWhenOn) !important;
}
/* Addons Toggle "Handle" Color */ [class*="styles_ToggleSwitch__circle__"] {
background: var(--toggleHandleColor) !important;
}
/* Setting other toggle elements to a unset background so they inherit */
[class*="styles_ToggleSwitch__loader__"], [class*="styles_ToggleSwitch__loading__"], [class*="styles_ToggleSwitch__checkMark__"] {
background-color: unset !important;
}
Below are some example images to help color a visual reference:
Orange in the “OFF” State
Blue in the “ON” State
Conclusion
By following this tutorial, you’ve successfully customized the toggle color for your add-ons, making them more noticeable and in line with your brand’s look. This small change can enhance the user experience and potentially increase add-on sales.
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.