Customizing the Look and Feel of Your Rebuy Smart Cart

Welcome to the Smart Cart V2 CSS Styling Guide! This guide will help you apply custom styles to your Smart Cart V2. In this guide, we will walk you through the process of using CSS to personalize the appearance of your Rebuy Smart Cart. By using CSS, you can change the colors, fonts, and more to better align with your store's aesthetic.

Pro Tip: Test Before You Edit!

Before making any changes, it's recommended to create a duplicate copy of your Live Smart Cart to test on first! You can view the changes in your Smart Cart copy using Rebuy Preview Mode.

Using Rebuy preview mode

Where to Customize the Rebuy Smart Cart?

Smart Cart V2 includes a built-in code editor within its settings. The CSS code you add here will apply specifically to that cart.

To add custom CSS to the Smart Cart, follow these steps:

1. Open your Smart Carts and click the one to configure.

2. Click on Global SETTINGS (Gear Icon).

3. Navigate to the Advanced tab.

4. Locate the Custom CSS Code Box.

5. Place your custom CSS code in this box.

Using the Custom CSS Code Editor

The Smart Cart now features a robust Code Editor in the Custom CSS Box, designed to enhance your customization experience.

Key features include:

• Syntax Highlighting

Enhances the readability of your CSS code by distinguishing between elements, properties, and values.

• Auto-Completion

Suggests CSS properties and values as you type, saving time and reducing errors.

• Color Picker

When adding color properties, hover over the color icon next to the hex code to easily choose colors using a visual interface.

• Syntax Helper

Provides tips and guidelines for CSS properties and values. It’s a useful tool for ensuring your CSS is both correct and optimized.

• Real-Time Preview

Instantly displays the effects of your CSS changes within the Smart Cart. This feature is great for quickly verifying and adjusting your design modifications.

• Error Highlighting

Highlights syntax errors and invalid CSS properties for immediate correction, helping you quickly find and fix mistakes, ensuring your code runs smoothly.

These features make customizing your Smart Cart easier and more efficient!

CSS Key Terms & Components

Here are some important terms about the main components of CSS code that you should know before adding CSS code to your Smart Cart’s Code Editor.

1. ELEMENT SELECTOR

These define what you’re styling. Identifying the correct selector can be the most challenging part when working with CSS, especially since Rebuy has it's own unique Elements. But don’t worry! A list of Rebuy's Element Selectors will be provided, along with common CSS snippets that you can copy and paste.

Example

[data-rebuy-component="checkout-area"] .rebuy-cart__checkout-button

These are selectors for the Cart Checkout Button Element. It specifies the target for making changes and is followed by curly brackets { }

2. PROPERTY

CSS properties are used to define the styles applied to elements. Each property controls a specific aspect of the element’s appearance, such as color, size, spacing, or layout. For instance, color: property changes the text color, font-size: changes the size of the text and background: changes the button color.

Properties must always be enclosed within curly brackets.

