Smart Cart CSS Customization Guide

This guide covers how to use CSS to customize the visual style of your Rebuy Smart Cart. Whether you want to match your brand colors, change button styles, or adjust fonts, the Smart Cart's built-in CSS editor lets you apply custom styles without editing your theme code.

Note: This article covers the current Rebuy Smart Cart. If you're using the Legacy Smart Cart, see CSS Tricks for Customizing the Legacy Smart Cart.

Pro Tip: Test Before You Edit! Before making any changes, create a duplicate copy of your Live Smart Cart to test on first. View changes using Rebuy Preview Mode.

Where to Add Custom CSS to the Rebuy Smart Cart

The Smart Cart includes a built-in CSS Code Editor in its settings. CSS added here applies only to that specific Smart Cart and will not affect other parts of your storefront.

All CSS snippets in this guide go in the same place:

Rebuy Admin Dashboard → Smart Carts → [Your Cart] → Global Settings (Gear Icon) → Advanced → Custom CSS Box

Steps to Access the Smart Cart CSS Code Editor

Go to Smart Carts and select your cart to open your Smart Cart's editor.
Click Global Settings (gear icon).
Go to Advanced → Custom CSS Box.
Add your CSS and save.

Important: Always Use Component-Specific Selectors When adding CSS to the Smart Cart, always use Rebuy's component-specific selectors (e.g., [data-rebuy-component="checkout-area"]) rather than global selectors like button or img. Global selectors will affect your entire storefront, not just the Smart Cart. All selectors in this guide are scoped to specific Smart Cart components.

FAQ: Common Smart Cart Styling and Design Questions

How do I change the Smart Cart checkout button color?

To change the Smart Cart checkout button color, add the following CSS to your Smart Cart's Custom CSS Code Box.

Replace #yourColorHex with your brand's hex color code.

Replace "YourFontName" with your desired font and choose an appropriate fallback.

/* Smart Cart Checkout Button Color */
[data-rebuy-component="checkout-area"]
.rebuy-cart__checkout-button
{
   color: #yourColorHex;
   font-weight: 700;
   background: #yourColorHex;
   border-color: #yourColorHex;
   font-family: "YourFontName", sans-serif;
   font-size: 16px;
}

For the full list of checkout area CSS options, see Smart Cart Checkout Area and Button CSS below.

How do I change the Smart Cart background color to match my theme?

To change the Smart Cart background color, target the header, body, or footer anchor and their components separately. Replace #yourColorHex with your desired hex color.

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

