Smart Flows components are fully styleable. Every modal, banner, and timer ships with built-in CSS variables for colors, spacing, typography, and layout — plus class selectors for anything variables don't cover. This article walks through both, organized by component, so you can find what you need and apply it directly in the Custom CSS field in your flow editor.

Where to Add CSS in Smart Flows

There are two places to add CSS in Smart Flows:

A. The CSS step (node) in the flow editor: Add a CSS component directly into your flow. It injects styles globally on the page when that node executes. Use this for broad page-level styling or targeting non-Rebuy elements.

B. The Custom CSS field in each component's Modal Settings tab: Each component (Popup, Banner, BXGY, etc.) has a Custom CSS field in its sidebar. Styles added here can be scoped to that specific component or applied globally across all Smart Flow components.

How to Add CSS via the Custom CSS Field

Open the Smart Flow component you want to style (PopUp, Add Items to Cart, Buy X Get Y, or Website Banner).
Go to its Modal Settings tab in the sidebar.
Find the Custom CSS field.
Paste your CSS there and save.

Tip: Each Smart Flow component has a unique data-flow-component-id that scopes your CSS to that component only. To get started quickly, click Fill with example CSS in the Custom CSS editor. It pre-populates a template with the most common CSS variables for that component. Update the values to match your brand and delete any lines you don't need.

Scoping Your Smart Flows CSS

Important: The Custom CSS editor injects styles globally. To avoid affecting other Rebuy widgets like Smart Cart and Smart Search, wrap your variable overrides in a scoping selector.

Every CSS rule must be prefixed with one of the following:

.rebuy-flow-component — targets all Smart Flow components
[data-rebuy-component="popup"] (or "add-items-to-cart", "buy-x-get-y", "website-banner") — targets all components of that type
[data-flow-component-id="YOUR_COMPONENT_ID"] — targets one specific component

Examples:

/* Target all Smart Flow components */
.rebuy-flow-component .rsf-modal {
  --rsf-modal-bg-color: #000000;
}

/* Target all Buy X Get Y components */
[data-rebuy-component="buy-x-get-y"] .rsf-modal {
  --rsf-modal-bg-color: #000000;
}

/* Target one specific component */
[data-flow-component-id='b371db3a-478b-4ebe-bbdf-a91dcaf64b4a'] .rsf-modal {
  --rsf-modal-bg-color: #000000;
}

CSS Variables and Selectors by Component

CSS variables are named properties built into each Smart Flow component. You override them by writing the variable name and a new value — no digging into component markup required. For changes variables don't cover (custom fonts, text transform, element-level targeting), use the class selectors listed under each component.

Note: Some default values listed here (like modal background color) are wired to the store's theme colors. In those cases, the value shown is the fallback if no theme color is detected.

Smart Flows Modal: Layout, Colors, and Typography

Controls the overall appearance of the modal container — background, text, buttons, spacing, shadow, and border radius. These variables apply to PopUp, Add Items to Cart, and Buy X Get Y components.

CSS Variables

Set these inside .rebuy-flow-component .rsf-modal { }.

/* Background color and text color for Smart Flow modals */
.rebuy-flow-component .rsf-modal {
    --rsf-modal-bg-color: #ffffff;
    --rsf-modal-text-color: #000000;
    --rsf-modal-border-radius: 8px;
    --rsf-modal-button-border-radius: 4px;
}