.rebuy-cart__checkout-button { color: #ff0000; }

*You can include multiple properties within a selector. This is best practice for component elements!

[data-rebuy-component="checkout-area"] 
.rebuy-cart__checkout-button 
{
   color: #ffffff;
   font-size: 18px;
   background: #ff0000;
}

For a comprehensive reference on CSS properties, visit W3Schools CSS Reference.

3. VALUE

These are the specific values assigned to properties. For example, color: #ff0000; changes the text color to red by using the color hexadecimal value #ff0000

Every property needs a value!

[data-rebuy-component="checkout-area"] 
.rebuy-cart__checkout-button 
{ 
   background: #ff0000; 
}

This changes the color of the Smart Cart's Checkout Button to red by using the color hexadecimal #ff0000 as it's color value.

*Ensure a semicolon ; follows every property-value pair in your CSS.

4. COMMENT CODE

Comment code is used to add notes or explanations with your code. It does not execute as part of the code. Comments are helpful for reminding yourself and informing others about the purpose of the code.

Comment Lines: Enhance Clarity and Documentation!

Highly recommended for clarity and documentation!

Code comments in CSS are enclosed within /* and */

Example:

/* This code changes the color of the cart title */ 
[data-rebuy-component="checkout-area"]
.rebuy-cart__checkout-button 
{
   color: #ff0000;
   background: #000000;
}

Single & Double Column Layouts

The Smart Cart can be displayed in two layout styles: Single Column or Double Column.

Single Layout - Primary Column

The container element that holds the Smart Cart Body and Footer Anchors.

/* Target the Primary Column */
.rebuy-cart__column--primary {
   background: #yourColorHex !important;  
}

Styling Tip: Add more styling properties properties such as padding, borders, or more to customize the appearance.

Double Column - Change Background Color

The container element that holds the Cross-Sells Anchor

Example:

Replace yourColorHex with a color #hex
Change or Remove the other properties below as needed.

/* Background Color for Second Column */
.rebuy-cart__column--secondary {    
    background: #yourColorHex !important;    
}

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Cart Title & Login

Below are some code snippets for styling the Smart Cart's "Your Cart" Title and the Smart Cart's Customer Login Button.

STYLE The Cart Title's Text

The Cart Title Component [data-rebuy-component-id="title_bar"] controls the appearance of the cart title in the Smart Cart. You can easily customize its style by adjusting the text color, font size, background color, and other properties using the code below.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Copy/paste then modify and/or add additional styling properties
Replace yourColorHex with the #hex number of the color you want to use.

/* Styling for the Your Cart title component */
[data-rebuy-component-id="title_bar"] {
    color: #yourColorHex; /* Text color */
    background: #yourColorHex; /* Background color */
    font-size: 24px; /* Font size */
    font-weight: bold; /* Bold text */
}

CENTER "Your Cart" Title

/* Center the Cart title component */
[data-rebuy-component-id="title_bar"] { margin: auto; }

Enhance Styling!

Add additional styling properties such as margins, padding, or text alignment to achieve the desired look and feel!

ALIGN The Cart Title & Login Button

To align the Cart Title and Login button within the Header, use the justify-content CSS property. This allows you to control the placement of these elements (center, left, right, or spaced evenly etc.)

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Center Both Cart Title & Login Button

/* Center Cart Title & Login */
[data-rebuy-cart-header-top-inner] { 
   justify-content: center !important; 
}

Left Align Both Cart Title & Login Button

/* Left-align Cart Title & Login */
[data-rebuy-cart-header-top-inner] { 
   justify-content: left !important; 
}

Right Align Both Cart Title & Login Button

/* Right-align Cart Title & Login */
[data-rebuy-cart-header-top-inner] { 
   justify-content: right !important; 
}

Login Button

The Login Button Component [data-rebuy-component-id="login"] { } controls the appearance of the login button within the Smart Cart. You can easily copy and paste the code below and customize its style by adjusting the button’s text color, background color, and more!

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* Styling for login button component */
[data-rebuy-component-id="login"]  {   
    color: #yourColorHex;
    background: #yourColorHex;
    border-color: #yourColorHex;
}

Enhance Styling!

Add additional styling properties such as padding, borders, and more!

Smart Cart Anchors & Components

Smart Cart V2 (Smart Cart 2.0) introduces a new architecture for anchors and components, which enhances the customization and functionality of the cart. Here are the details. We'll share code snippets of some most common anchors and components below.

Smart Cart Anchors

Anchors are key structural elements within the Smart Cart V2. They help in organizing different sections of the cart.

Pro Tip!

Anchors are fixed containers for components. Typically you only need to style them with background colors, padding, or margins. It’s often better to apply CSS at the component level!

Available Anchor Selectors

Example:

/* ---Smart Cart Header--- */
[data-rebuy-cart-anchor="header"] {
   background: #000000;
}

The available anchor selectors are:


/* ---Header Anchor--- */
[data-rebuy-cart-anchor="header"] {  
   /* Add your styles here */
}

/* ---Goal Box Anchor--- */
[data-rebuy-cart-anchor="goalBox"] {  
   /* Add your styles here */
}

/* ---Body Anchor--- */
[data-rebuy-cart-anchor="body"] {  
   /* Add your styles here */
}

/* ---Cross-Sells Anchor--- */
[data-rebuy-cart-anchor="crossSells"] {  
   /* Add your styles here */
}

/* ---Footer Anchor--- */
[data-rebuy-cart-anchor="footer"] {  
   /* Add your styles here */
}

Smart Cart Components

Components are all the awesome individual content features of the Smart Cart such as the Cross-Sell Widgets, Announcement Bar, and Tiered Progress Bar. Most of which are draggable within other anchored sections!

Cart Subtotal
Checkout Area
Cart Title / Title Bar
Login Button
Announcement Bar
Discount Code Input
Order Notes
Tiered Progress Bar

Below, you’ll find a dropdown with code snippets for styling different Components. It’s an extensive list of customizable aspects with CSS—enjoy exploring!

Additional Component Selectors

The available component selectors are:

/* ---Smart Cart Header--- */
[data-rebuy-component="header"] {  
   /* Add your styles here */
}

/* ---Cart Items Component--- */
[data-rebuy-component="cart-items"] {  
   /* Add your styles here */
}

/* ---Announcement Bar Component--- */
[data-rebuy-component="announcement-bar"] {  
   /* Add your styles here */
}

/* ---Title Bar Component--- */
[data-rebuy-component="title-bar"] {  
   /* Add your styles here */
}

/* ---Cart Subtotal Component--- */
[data-rebuy-component="cart-subtotal"] {  
   /* Add your styles here */
}

/* ---Checkout Area Component--- */
[data-rebuy-component="checkout-area"] {  
   /* Add your styles here */
}

/* ---Login Component--- */
[data-rebuy-component="login"] {  
   /* Add your styles here */
}

/* ---Notes Component--- */
[data-rebuy-component="notes"] {  
   /* Add your styles here */
}

/* ---Cross-Sell Widget Component--- */
[data-rebuy-component="cross-sell-widget"] {  
   /* Add your styles here */
}

/* ---Progress Bar Component--- */
[data-rebuy-component="progress-bar"] {  
   /* Add your styles here */
}

/* ---Discount Code Input Component--- */
[data-rebuy-component="discount-input"] {  
   /* Add your styles here */
}

Example:

Replace yourColorHex with the #hex number of the color you want to use.

/* ---Smart Cart Header--- */
[data-rebuy-cart-anchor="header"] {
   background: #yourBackgroundColorHex;
}

Smart Cart Header

The Smart Cart Header [data-rebuy-cart-anchor="header"] Is an anchor that controls the appearance of the header in the Smart Cart. You can easily customize its style by adjusting the background color and add other properties using the code below.

Change The Header Background Color

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

/* ---Smart Cart Header--- */
[data-rebuy-cart-anchor="header"] {
   background: #yourBackgroundColorHex;
}

Available Components Within the Smart Cart Header Anchor

Cart Title Component
Login Button Component
Announcement Bar Component

The Goal Box: Tiered Progress Bar

The Tiered Progress Bar is a customizable progress bar that updates dynamically based on cart totals and visually represents the user’s progression toward a specific goal, such as earning a discount. You can modify the appearance, such as the fill color, using CSS.

Need help configuring the tiered progress bar?

Tiered Progress Bar and the Smart Cart

Tiered Progress Bar Meter Color

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* Progress Bar Fill Color */
[data-rebuy-component="progress-bar"] 
.rebuy-cart__progress-bar-meter-fill 
{    
    background: #yourColorHex;
}

Below, you’ll find a dropdown with code snippets for styling different parts of the Tiered Progress Bar Component. It’s an extensive list of customizable aspects with CSS—enjoy exploring!

Additional CSS Selectors For Tiered Progress Bar Elements

Include the Component Selector! [data-rebuy-component="progress-bar"]

For example:

/* Styles the progress step wrapper */
[data-rebuy-component="progress-bar"] 
.rebuy-cart__progress-step-wrapper 
{    
     /* Add your styles here */
}

/* Styles the overall progress bar component */
[data-rebuy-component="progress-bar"] 
{
    /* Add your styles here */
}

/* Styles the wrapper for the progress steps */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-step-wrapper 
{
    /* Add your styles here */
}

/* Styles each progress step */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-step 
{
    /* Add your styles here */
}

/* Styles the progress step when it is marked as complete */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-step.complete 
{
    /* Add your styles here */
}

/* Styles the icon within each progress step */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-step-icon 
{
    /* Add your styles here */
}

/* Styles the label within each progress step */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-step-label 
{
    /* Add your styles here */
}

/* Styles the wrapper for the progress bar itself */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-bar-wrapper 
{
    /* Add your styles here */
}

/* Styles the progress bar meter */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-bar-meter 
{
    /* Add your styles here */
}

/* Styles the fill inside the progress bar meter */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-bar-meter-fill 
{
    /* Add your styles here */
}

/* Styles the prompt that shows feedback below the progress bar */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-bar-prompt 
{
    /* Add your styles here */
}

/* Styles the container for the earned gifts area */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gifts 
{
    /* Add your styles here */
}

/* Styles the title for the earned gifts area */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gifts-title 
{
    /* Add your styles here */
}

/* Styles the container that holds each gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gifts-container 
{
    /* Add your styles here */
}