/* Smart Cart title component Background */
[data-rebuy-component='title-bar'] { background: #yourColorHex; }

/* Smart Cart goalbox Background */
[data-rebuy-cart-anchor='goalBox'] { background: #yourColorHex; }

/* Smart Cart scroll area Background */
[data-rebuy-cart-scroll-area] { background: #yourColorHex; }
/* Changes background color for Smart Cart's scroll bar */ 
[data-rebuy-cart-scroll-area] {  
  scrollbar-color: #e90000 #e802b0; /* thumb color | track color */ 
}

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

/* Smart Cart Footer Background */
[data-rebuy-cart-anchor='footer'] { background: #yourColorHex; }

/* Smart Cart cross-sell section Background */
[data-rebuy-cart-anchor='crossSells'] { background: #yourColorHex; }

/* Smart Cart secondary column background */
.rebuy-cart__column--secondary { background: #yourColorHex !important; }

For detailed per-anchor CSS options, see the Smart Cart Header Anchor CSS, Smart Cart Body Anchor CSS, and Smart Cart Footer Anchor CSS sections below.

How do I change the font in the Rebuy Smart Cart?

To change the font across the entire Rebuy Smart Cart, add the following CSS. Replace "YourFontName" with your desired font and choose an appropriate fallback.

/* Smart Cart Font — Entire Cart */
.rebuy-cart * {
    font-family: "YourFontName", sans-serif;
}

For example: .rebuy-cart * { font-family: "Helvetica Neue", sans-serif; }

For per-element font changes, see the individual component sections below.

How do I change all the colors in the Smart Cart at once?

There is no single CSS selector that changes all Smart Cart colors at once. Colors must be set per component. To update your full Smart Cart color scheme, work through each of these sections in this guide:

Background colors — Smart Cart Header Anchor CSS, Smart Cart Body Anchor CSS, Smart Cart Footer Anchor CSS
Checkout button color — Smart Cart Checkout Button Color CSS
Cart title and text colors — Smart Cart Cart Title and Login Button CSS
Cart item text, prices, and quantity selectors — Smart Cart Cart Items Component CSS
Tiered Progress Bar fill color — Smart Cart Tiered Progress Bar CSS Customization

Why isn't my Smart Cart CSS applying?

If your Smart Cart CSS changes are not appearing, check the following:

Selector mismatch — Use browser developer tools (right-click > Inspect) to confirm your selector targets the correct Smart Cart element.
Specificity conflict — Add !important to override existing styles: background: #yourColorHex !important;
Wrong CSS box — Confirm you are adding CSS to the correct Smart Cart's Code Editor under Smart Carts → [Your Cart] → Global Settings (Gear Icon) → Advanced → Custom CSS Box.
Custom template — If you are using a custom Smart Cart template, CSS troubleshooting is outside Rebuy's support scope. See Rebuy Support Policy for Smart Cart Customizations below.

Smart Cart Single and Double Column Layout CSS

The Smart Cart can be displayed in two layout styles: Single Column or Double Column. Use the selectors below to style each column.

Single Column Layout — Primary Column CSS

The primary column holds the Smart Cart body and footer anchors.

/* Smart Cart — Primary Column Background */
.rebuy-cart__column--primary {
   background: #yourColorHex !important;
}

Add additional styling properties such as padding or border to further customize the appearance.

Double Column Layout — Secondary Column CSS

The secondary column holds the Cross-Sells anchor.

Replace yourColorHex with your desired hex color
Modify or remove other properties as needed

/* Smart Cart — Secondary Column Background */
.rebuy-cart__column--secondary {
    background: #yourColorHex !important;
}

How to Change the Smart Cart Font

To apply a single font across the whole Smart Cart, use the CSS below.

Replace PlaceholderFont with your desired font
Include the appropriate fallback (sans-serif, serif, or monospace)

/* Font Styling for the Entire Smart Cart */
.rebuy-cart * {
    font-family: "PlaceholderFont", /* Replace with your desired font */
                sans-serif /* or serif / monospace, depending on the font type */;
}

For example:

.rebuy-cart * {
    font-family: "Helvetica Neue", sans-serif;
}

To apply different fonts to specific cart elements, refer to the individual component sections below.

Smart Cart Cart Title and Login Button CSS

The following snippets cover styling the Smart Cart's "Your Cart" title text and the Smart Cart's customer login button.

Style the Smart Cart Cart Title Text

The Cart Title Component [data-rebuy-component-id="title_bar"] controls the appearance of the cart title in the Smart Cart.

Copy, paste, then modify as needed
Replace yourColorHex with your desired hex color
Replace PlaceholderFont with your desired font

/* Smart Cart — Cart Title Styling */
[data-rebuy-component-id='title_bar'].rebuy-cart__title {
    color: #yourColorHex;       /* Text color */
    background: #yourColorHex;  /* Background color */
    font-size: 24px;            /* Font size */
    font-weight: bold;          /* Bold text */
    font-family: "PlaceholderFont"; 
}

Center the Smart Cart Cart Title

/* Smart Cart — Center the Cart Title */
[data-rebuy-component-id='title_bar'].rebuy-cart__title { margin: auto; }

Add additional styling properties such as padding or text-align to achieve the desired look.

Smart Cart Login Button CSS

The Login Button Component [data-rebuy-component-id="login"] controls the appearance of the login button within the Smart Cart.

Replace yourColorHex with your desired hex color

/* Smart Cart — Login Button Styling */
[data-rebuy-component-id="login"] {    
   color: #yourColorHex; /* Text color */   
   background: #yourColorHex;    
   border-color: #yourColorHex;
}

Add additional styling properties such as padding or border-radius as needed.

Smart Cart Anchors and Components: Overview

Smart Cart uses a new architecture of anchors and components that enhances customization and flexibility.

Smart Cart Anchors

Anchors are fixed structural containers that organize different sections of the Smart Cart. Typically you only need to style anchors with background colors, padding, or margins. For styling specific elements, apply CSS at the component level instead.

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

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

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

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

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

Smart Cart Components

Components are the individual content features of the Smart Cart — such as the Cross-Sell Widgets, Announcement Bar, and Tiered Progress Bar. Most components are draggable between anchored sections. The full list of styleable components is covered in the sections below.

Additional Smart Cart Component Selectors

Always include the component selector to scope your styles to the Smart Cart only.

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

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

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

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

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

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

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

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

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

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

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

Smart Cart Header Anchor CSS

The Smart Cart Header [data-rebuy-cart-anchor="header"] is an anchor that controls the container behind the cart title, login button, and announcement bar.

Change the Smart Cart Header Background Color

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

Available Components Within the Smart Cart Header Anchor

Cart Title Component
Login Button Component
Announcement Bar Component

Smart Cart Tiered Progress Bar CSS Customization

The Smart Cart Tiered Progress Bar is a customizable progress bar that updates dynamically based on cart totals and visually represents a customer's progress toward a goal, such as earning a discount or free gift. Use the CSS below to modify its appearance.

Need help configuring the Tiered Progress Bar? Tiered Progress Bar and the Smart Cart

Smart Cart Tiered Progress Bar Meter Color

Replace yourColorHex with your desired hex color

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

Additional CSS Selectors for Smart Cart Tiered Progress Bar Elements

Always include the component selector: [data-rebuy-component="progress-bar"]

/* 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 a completed progress step */
[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 progress bar wrapper */
[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 text below the progress bar */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-bar-prompt { /* Add your styles here */ }

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

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

/* Styles the container holding 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 gift image */
[data-rebuy-component="progress-bar"] .rebuy-cart__progress-gift-image { /* Add your styles here */ }

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

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

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

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

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

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

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

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

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

Smart Cart Body Anchor CSS

The Smart Cart body anchor [data-rebuy-cart-anchor="body"] is the container for the cart's line items, cross-sell widgets, and announcement bar. Use the snippet below to change its background color or add padding.

Replace yourColorHex with your desired hex color

/* 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

Additional CSS Selectors for Smart Cart Body Elements

Always include the component selector: [data-rebuy-component="cart-items"]

/* 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 remove button */
[data-rebuy-component="cart-items"] .rebuy-cart__flyout-item-remove { /* 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 empty cart message */
[data-rebuy-component="cart-items"] .rebuy-cart__flyout-empty-cart { /* Add your styles here */ }

Smart Cart Footer Anchor CSS

The Smart Cart footer anchor [data-rebuy-cart-anchor="footer"] is the container for the cart subtotal, checkout area, and discount code input. Use the snippet below to set the footer background color.

Replace yourColorHex with your desired hex color

/* Smart Cart — Footer Anchor Background */
[data-rebuy-cart-anchor="footer"] {
   background: #yourColorHex;
}

Smart Cart Checkout Area and Button CSS

The Smart Cart Checkout Area contains the checkout button, Shop Pay button, discount code input, cart subtotal, and related elements. Use the component selector [data-rebuy-component="checkout-area"] to scope all styles to the Smart Cart only.

Smart Cart Checkout Button Color CSS

Replace yourColorHex with your desired hex color

/* Smart Cart — Checkout Button */
[data-rebuy-component="checkout-area"] .rebuy-cart__checkout-button 
{
   color: #yourColorHex !important;
   font-weight: 700 !important;
   background: #yourColorHex !important;
   border-color: #yourColorHex !important;
}

Smart Cart Cart Subtotal CSS

Replace yourColorHex with your desired hex color

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

/* Smart Cart — Subtotal Price Color */
[data-rebuy-component="cart-subtotal"] .rebuy-cart__flyout-subtotal 
{
     color: #ff0000;
     font-weight: bolder;
}

Smart Cart Subtotal Strikethrough Price CSS

Use this snippet to style the Smart Cart's subtotal compare-at (strikethrough) price.

Replace yourColorHex with your desired hex color

/* Smart Cart — Hide Subtotal Strikethrough Price */
[data-rebuy-component="cart-subtotal"] .rebuy-cart__flyout-subtotal-compare-amount
{
    color: #yourColorHex;
}

Smart Cart Discount Code Input CSS

The Smart Cart Discount Code Input is the field where customers enter coupon or promo codes at checkout. Use the CSS below to style the input box, apply button, and discount tag.

Replace yourColorHex with your desired hex color

/* Smart Cart — Discount Code Input Box */
[data-rebuy-component="discount-input"] .rebuy-cart__discount-form .rebuy-input {
    background: #yourColorHex;
}

/* Smart Cart — Discount Code Apply Button */
[data-rebuy-component="discount-input"] .rebuy-cart__discount-form .rebuy-button {
    background: #yourColorHex;
    color: #yourColorHex; /* text color */
}

Additional Smart Cart Discount Code Elements

Always include the component selector: [data-rebuy-component="discount-input"]

/* 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 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 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 */ }

Smart Cart Shop Pay Button CSS

Replace yourColorHex with your desired hex color

/* Smart Cart — Shop Pay Button */
.rebuy-cart__shop-pay-button {
   background: #yourColorHex !important;
   border-color: #yourColorHex !important;
}

Note: You can style the Shop Pay button background and border, but you cannot change the color of the Shop Pay logo itself.

Additional CSS Selectors for Smart Cart Checkout Area Elements

Always include the component selector: [data-rebuy-component="checkout-area"]

/* 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 */ }

Smart Cart Empty Cart "Shop Now" Button CSS

The Smart Cart's empty state displays a "Shop Now" button that redirects customers to your products.

Use the snippet below to modify the Smart Cart's empty cart "Shop Now" button background color, text color, border, or border radius if desired.

Replace yourColorHex with your desired hex color

/* Smart Cart — Empty Cart "Shop Now" Button */
.rebuy-cart__flyout-empty-cart a {
   color: #yourColorHex;       /* Text color */
   background: #yourColorHex;
   border-color: #yourColorHex;
   border-radius: 4px;
}

Smart Cart Announcement Bar Component CSS

The Smart Cart Announcement Bar component can be customized to match your store's branding. Use the component selector [data-rebuy-component="announcement-bar"] to scope all styles to the Smart Cart only.

Replace yourColorHex with your desired hex color
Modify or add additional CSS properties using the CSS Property Reference

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

Additional CSS Selectors for Smart Cart Announcement Bar Elements

Use these selectors to style individual slides within the Announcement Bar. Note: adjusting the slider speed is not supported.

/* Announcement Bar Container */
[data-rebuy-component="announcement-bar"] {
   background: #ff0000 !important;
}

/* Active Slide Text */
[data-rebuy-component='announcement-bar'] .is-active {
   color: #ffffff !important;
   font-size: 16px !important;
}

/* 2nd Slide Text */
[data-rebuy-component="announcement-bar"] #splide01-slide02 {
   color: #00BCD4 !important;
   font-size: 14px !important;
}

/* 3rd Slide Text */
[data-rebuy-component="announcement-bar"] #splide01-slide03 {
   color: #FFEB3B !important;
   font-size: 14px !important;
}

/* Continue pattern for additional slides: #splide01-slideX */

Smart Cart Order Notes Component CSS

The Smart Cart Order Notes component allows customers to add special instructions to their orders before checkout.

Enable Order Notes in the Smart Cart

Use the CSS below to customize the Smart Cart order notes component background, text, and layout.

Replace yourColorHex with your desired hex color

/* Smart Cart — 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);
}

Smart Cart Order Notes Placeholder CSS

Use the snippets below to style the text input area and placeholder text within the Order Notes component.

/* Smart Cart — Order Notes Text Input Background */
[data-rebuy-component="notes"]
#rebuy-cart__notes.rebuy-textarea.rebuy-cart__notes-textarea {
    background: #yourColorHex;
}

/* Smart Cart — Order Notes Placeholder Text Color */
[data-rebuy-component="notes"]
#rebuy-cart__notes.rebuy-textarea.rebuy-cart__notes-textarea::placeholder {
    color: #yourColorHex !important;
}

Note: !important guarantees the style applies. Be aware that this could potentially override other styles.

Additional Smart Cart Order Notes Elements to Style

Always include the component selector: [data-rebuy-component="notes"]

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

/* Entire Notes Section */
[data-rebuy-component="notes"] .rebuy-cart__notes { /* Add your styles here */ }

/* Notes Toggle Label */
[data-rebuy-component="notes"] .rebuy-cart__notes-toggle { /* Add your styles here */ }

/* Notes Toggle Checkbox */
[data-rebuy-component="notes"] .rebuy-cart__notes-toggle-input.rebuy-checkbox { /* Add your styles here */ }

/* Notes Toggle Label Text */
[data-rebuy-component="notes"] .rebuy-cart__notes-toggle-label { /* Add your styles here */ }

/* Notes Content Area */
[data-rebuy-component="notes"] .rebuy-cart__notes-content { /* Add your styles here */ }

/* Notes Textarea */
[data-rebuy-component="notes"] #rebuy-cart__notes.rebuy-textarea.rebuy-cart__notes-textarea { /* Add your styles here */ }

/* Characters Remaining Counter */
[data-rebuy-component="notes"] #rebuy-cart-characters-remaining { /* Add your styles here */ }

Smart Cart Cart Items Component CSS

The Smart Cart Cart Items component [data-rebuy-component="cart-items"] controls the appearance of line items in the cart — including product images, titles, prices, and quantity selectors.

Key Elements to Style Within the Smart Cart Cart Items Component

Modify background and color values to match your branding (Get hex color codes)
Remove, modify, or add additional CSS properties (CSS Property Reference)

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

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


/* Smart Cart — Variant Title */
[data-rebuy-component="cart-items"] .rebuy-cart__flyout-item-variant-title
{
  font-size: 16px !important;
  font-style: italic !important;
  color: #ff0000 !important;
}

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

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

/* Smart Cart — 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;
}

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

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

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

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

/* Smart Cart — 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;
}

Smart Cart Cross-Sell Widget Component CSS

The Smart Cart Cross-Sell Widget component is a moveable section of the Smart Cart that recommends additional products based on cart contents. Use the selector [data-rebuy-component="cross-sell-widget"] to style it regardless of which anchor it's placed in.

Looking to style the elements inside the Cross-Sell Widget itself? Custom Style the Cart Cross-Sell Widget

/* Smart Cart — Cross-Sell Widget Component */
[data-rebuy-component=cross-sell-widget] {
    margin: 15px;
    padding: 15px;
    background: #yourColorHex;
}

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

Use this snippet to style the container that holds the Smart Cart's Cross-Sells anchor in a double-column layout.

Replace yourColorHex with your desired hex color

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

Smart Cart Buy More Save More Feature CSS

The Smart Cart Buy More Save More feature encourages customers to increase their purchase quantity by offering tiered discounts.

Use the CSS below to customize the Smart Cart Buy More Save More appearance.

Replace yourColorHex with your desired hex color
Remember: background: sets the background color; color: sets the text color
Replace PlaceholderFont with your desired font

/* Smart Cart — Buy More Save More Buttons */
 .rebuy-cart__flyout-item-buy-more-save-more-button
 {
    color: #yourColorHex;
    background: #yourColorHex;
    border-color: #yourColorHex;
    font-family: PlaceholderFont;
    font-size: 16px;
 }

Rebuy Support Policy for Smart Cart Customizations

Rebuy provides support for features and functionality within the standard Rebuy package. Support does not extend to custom CSS troubleshooting, custom templates, or third-party integrations.

Unsupported Items for Smart Cart CSS

Custom template modifications and troubleshooting
Headless configurations and troubleshooting
Native cart configurations and troubleshooting
Custom CSS and JavaScript troubleshooting
Custom scripts
Third-party integrations

Please refer to our support policy page for full details.

Get Matched with a Service Partner

If you need a developer to help with custom Smart Cart styling or template work, Rebuy can connect you with an accredited partner at no cost.

Find the perfect partner for your project or book a consultation: Meet Our Partners

Related Resources

For more information on customizing your Rebuy widgets, see these guides:

CSS Styling Tricks for Customizing Smart Search

Custom Style the Cart Cross-Sell Widget

Easy CSS Customization for Your Rebuy Bundle Builder

Smart Collections CSS Guide