Variable Name	Default Value	What It Changes
`--rsf-modal-bg-color`	`#fff`	Modal background color
`--rsf-modal-backdrop-color`	`rgb(0, 0, 0, 70%)`	Overlay/backdrop color behind the modal
`--rsf-modal-text-color`	`inherit`	General text color — applies to title, close icon, and footer as a fallback
`--rsf-modal-content-color`	`inherit`	Body content text color (overrides `--rsf-modal-text-color` for body only)
`--rsf-modal-title-color`	inherits `--rsf-modal-text-color`	Modal title text color
`--rsf-modal-title-font-size`	`20px`	Modal title font size
`--rsf-modal-title-font-weight`	`600`	Modal title font weight
`--rsf-modal-close-icon-color`	inherits `--rsf-modal-text-color`	Close button icon color
`--rsf-modal-line-height`	`normal`	Line height for all modal text
`--rsf-modal-max-width`	`768px`	Maximum modal width (responsive: `min(95vw, value)`)
`--rsf-modal-flex-gap`	`30px`	Gap between header, body, and footer sections
`--rsf-modal-padding`	`20px`	Inner padding for header, body, and footer
`--rsf-modal-border-radius`	`0`	Modal container corner radius
`--rsf-modal-button-border-radius`	`0`	Corner radius for primary, secondary, and prev buttons
`--rsf-modal-image-border-radius`	`0`	Corner radius for images inside the modal
`--rsf-modal-divider-color`	`#eee`	Color of header bottom border and footer top border
`--rsf-modal-shadow`	`0 0 10px 2px`	Box shadow blur and spread values
`--rsf-modal-shadow-color`	`#66666650`	Box shadow color
`--rsf-modal-primary-button-alignment`	`center`	Footer button alignment (`start`, `center`, `end`)

CSS Selectors

Targets the structural elements of the Smart Flows modal — backdrop, container, header, content area, and footer. Shared across PopUp, Add Items to Cart, and Buy X Get Y components.

Set these inside .rebuy-flow-component