/* Styles each individual gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift 
{
    /* Add your styles here */
}

/* Styles the image for each gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-image 
{
    /* Add your styles here */
}

/* Styles the info section for each gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-info 
{
    /* Add your styles here */
}

/* Styles the title of the gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-title 
{
    /* Add your styles here */
}

/* Styles the variant title of the gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-variant-title 
{
    /* Add your styles here */
}

/* Styles the container for variant selection of the gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-selection-container 
{
    /* Add your styles here */
}

/* Styles the button for single variant gift selection */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-variant-readd 
{
    /* Add your styles here */
}

/* Styles the container for multi-variant gift selection */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-variant-select-container 
{
    /* Add your styles here */
}

/* Styles the select dropdown for choosing a variant */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-variant-select 
{
    /* Add your styles here */
}

/* Styles the prompt for the gift variant select dropdown */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-variant-select-prompt 
{
    /* Add your styles here */
}

/* Styles the remove button for the selected gift */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-remove 
{
    /* Add your styles here */
}

Body Anchor

Using the power of CSS, you might want to change the background color or add extra padding. Below is a code snippet you can copy/paste and modify as needed.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* ---Smart Cart Body Anchor --- */
[data-rebuy-cart-anchor="body"] { 
  background: #yourColorHex;
}

Available Components You Can Style Within the Smart Cart Body Anchor

Cart Items Component
Announcement Bar Component
Cross-Sell Widget Component

