All Collections
Smart Cart
Advanced Settings
How To Change The Smart Cart Background Color
How To Change The Smart Cart Background Color

Easily Customize Your Smart Cart: Change the Background Color

Tom Eschler avatar
Written by Tom Eschler
Updated over a week ago

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

.rebuy-cart__flyout-header, .rebuy-cart__flyout-shipping-bar,
.rebuy-cart__flyout-recommendations .rebuy-widget, .rebuy-cart__flyout-content::-webkit-scrollbar {
color: #CartTextColorHex !important;
background: #BackgroundColorHex !important;
border-color: #YourColorHex !important;
  • REPLACE `ColorHex` values with the specific hexadecimal color code you want to use for the background. e.g. #ffffff for white, or #000000 for 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

Did this answer your question?