.rebuy-flow-component .rsf-modal-container {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector	Also Available As	Description
`.rsf-modal-backdrop { }`	—	The dark overlay behind the modal (only present when backdrop is enabled in Display settings)
`.rsf-modal { }`	—	The outermost modal positioning wrapper (fixed, centered on screen)
`.rsf-modal-container { }`	`#rsf-modal-container { }`	The visible modal box — controls background, border-radius, shadow, scroll
`.rsf-modal-header { }`	`#rsf-modal-header { }`	The header row containing the title and close button
`.rsf-modal-title { }`	`#rsf-modal-title { }`	The modal title text element
`.rsf-modal-close { }`	—	The close (✕) button
`.rsf-modal-content { }`	`#rsf-modal-content { }`	The body/content area of the modal
`.rsf-modal-content-description { }`	—	The description text block within the body (hidden when empty)
`.rsf-modal-footer { }`	`#rsf-modal-footer { }`	The footer row containing buttons and pagination
`.rsf-modal-primary-button { }`	`.rebuy-button { }`	The primary CTA button
`.rsf-modal-secondary-button { }`	`.rebuy-button.secondary { }`	The secondary CTA button
`.rsf-modal-prev-button { }`	—	The "Previous" pagination button
`.rsf-modal-pagination { }`	—	Pagination row containing nav buttons and page indicator
`.rsf-modal-pagination-indicator { }`	—	The "Product X of Y" page indicator text
`.rsf-modal-footer-label { }`	—	Optional footer label text element

Smart Flows Modal: Product Images

Controls the size, shape, and display of product images inside the modal. Applies to PopUp, Add Items to Cart, and Buy X Get Y components.

CSS Variables

Set these inside .rebuy-flow-component .rsf-modal { }.

/* Product image sizing and shape */
.rebuy-flow-component .rsf-modal {
    --rsf-modal-product-image-max-height: 200px;
    --rsf-modal-product-image-border-radius: 8px;
    --rsf-modal-product-image-object-fit: contain;
    --rsf-modal-products-per-row: 2;
}

Variable Name	Default Value	What It Changes
`--rsf-modal-product-image-max-height`	`200px`	Maximum height of product images
`--rsf-modal-product-image-width`	`auto`	Width of product image container
`--rsf-modal-product-image-border-radius`	`0`	Corner radius on product images
`--rsf-modal-product-image-background`	`transparent`	Background color behind product images
`--rsf-modal-product-image-object-fit`	`fill`	Image scaling behavior (`fill`, `contain`, `cover`)
`--rsf-modal-product-image-aspect-unit-width`	`1`	Aspect ratio width unit (e.g., `1` in `1/1`)
`--rsf-modal-product-image-aspect-unit-height`	`1`	Aspect ratio height unit (e.g., `1` in `1/1`)
`--rsf-modal-product-image-gap`	`10px`	Gap between products in grid layouts
`--rsf-modal-products-per-row`	`1`	Number of product columns in grid

Smart Flows Add Items to Cart

CSS selectors for the Add Items to Cart component — covering the product display, image container, variant option buttons, swatches, and price elements.

CSS Selectors

Set these inside .rebuy-flow-component

.rebuy-flow-component .rsf-add-items-to-cart {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector	Description
`.rsf-add-items-to-cart { }`	Outer wrapper for the product content area
`.rsf-add-items-to-cart-product-image-container { }`	Product image container (controls aspect ratio, max-height, background)
`.rsf-add-items-to-cart-product-image { }`	The product `<img>` element
`.rsf-add-items-to-cart-product-details { }`	Product title/details wrapper
`.rsf-add-items-to-cart-variant-price-details { }`	Price row (contains price and compare-at price)
`.rsf-add-items-to-cart-product-options { }`	Wrapper for all variant options
`.rsf-add-items-to-cart-product-option { }`	Wrapper for a single option group
`.rsf-add-items-to-cart-product-option-button-container { }`	Container for button-style variant options
`.rsf-add-items-to-cart-product-option-image-container { }`	Container for image-style variant options
`.rsf-add-items-to-cart-product-option-swatch-container { }`	Container for swatch-style variant options
`.rsf-add-items-to-cart-product-option-button { }`	Individual button-style option
`.rsf-add-items-to-cart-product-option-image { }`	Individual image-style option button
`.rsf-add-items-to-cart-product-option-swatch { }`	Individual color swatch button

Smart Flows Buy X Get Y

CSS variables and selectors for the Buy X Get Y component — including the post-add offer card, product selection grid, images, variant options, and price elements.

CSS Variables

Set these inside .rebuy-flow-component .rsf-modal { }.

/* Buy X product image sizing for BXGY post-add offer */
.rebuy-flow-component .rsf-modal {
    --rsf-post-add-offer-buy-x-image-max-height: 80px;
    --rsf-post-add-offer-buy-x-image-border-radius: 4px;
    --rsf-post-add-offer-card-max-width: 300px;
}

Variable Name	Default Value	What It Changes
`--rsf-post-add-offer-buy-x-image-max-height`	`80px`	Max height (also sets width/max-width) of the "buy X" product image
`--rsf-post-add-offer-buy-x-image-border-radius`	`0`	Corner radius on the "buy X" image
`--rsf-post-add-offer-buy-x-image-object-fit`	`contain`	Image scaling for the "buy X" image
`--rsf-post-add-offer-buy-x-image-aspect-unit-width`	`1`	Aspect ratio width unit for "buy X" image
`--rsf-post-add-offer-buy-x-image-aspect-unit-height`	`1`	Aspect ratio height unit for "buy X" image
`--rsf-post-add-offer-card-max-width`	`300px`	Max width of the post-add offer card

CSS Selectors

Set these inside .rebuy-flow-component

.rebuy-flow-component .rsf-buy-x-get-y {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector	Description
`.rsf-buy-x-get-y { }`	Outer wrapper for the product content area
`.rsf-buy-x-get-y-product-image-container { }`	Product image container
`.rsf-buy-x-get-y-product-image { }`	The product `<img>` element
`.rsf-buy-x-get-y-product-details { }`	Product title/details wrapper
`.rsf-buy-x-get-y-variant-price-details { }`	Price row (contains price and compare-at price)
`.rsf-buy-x-get-y-product-selection-container { }`	CSS grid wrapper for the multi-product selection page
`.rsf-buy-x-get-y-product-selection-product { }`	Individual product card in the selection grid
`.rsf-buy-x-get-y-product-selection-product-title { }`	Product title in the selection grid
`.rsf-buy-x-get-y-product-selection-product-details-wrapper { }`	Flex wrapper for product title and quantity selector alignment
`.rsf-buy-x-get-y-product-options { }`	Wrapper for all variant options
`.rsf-buy-x-get-y-product-option { }`	Wrapper for a single option group
`.rsf-buy-x-get-y-product-option-button-container { }`	Container for button-style variant options
`.rsf-buy-x-get-y-product-option-image-container { }`	Container for image-style variant options
`.rsf-buy-x-get-y-product-option-swatch-container { }`	Container for swatch-style variant options
`.rsf-buy-x-get-y-product-option-button { }`	Individual button-style option
`.rsf-buy-x-get-y-product-option-image { }`	Individual image-style option button
`.rsf-buy-x-get-y-product-option-swatch { }`	Individual color swatch button

Smart Flows Website Banner

CSS variables and selectors for the Website Banner component — covering background, text color, font size, and the banner's structural layout elements.

CSS Variables

Set these inside .rebuy-flow-component .rsf-website-banner { }.

Note: --rsf-banner-bg-color, --rsf-banner-text-color, and --rsf-banner-close-icon-color are pre-populated from the color pickers in the Banner settings. You can override them further in Custom CSS if needed.

/* Banner background and text color overrides */
.rebuy-flow-component .rsf-website-banner {
    --rsf-banner-bg-color: #000000;
    --rsf-banner-text-color: #ffffff;
    --rsf-banner-font-size: 16px;
    --rsf-banner-font-weight: 600;
}

Variable Name	Default Value	What It Changes
`--rsf-banner-bg-color`	(set by component)	Banner background color
`--rsf-banner-text-color`	(set by component)	Banner text and CTA color
`--rsf-banner-close-icon-color`	(set by component)	Close icon color
`--rsf-banner-font-size`	`16px`	Banner title and CTA font size
`--rsf-banner-font-weight`	`400`	Banner title and CTA font weight
`--rsf-banner-line-height`	`normal`	Banner text line height

CSS Selectors

Set these inside .rebuy-flow-component

.rebuy-flow-component .rsf-website-banner {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector	Description
`.rsf-website-banner { }`	The full-width banner wrapper
`.rsf-website-banner.has-cta { }`	Modifier applied when the banner has a clickable CTA (adds pointer cursor)
`.rsf-website-banner-content { }`	Inner content row (flex container for title, CTA, close button)
`.rsf-website-banner-title { }`	Banner title/message text
`.rsf-website-banner-cta { }`	The CTA link/text shown next to the title (optional)
`.rsf-website-banner-close { }`	The close (✕) button on the banner

Smart Flows Countdown Timer

CSS variables and selectors for the Countdown Timer component. The timer inherits color context from its parent (modal or banner) and supports four layout modes via a data-layout attribute.

CSS Variables

Set these inside .rebuy-flow-component .rsf-countdown-timer { }.

Note: --rsf-timer-bg-color and --rsf-timer-text-color are set by the component based on the parent context. The values shown are fallbacks.

/* Countdown timer colors and font sizes */
.rebuy-flow-component .rsf-countdown-timer {
    --rsf-timer-bg-color: #000000;
    --rsf-timer-text-color: #ffffff;
    --rsf-timer-text-size: 14px;
    --rsf-timer-display-size: 18px;
}

Variable Name	Default Value	What It Changes
`--rsf-timer-bg-color`	(set by component)	Timer zone background color
`--rsf-timer-text-color`	(set by component)	Timer text color
`--rsf-timer-text-size`	`16px`	Font size for timer label text
`--rsf-timer-display-size`	`16px`	Font size for countdown numbers

CSS Selectors

Set these inside .rebuy-flow-component

.rebuy-flow-component .rsf-countdown-timer {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector / Attribute	Description
`.rsf-countdown-timer { }`	The timer wrapper element
`.rsf-countdown-timer[data-layout="inline"] { }`	Default layout — label and timer on the same line
`.rsf-countdown-timer[data-layout="stacked"] { }`	Label above, timer below
`.rsf-countdown-timer[data-layout="space-between"] { }`	Label left-aligned, timer right-aligned
`.rsf-countdown-timer[data-layout="space-around"] { }`	Equal spacing around label and timer
`.rsf-timer-text { }`	The label/message text next to the countdown
`.rsf-timer-display { }`	The countdown numbers (HH:MM:SS format)

Variant Option State Classes

These modifier classes are applied automatically to variant option buttons and swatches across all Smart Flow component types based on their current selection state.

Class	When Applied
`.selected { }`	The currently selected variant option
`.out-of-stock { }`	A variant option that is out of stock (shown at 50% opacity with a strikethrough line)

Quantity Selector

CSS selectors for the quantity input used inside Add Items to Cart and Buy X Get Y modals — covering the wrapper, number display, and increase/decrease buttons.

CSS Selectors

Set these inside .rebuy-flow-component

.rebuy-flow-component .quantity-selector-container {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector	Description
`.quantity-selector-container { }`	The quantity selector wrapper (–, count, +)
`.quantity-selector-product-quantity { }`	The quantity number display
`.quantity-selector-decrease-quantity { }`	The decrease (–) button
`.quantity-selector-increase-quantity { }`	The increase (+) button

Shared Global CSS Classes

These classes are used by all Rebuy widgets, not just Smart Flows. Always prefix them with .rebuy-flow-component when targeting them in the Custom CSS field, or they will affect Smart Cart, Smart Search, and other widgets too.

Set these inside .rebuy-flow-component

.rebuy-flow-component .rebuy-button {
    color: #000;  /* property: value; */
}

For available CSS properties and values, explore further at: w3schools.com

Selector	Description
`.rebuy-button { }`	All CTA buttons (primary)
`.rebuy-button.secondary { }`	Secondary CTA buttons
`.rebuy-money { }`	Price display elements
`.rebuy-money.sale { }`	Sale price (when item is on sale)
`.rebuy-money.compare-at { }`	Original/compare-at price (shown when on sale)
`.rebuy-select { }`	Variant option dropdown (`<select>`) elements

Tips for Writing Smart Flows CSS

Scoping: CSS in the Custom CSS field is injected as a global stylesheet. Always prefix every selector with .rebuy-flow-component to prevent your styles from affecting other Rebuy widgets like Smart Cart and Smart Search.
Specificity: If a theme stylesheet is overriding your Rebuy styles, increase specificity: .rebuy-flow-component .rsf-modal .rsf-modal-primary-button { ... }
Variables vs. selectors: Prefer CSS variables for colors, sizing, and spacing. Use class selectors only when variables don't cover your use case.
Backdrop: .rsf-modal-backdrop only exists in the DOM when the backdrop option is enabled in the component's Display settings.

Rebuy Support Policy for Customizations

Please note advanced configurations or customizations fall outside standard support.

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

Enhance Widget Styling Using Custom CSS Code

CSS Styling Tricks for Customizing Smart Search

Smart Cart CSS Customization Guide

Smart Collections CSS Guide

Smart Flows subscription products

Smart Flows CSS Customization Guide

Where to Add CSS in Smart Flows

How to Add CSS via the Custom CSS Field

Scoping Your Smart Flows CSS

CSS Variables and Selectors by Component

Smart Flows Modal: Layout, Colors, and Typography

CSS Variables

CSS Selectors

Smart Flows Modal: Product Images

CSS Variables

Smart Flows Add Items to Cart

CSS Selectors

Smart Flows Buy X Get Y

CSS Variables

CSS Selectors

Smart Flows Website Banner

CSS Variables

CSS Selectors

Smart Flows Countdown Timer

CSS Variables

CSS Selectors

Variant Option State Classes

Quantity Selector

CSS Selectors

Shared Global CSS Classes

Tips for Writing Smart Flows CSS

Rebuy Support Policy for Customizations

Get matched with the right Service Partner