Below, you’ll find a dropdown with code snippets for styling different parts of the Body Anchor. It’s an extensive list of customizable aspects with CSS—enjoy exploring!

Additional CSS Selectors For Smart Cart's Body Elements

Include the Component Selector! [data-rebuy-component="cart-items"]

For example:

/* Styles the flyout item media */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-media 
{    
     /* Add your styles here */
}

/* Styles the cart items */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item {    
     /* Add your styles here */
}

/* Styles the flyout item media */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-media {    
     /* Add your styles here */
}

/* Styles the flyout item info */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-info {    
     /* Add your styles here */
}

/* Styles the flyout item product title */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-product-title {    
     /* Add your styles here */
}

/* Styles the flyout item variant title */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-variant-title {    
     /* Add your styles here */
}

/* Styles the flyout item discount message */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-discount-message {    
     /* Add your styles here */
}

/* Styles the flyout item properties */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-properties {    
     /* Add your styles here */
}

/* Styles the flyout item property */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property {    
     /* Add your styles here */
}

/* Styles the flyout item property with delivery frequency */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property--delivery-frequency {    
     /* Add your styles here */
}

/* Styles the flyout item property name */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property-name {    
     /* Add your styles here */
}

/* Styles the flyout item property separator */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property-separator {    
     /* Add your styles here */
}

/* Styles the flyout item property value */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property-value {    
     /* Add your styles here */
}

/* Styles the flyout item remove button */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-remove {    
     /* Add your styles here */
}

/* Styles the flyout item quantity */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity {    
     /* Add your styles here */
}

/* Styles the flyout item quantity widget */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity-widget {    
     /* Add your styles here */
}

/* Styles the flyout item quantity widget button */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity-widget-button {    
     /* Add your styles here */
}

/* Styles the flyout item quantity widget label */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity-widget-label {    
     /* Add your styles here */
}

/* Styles the flyout item price */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-price {    
     /* Add your styles here */
}

/* Styles the sale price */
[data-rebuy-component="cart-items"] 
.rebuy-money.sale {    
     /* Add your styles here */
}

/* Styles the compare-at price */
[data-rebuy-component="cart-items"] 
.rebuy-money.compare-at {    
     /* Add your styles here */
}

/* Styles the flyout item bundle */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle {    
     /* Add your styles here */
}

/* Styles the flyout item bundle show button */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-show-button {    
     /* Add your styles here */
}

/* Styles the flyout item bundle hide button */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-hide-button {    
     /* Add your styles here */
}

/* Styles the flyout item bundle children */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-children {    
     /* Add your styles here */
}

/* Styles the flyout item bundle child */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-child {    
     /* Add your styles here */
}

/* Styles the flyout item bundle child left */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-child-left {    
     /* Add your styles here */
}

/* Styles the flyout item bundle image container */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-image-container {    
     /* Add your styles here */
}

/* Styles the flyout item bundle image */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-image {    
     /* Add your styles here */
}

/* Styles the flyout item bundle child right */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-child-right {    
     /* Add your styles here */
}

/* Styles the flyout item bundle title */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-title {    
     /* Add your styles here */
}

/* Styles the flyout item bundle value */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-bundle-value {    
     /* Add your styles here */
}

/* Styles the buy more save more section */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-buy-more-save-more {    
     /* Add your styles here */
}

/* Styles the buy more save more container */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-buy-more-save-more-container {    
     /* Add your styles here */
}

/* Styles the buy more save more button container */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-buy-more-save-more-button-container {    
     /* Add your styles here */
}

/* Styles the buy more save more dynamic message text */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-buy-more-save-more-dynamic-message-text {    
     /* Add your styles here */
}

/* Styles the flyout item subscription section */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-subscription {    
     /* Add your styles here */
}

/* Styles the empty cart message */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-empty-cart {    
     /* Add your styles here */
}

Footer Anchor, Checkout Area

The Footer Anchor is a customizable section within the Smart Cart’s footer area that contains essential components such as the Cart Subtotal, Checkout Area, and Discount Code Input.

This code snippet allows you to set the background color of the entire footer section to match your desired theme or brand color scheme.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

Example:

/* ---FOOTER--- */
[data-rebuy-cart-anchor="footer"] { 
   background: #yourColorHex;
}

Below, you’ll find a dropdown with code snippets for styling different parts of the Footer Anchor. It’s an extensive list of customizable aspects with CSS—enjoy exploring!

Additional CSS Selectors For Smart Cart's Footer

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Include the Component Selector! [data-rebuy-component="cart-subtotal"]

For example:

/* ---Subtotal Label--- */
[data-rebuy-component="cart-subtotal"] 
.rebuy-cart__flyout-subtotal-label {  
   /* Add your styles here */
}

/* ---Footer Anchor--- */
[data-rebuy-cart-anchor='footer'] {  
   /* Add your styles here */
}

/* ---Cart Subtotal Component--- */
[data-rebuy-component="cart-subtotal"] {  
   /* Add your styles here */
}

