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. To add custom CSS to the Rebuy Smart Cart, use the built-in Custom CSS box in your Smart Cart's settings. The CSS you add belongs to that one Smart Cart, so it does not carry over to another Smart Cart in your account. It is not limited to the inside of the cart, though: the Smart Cart loads on every page of your store, which means the CSS loads on every page and styles any element on the page that your selector matches. Scope every selector to a Smart Cart component, as shown throughout this guide, so your styling stays inside the cart.
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: Scope every Smart Cart selector, and use a component value that exists. Smart Cart CSS needs scoping because the Smart Cart loads on every page of your store, so its stylesheet loads on every page too. Scope your Smart Cart CSS one of two ways. To target the whole cart, use #rebuy-cart .rebuy-cart__flyout. To target one part of the cart, use a [data-rebuy-component="..."] selector from the fixed list of 14 component values below. Never use bare global selectors such as button, img, s, or del, because those would style your entire storefront.
Smart Cart Container CSS: Rounded Corners and Width
The Smart Cart container is the panel that slides out over your storefront and holds every cart element. Use the selectors in this section to change the container's rounded corners and width. These are separate from the Smart Cart anchors and components covered later in this guide, which style regions inside the container.
Which Selector Targets the Smart Cart Itself
The following table shows which selector targets the Smart Cart container and which selectors target regions inside it:
Selector | What it targets | Use it for |
| The full-screen overlay that holds the Smart Cart | Overlay background, stacking order |
| The Smart Cart panel itself, the visible cart that slides out | Rounded corners, width, outer margin, panel shadow |
| Regions inside the Smart Cart panel | Background color or spacing for one region |
The Smart Cart body anchor is a full-width region inside the panel that uses the same white background as the panel and has no visible outer edge of its own. Setting a border radius on [data-rebuy-cart-anchor="body"] produces no visible change to the Smart Cart's corners. Use #rebuy-cart .rebuy-cart__flyout for anything that affects the shape or size of the Smart Cart itself.
Change the Smart Cart Rounded Corners
The Smart Cart panel has a border radius of 15px by default. To change how rounded the Smart Cart's corners are, add this to your Smart Cart's Custom CSS box:
/* Smart Cart Container Rounded Corners */
#rebuy-cart .rebuy-cart__flyout { border-radius: 0px; }
Use 0px for square corners, or a larger value such as 30px for more rounding. The #rebuy-cart prefix makes this selector more specific than Rebuy's own styling, so you do not need !important here.
Why Your Smart Cart Rounded Corners Do Not Apply on Mobile
On screens 480px wide and narrower, Rebuy displays the Smart Cart full-screen and sets the panel's border radius to 0 and its margin to 0. Your border radius still applies on wider screens, so the Smart Cart looks rounded on desktop and square on phones. To keep rounded corners on phones, the Smart Cart has to stop filling the screen, which means overriding the height and width as well:
/* Smart Cart Rounded Corners on Mobile */
@media screen and (max-width: 480px) {
#rebuy-cart .rebuy-cart__flyout {
border-radius: 15px;
margin: 10px;
max-width: calc(100% - 20px);
height: calc(100dvh - 20px);
}
}
Test this on a duplicate Smart Cart first, because it changes the Smart Cart from full-screen to inset on phones.
Change the Smart Cart Width
The Smart Cart panel is 500px wide by default in single column layouts, and its maximum width is the screen width minus 16px. In the Double Column and Double Column Right layouts, the panel is the smaller of 1000px or the screen width minus 16px. To change the Smart Cart's width:
/* Smart Cart Container Width */
#rebuy-cart .rebuy-cart__flyout {
width: 600px;
max-width: calc(100% - 16px);
}
Keep the max-width value so the Smart Cart still fits on narrow screens.
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 saved Smart Cart CSS produces no visible change, work through these checks in order. The order matters, because checks 1 and 2 make checks 3 and 4 pointless if they fail.
Confirm the element exists and copy its real class name. Open your live storefront, open the Smart Cart, right-click the element you want to style, and choose Inspect. Copy the class name exactly as it appears in the markup. Rebuy's Smart Cart class names are long and specific, for example
rebuy-cart__flyout-item-product-title. A class name that is close but not exact matches zero elements.Confirm your component value is one of the 14 valid values. Check your
[data-rebuy-component="..."]value against the table in The 14 Smart Cart Component Values above. A value that is not on that list, such ascartorheader, matches nothing and cancels every selector it prefixes.Add
!important. Rebuy's built-in styling is specific, so append!importantto each declaration, for examplebackground: #FFFFFF !important;.Confirm you saved to the correct Custom CSS box. Smart Cart CSS belongs to one Smart Cart. Confirm you saved it under Smart Carts → [Your Cart] → Global Settings (Gear Icon) → Advanced → Custom CSS Box for the Smart Cart that is actually live on your store.
Check what else is styling the element. In Inspect, look at the Styles panel for declarations with a line through them. The file name on the right shows which stylesheet is winning: your Shopify theme, another Rebuy widget's Custom CSS box, or Rebuy's built-in stylesheet.
Confirm you are viewing the live storefront. The Cart Editor preview does not always reflect saved Custom CSS. Test on your live storefront in a private browsing window.
If steps 1 and 2 both pass and your styling still does not apply, you have a specificity or conflict issue, and steps 3 and 5 will resolve it. If step 1 or 2 fails, no amount of !important or scoping will help, because the selector is not matching an element in the first place.
Which Smart Cart class names are commonly mistyped, and what are the correct ones?
Smart Cart line item elements are commonly mistyped using a .rebuy-cart-item__ prefix, which Rebuy does not use anywhere. Every cart line item element uses the prefix .rebuy-cart__flyout-item- instead, and the checkout, discount, and terms elements sit under .rebuy-cart__ rather than .rebuy-cart__flyout-. The table below maps the class names that match nothing to the Smart Cart selectors that work.
Class name that matches nothing | Correct Smart Cart selector |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Two Smart Cart class names are frequently assumed wrong but are correct as written: .rebuy-cart__flyout targets the cart panel, and .rebuy-cart__flyout-subtotal targets the subtotal.
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
yourColorHexwith your desired hex colorModify 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
PlaceholderFontwith your desired fontInclude the appropriate fallback (
sans-serif,serif, ormonospace)
/* 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
yourColorHexwith your desired hex colorReplace
PlaceholderFontwith 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
yourColorHexwith 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.
The Smart Cart Component Values
Smart Cart component selectors take the form [data-rebuy-component="value"], and Rebuy defines exactly 14 valid values. The table below lists every one, what it targets in the Smart Cart, and the anchor it normally sits in. Any other value, including cart and header, matches no element and applies no styling.
Component selector | What it targets in the Smart Cart |
| Cart title text and the cart title area |
| Announcement Bar messages |
| Tiered Progress Bar meter, steps, and free-gift area |
| Cart line items: image, product title, variant title, price, quantity, remove |
| Cart Tabs navigation and panels |
| Cross-Sell Widget rendered inside the cart |
| Content Block image, title, and text |
| Order Notes toggle and text area |
| Discount Code input, applied discount tags, and discount error text |
| Subtotal label and amount |
| Checkout button, Shop Pay button, accelerated checkout buttons, terms text |
| Login link in the cart |
| Account button in the cart |
| Cart Share control |
Components are draggable between anchors in the Cart Editor, so a component's position can change while its selector stays the same. Style anchors ([data-rebuy-cart-anchor="header"], "goalBox", "body", "crossSells", "footer") for region background, padding, and margin. Style components for everything else.
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
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
yourColorHexwith 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
yourColorHexwith 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
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
yourColorHexwith 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
yourColorHexwith 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
yourColorHexwith 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
yourColorHexwith 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
yourColorHexwith 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
yourColorHexwith 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
yourColorHexwith 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
yourColorHexwith your desired hex colorModify 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.
Use the CSS below to customize the Smart Cart order notes component background, text, and layout.
Replace
yourColorHexwith 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
backgroundandcolorvalues 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
yourColorHexwith 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
yourColorHexwith your desired hex colorRemember:
background:sets the background color;color:sets the text colorReplace
PlaceholderFontwith 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: