This guide provides step-by-step instructions for adjusting the background color of your Smart Cart in the Rebuy Engine. By following these easy steps, you can personalize the appearance of your Smart Cart and lay the groundwork for additional customization and styling.
Add the Code Snippet
This code targets various elements within the smart cart to apply the desired background color.
Prior to implementing any alterations, it is advisable to generate a duplicate version of your Live Smart Cart for initial testing purposes. By utilizing Rebuy Preview Mode, you can assess the modifications made to your Smart Cart copy before applying them to the live environment.
Add the following CSS code snippet into the settings of the Smart Cart you are editing. Smart Cart's Settings -> Custom CSS
/* CHANGE SMART CART BACKGROUND COLOR -start */
.rebuy-cart__flyout-header, .rebuy-cart__flyout-shipping-bar,
.rebuy-cart__flyout-content,
.rebuy-cart__flyout-body,
.rebuy-cart__flyout-item-product-title,
.rebuy-cart__flyout-footer,
.rebuy-cart__flyout-subtotal,
.rebuy-cart__flyout-item-quantity-widget-button,
.rebuy-cart__flyout-recommendations,
.rebuy-cart__flyout-recommendations .rebuy-widget, .rebuy-cart__flyout-content::-webkit-scrollbar {
color: #CartTextColorHex !important;
background: #BackgroundColorHex !important;
border-color: #YourColorHex !important;
}
/* CHANGE SMART CART BACKGROUND COLOR -end */
REPLACE `
ColorHex` values with the specific hexadecimal color code you want to use for the background. e.g.#fffffffor white, or#000000for black.All punctuation in the code block is crucial for your code to run! Copy this code block exactly.
Click Save
Below is how the code will look placed into your Smart Cart's -> Custom CSS Setting:
End Result
Once the code is added you can see the changes in your Smart Cart!
Click here for additional customization tips for your Smart Cart. Such as changing button colors, pricing and more!
NOTICE: Rebuy support services encompass all aspects directly associated with Rebuy, providing assistance and guidance for features and functionalities within the standard Rebuy package. However, please note that we cannot provide support for third-party plugins or customizations beyond the scope of Rebuy. Unsupported items include, but are not limited to, custom template modifications/troubleshooting, headless configurations/troubleshooting, native cart configurations/troubleshooting, Custom CSS/Javascript, custom scripts, and third-party integrations. Proceed with caution if you plan to make any customizations.
Please refer to our Support Policy Page