/* ---Subtotal Label--- */
[data-rebuy-component="cart-subtotal"] 
.rebuy-cart__flyout-subtotal-label {  
   /* Add your styles here */
}

/* ---Subtotal Amount--- */
[data-rebuy-component="cart-subtotal"] .rebuy-cart__flyout-subtotal-amount {  
   /* Add your styles here */
}

/* ---Discount Input Component--- */
[data-rebuy-component="discount-input"] {  
   /* Add your styles here */
}

/* ---Discount Form--- */
[data-rebuy-component="discount-input"] .rebuy-cart__discount-form {  
   /* Add your styles here */
}

/* ---Input Wrapper with Floating Label--- */
[data-rebuy-component="discount-input"] .rebuy-input-wrapper--floating-label {  
   /* Add your styles here */
}

/* ---Discount Input Label--- */
[data-rebuy-component="discount-input"] .rebuy-input-label {  
   /* Add your styles here */
}

/* ---Discount Input Field--- */
[data-rebuy-component="discount-input"] #rebuy-cart__discount-input {  
   /* Add your styles here */
}

/* ---Apply Button--- */
[data-rebuy-component="discount-input"] .rebuy-button {  
   /* Add your styles here */
}

/* ---Checkout Area Component--- */
[data-rebuy-component="checkout-area"] {  
   /* Add your styles here */
}

/* ---Flyout Terms Section--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-terms 
{  
   /* Add your styles here */
}

/* ---Terms Checkbox--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-terms-checkbox 
{  
   /* Add your styles here */
}

/* ---Terms Label--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-terms-label 
{  
   /* Add your styles here */
}

/* ---Checkout Button--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__checkout-button 
{  
   /* Add your styles here */
}

/* ---View Cart Button--- */
[data-rebuy-component="checkout-area"]
.rebuy-cart__view-cart-button {  
   /* Add your styles here */
}

/* ---Continue Shopping Button--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__continue-shopping-button {  
   /* Add your styles here */
}

/* ---Additional Checkout Buttons Section--- */
[data-rebuy-cart-additional-checkout-buttons] {  
   /* Add your styles here */
}

/* ---Installments Text--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-installments {  
   /* Add your styles here */
}

/* ---Installments Afterpay Link--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-installments a {  
   /* Add your styles here */
}

Cart Subtotal

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* "Subtotal" Text Color */
[data-rebuy-component="cart-subtotal"] 
.rebuy-cart__flyout-subtotal-label 
{    
     color: #2f2f2f;
}

/* Subtotal PRICE color: */
[data-rebuy-component="cart-subtotal"] 
.rebuy-cart__flyout-subtotal-final-amount 
{    
     color: #ff0000;
     font-weight: bolder;
}

Hide the Subtotal Compare At Amount

Use this snippet to remove the Smart Cart's Subtotal Strikethrough Price. Or you can remove the display: none; property and replace it with other styling properties

/* Cart Subtotal Sale Strikethrough Amount */
[data-rebuy-component="cart-subtotal"] 
.rebuy-cart__flyout-subtotal-compare-amount 
{
    display: none;
}

Checkout Button

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* Target the Checkout Button */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__checkout-button 
{ 
   color: #ffffff;
   background: #yourColorHex; 
   border-color: #yourColorHex; 
}

Below, you’ll find a dropdown with code snippets for styling different parts of the Checkout Area Component. It’s a list of customizable aspects with CSS—enjoy exploring!

Additional CSS Selectors For Checkout Area Elements

Include the Component Selector! [data-rebuy-component="checkout-area"]

For example:

/* ---Flyout Terms Section--- */
[data-rebuy-component="checkout-area"]
.rebuy-cart__flyout-terms 
{  
   /* Add your styles here */ 
}

/* ---Checkout Area Component--- */
[data-rebuy-component="checkout-area"] {  
   /* Add your styles here */
}

/* ---Flyout Terms Section--- */
[data-rebuy-component="checkout-area"]
.rebuy-cart__flyout-terms 
{  
   /* Add your styles here */ 
}

/* ---Terms Checkbox--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-terms-checkbox 
{  
   /* Add your styles here */
}

/* ---Terms Label--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-terms-label {  
   /* Add your styles here */
}

/* ---Checkout Button--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__checkout-button {  
   /* Add your styles here */
}

/* ---View Cart Button--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__view-cart-button 
{  
   /* Add your styles here */
}

/* ---Continue Shopping Button--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__continue-shopping-button {  
   /* Add your styles here */
}

/* ---Additional Checkout Buttons Section--- */
[data-rebuy-cart-additional-checkout-buttons] {  
   /* Add your styles here */
}

/* ---Installments Text--- */
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-installments {  
   /* Add your styles here */
}

/* ---Installments Afterpay Link--- */ 
[data-rebuy-component="checkout-area"] 
.rebuy-cart__flyout-installments a {  
   /* Add your styles here */
}

Shop Pay Button

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* ShopPay Button */
.rebuy-cart__shop-pay-button {  
   background: #yourColorHex !important;
   border-color: #yourColorHex !important;
}

NOTICE

!important tags can be used to guarantee your style applies.
You CANNOT Change the color of the ShopPay Logo itself.

Discount Code Input

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* Discount Code Input Box */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-form 
.rebuy-input {
    background: #yourColorHex; 
    border-radius: 8px; /* Rounded Border */
}
/* Discount Code Apply Button */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-form 
.rebuy-button {
    background: #yourColorHex; 
    border-radius: 8px; /* Rounded Border */
}

Below, you’ll find a dropdown with code snippets for styling different parts of the Discount Code Component. It’s an extensive list of customizable aspects with CSS—enjoy exploring!

More Discount Code Elements

Include the Component Selector! [data-rebuy-component="discount-input"]

For example:

/* Discount Code Input Box */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-form 
.rebuy-input {
    background: #yourColorHex; 
    border-radius: 8px; /* Rounded Border */
}

/* ---Discount Input Component--- */
[data-rebuy-component="discount-input"] {  
   /* Add your styles here */
}

/* ---Discount Form--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-form 
{  
   /* Add your styles here */
}

/* ---Input Wrapper with Floating Label--- */
[data-rebuy-component="discount-input"] 
.rebuy-input-wrapper--floating-label 
{  
   /* Add your styles here */
}

/* ---Discount Input Label--- */
[data-rebuy-component="discount-input"] 
.rebuy-input-label 
{  
   /* Add your styles here */
}

/* ---Discount Input Field--- */
[data-rebuy-component="discount-input"] 
#rebuy-cart__discount-input 
{  
   /* Add your styles here */
}

/* ---Apply Button--- */
[data-rebuy-component="discount-input"] 
.rebuy-button 
{  
   /* Add your styles here */
}

/* ---Discount Input Component--- */
[data-rebuy-component="discount-input"] {  
   /* Add your styles here */
}

/* ---Discount Container--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-container 
{  
   /* Add your styles here */
}

/* ---Discount Tag--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-tag 
{  
   /* Add your styles here */
}

/* ---Discount Tag Icon--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-tag-icon 
{  
   /* Add your styles here */
}

/* ---Discount Tag Text--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-tag-text 
{  
   /* Add your styles here */
}

/* ---Discount Tag Remove--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-tag-remove 
{  
   /* Add your styles here */
}

/* ---Discount Amount--- */
[data-rebuy-component="discount-input"] 
.rebuy-cart__discount-amount 
{  
   /* Add your styles here */
}

Empty Cart "Shop Now" Button

Similar to the Checkout Button, you can modify the Background Color, Text Color, Border, Roundness, and Font for the Empty Cart "Shop Now" Button that redirects the customer to your products.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.

/* Your cart is empty! Shop Now Button */
.rebuy-cart__flyout-empty-cart a {
   color: #yourColorHex; /* text color */
   background: #yourColorHex;
   border-color: #yourColorHex;
   border-radius: 4px;
}

Announcement Bar Component

The Announcement Bar component can be easily customized to match your store’s branding and style. Use the following code to target the Announcement Bar specifically and adjust its appearance with custom CSS.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.
Modify as needed CSS Property Reference Sheet

/* ---Announcement Bar--- */
[data-rebuy-component="announcement-bar"] {  
    background: #yourColorHex;
    color: #yourColorHex; /* text color */
    text-transform: uppercase;
    font-weight: bold;
}

Below, you’ll find a dropdown with code snippets for styling different parts of the Announcement Bar Component. Style each Announcement bar slider with CSS—enjoy exploring!

ADDITIONAL Elements you can style within the Announcement Bar Component:

For styling within the Announcement Bar Component [data-rebuy-component="announcement-bar"], you can target various elements such as the announcement text, background, and more.

Best Practices

Modify the code blocks below, eg. the background and color values to suit your branding.
Get Hex color codes
Remove/Modify or Add additional properties.
CSS Property Reference Sheet
Adjusting the Slider speed is NOT supported.

/* Announcement Bar Container */  
[data-rebuy-component="announcement-bar"] {  
   background: #ff0000 !important; /* Red background */  
}  
  
/* Announcement Main Text Style */  
[data-rebuy-component='announcement-bar'] .is-active {  
   color: #ffffff !important; /* White text */  
   font-size: 16px !important;  
}  
  
/* 2nd Message Text Styling */  
[data-rebuy-component="announcement-bar"] #splide01-slide02 {  
   color: #00BCD4 !important; 
   font-size: 14px !important;  
}  
  
/* 3rd Message Text Styling */  
[data-rebuy-component="announcement-bar"] #splide01-slide03 {  
   color: #FFEB3B !important; 
   font-size: 14px !important;  
}

/* ETC. #splide01-slideX */

Order Notes Component

The Order Notes Component allows customers to add custom notes or special instructions to their orders before checkout. It provides a text area within the cart where customers can include specific requests or comments regarding their purchase.

Enable Order Notes

This component is highly customizable, allowing for changes to the background color, text styles, and placeholder text.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.
Modify as needed CSS Property Reference Sheet

Example:

/* Order Notes Component */
[data-rebuy-component="notes"] { 
    width: auto; 
    margin: 15px;  
    padding: 15px;  
    background: #ffffff;  
    border-radius: 10px;  
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),   
                0 2px 4px rgba(0, 0, 0, 0.06); /* Soft, multi-layered shadow */  
}

Order Notes Placeholder

The Notes Placeholder section involves the styling of the text box where users input their order notes. This includes the background color of the input field and the placeholder text that guides users on what to type. Custom styles can be applied to both the input area and the placeholder text, making the section more user-friendly and visually appealing.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.
Modify as needed CSS Property Reference Sheet

/* Style the text box area within the notes section */
[data-rebuy-component="notes"] 
#rebuy-cart__notes.rebuy-textarea.rebuy-cart__notes-textarea {
    background: #yourColorHex;
}

/* Style the Placeholder Text within the text box */
[data-rebuy-component="notes"] 
#rebuy-cart__notes.rebuy-textarea.rebuy-cart__notes-textarea::placeholder {
    color: #yourColorHex !important;
}

!important tags can be used to guarantee your style applies.

Be aware that this could potentially override other styles you may have

Below, you’ll find a dropdown with code snippets for styling different parts of the Order Notes Component. It’s a list of customizable aspects with CSS—enjoy exploring!

Additional Order Notes Elements to Style:

Include the Component Selector! [data-rebuy-component="notes"]

For example:

/* Styles the notes toggle label */
[data-rebuy-component="notes"] 
.rebuy-cart__notes-toggle {
    /* Add your styles here */
}


/* Selects the notes component */
[data-rebuy-component="notes"] {
    /* Add your styles here */
}

/* Styles the entire notes section */
[data-rebuy-component="notes"] 
.rebuy-cart__notes {
    /* Add your styles here */
}

/* Styles the notes toggle label */
[data-rebuy-component="notes"] 
.rebuy-cart__notes-toggle {
    /* Add your styles here */
}

/* Styles the input checkbox within the notes toggle */
[data-rebuy-component="notes"] 
.rebuy-cart__notes-toggle-input.rebuy-checkbox {
    /* Add your styles here */
}

/* Styles the span that labels the notes toggle */
[data-rebuy-component="notes"] 
.rebuy-cart__notes-toggle-label {
    /* Add your styles here */
}

/* Styles the content area of the notes section */
[data-rebuy-component="notes"] 
.rebuy-cart__notes-content {
    /* Add your styles here */
}

/* Styles the textarea within the notes section */
[data-rebuy-component="notes"] 
#rebuy-cart__notes.rebuy-textarea.rebuy-cart__notes-textarea {
    /* Add your styles here */
}

/* Styles the small element showing remaining characters */
[data-rebuy-component="notes"] 
#rebuy-cart-characters-remaining {
    /* Add your styles here */
}

Cart Items Component

For styling within the Cart Items Component [data-rebuy-component="cart-items"] you can target various elements that control the appearance of the line items in the cart.

Below, you’ll find a dropdown with code snippets for styling different parts of the Cart Line Items. It’s an extensive list of customizable aspects with CSS—enjoy exploring!

Key Elements you can style within the Cart Items Component:

Best Practices

Modify the code blocks below, eg. the background and color values to suit your branding.
Get Hex color codes
Remove/Modify or Add additional properties.
CSS Property Reference Sheet

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

For demonstration purposes, we’ve included example CSS properties for different Smart Cart Line Item elements.

/* Parent Container Cart Item component Elements */
[data-rebuy-component="cart-items"] {
  /* Target the Cart Items section */
}

/* Cart Item container */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item { }

/* Product Image */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-media img 
{
  width: 80px !important;
  height: 80px !important;
}

/* Product Title */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-product-title 
{
  font-size: 18px !important;
  font-weight: bold !important;
  color: #ff0000 !important;
}

/* Variant Title (e.g., size or color) */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-variant-title 
{
  font-size: 16px !important;
  font-style: italic !important;
  color: #ff0000 !important;
}

/* Discount Message */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-discount-message 
{
  font-size: 14px !important;
  color: #ff0000 !important;
}

/* Product Properties (e.g., custom properties like delivery frequency) */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-properties {
  font-size: 14px !important;
  color: #ff0000 !important;
}

/* Individual Property (Name) */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property-name 
{
  font-weight: bold !important;
  color: #ff0000 !important;
}

/* Individual Property (Value) */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-property-value 
{
  color: #ff0000 !important;
}

/* Quantity Selector Styling */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity-widget 
{
  background: #ff0000 !important;
}

/* Quantity Widget Buttons */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity-widget-button 
{
  background: #ff0000 !important;
  color: #000000 !important;
  border-radius: 10% !important;
}

/* Quantity Widget Label */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-quantity-widget-label 
{
  font-size: 16px !important;
  color: #000000 !important;
}

/* Item Price */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-price .rebuy-money 
{
  font-size: 16px !important;
  color: #ff0000 !important;
}

/* Sale Price */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-price .sale {
  color: #ff0000 !important;
  text-decoration: none !important;
}

/* Compare at Price */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-price .compare-at 
{
  color: #ff0000 !important;
  text-decoration: line-through !important;
}

/* Remove Item Button */
[data-rebuy-component="cart-items"] 
.rebuy-cart__flyout-item-remove 
{
  background-color: transparent !important;
  border: none !important;
  color: #ff0000 !important;
  cursor: pointer !important;
}

Cross-Sell Widget Component

The Cross-Sell Widget Component section is a moveable part of the Smart Cart designed to recommend additional products to customers based on the contents of their cart.

Looking to customize elements within the Cross-Sell Widget itself?

Check out our CSS guide here

Custom Style the Cart Cross-Sell Widget

The Smart Cart's Widgets could be used within the Cross-Sell Anchor [data-rebuy-cart-anchor='crossSells'] however for simplicity we can style it by targeting it by component since you may want to move it around to other areas of the cart and keep the same styling.

/* ---Cross-Sell Widget Component--- */
[data-rebuy-component="cross-sell-widget"] {  
   /* Add your styles here */
}

In the example below, lets give it a cool rounded look with a shadow!

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.
Modify as needed CSS Property Reference Sheet

/* ---Cross-Sell Widget Component--- */
[data-rebuy-component=cross-sell-widget] {
    margin: 15px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 
                0 2px 4px rgba(0, 0, 0, 0.06); /* Soft, multi-layered shadow */
}

Change the Background Color for the Smart Cart's Second Column

Copy/paste or modify the code snippet below to style the container element that holds the Cross-Sells Anchor

More info on Smart Cart's Column Layouts

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.
Modify as needed CSS Property Reference Sheet

/* Background Color for Second Column */
.rebuy-cart__column--secondary {    
    background: #yourColorHex !important;    
}

Buy More Save More

This feature encourages customers to increase their purchase quantity by offering tiered discounts. You can customize its appearance with additional CSS to enhance its design and alignment with your branding.

Where to add CSS?

Global SETTINGS (Gear Icon) -> Advanced -> Custom CSS Code Box

Replace yourColorHex with the #hex number of the color you want to use.
Modify as needed CSS Property Reference Sheet

/* Buy More Save More Buttons */
.rebuy-cart__flyout-item-buy-more-save-more-button {  
    background: #yourColorHex;
    border-color: #yourColorHex;  
    color: #yourColorHex;  
}

Remember!

The background: property applies the background color
The color: property applies the TEXT color
CSS Property Reference Sheet

Below, you’ll find a dropdown with code snippets for styling different parts of the Buy More Save More Feature—enjoy exploring!

Additional Buy More Save More Selectors

/* ---Buy More Save More Section--- */
.rebuy-cart__flyout-item-buy-more-save-more {  
   /* Add your styles here */
}

/* ---Buy More Save More Container--- */
.rebuy-cart__flyout-item-buy-more-save-more-container {  
   /* Add your styles here */
}

/* ---Button Container--- */
.rebuy-cart__flyout-item-buy-more-save-more-button-container {  
   /* Add your styles here */
}

/* ---Buy More Save More Button--- */
.rebuy-cart__flyout-item-buy-more-save-more-button {  
   /* Add your styles here */
}

Rebuy Support Policy for Customizations

At Rebuy, we are committed to providing exceptional support for features and functionalities within the standard Rebuy package. However, our support services do not extend to third-party plugins or customizations beyond the scope of Rebuy.

SUPPORT POLICY

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
Third-party integrations

Please refer to our policy page Please be mindful of this when proceeding.

Get matched with the right Service Partner

If you don’t have access to a developer, we can connect you with our partner team to discuss your project and explore options for one of our accredited experts to assist you.

Find the perfect partner for your project or let us introduce you to one of our trusted partners for free. You can book a consultation here:

Meet Our Partners

Conclusion

Through CSS you can easily customize the look and feel of your Rebuy Smart Cart to enhance the shopping experience for your customers. Experiment with different styles and find the perfect design that aligns with your store's branding. Your customers will appreciate the personalized touch and you may see an increase in sales as a result!

For more information on customizing your Rebuy Widgets, check out our other help center articles:

Custom Style the Cart Cross-Sell Widget

Customize the Product Add-Ons Widget

Customize the Dynamic Bundle Widget

CSS Styling Tricks for Customizing Smart Search

CSS Tricks for Customizing the Legacy Smart Cart

Sample Smart Cart Experiments

CSS Styling Tricks for Customizing Smart Search

Customize the Dynamic Bundle Widget

Custom Style the Cart Cross-Sell Widget