How to Customize the Pre-Purchase Widget with CSS

Overview

The Pre-Purchase Widget, also called the Pre-Purchase Pop-Up, can be styled beyond its built-in layout and language options using custom CSS. This guide shows where to add your CSS, lists the widget's real class names, and gives copy-paste recipes for the most common changes. Reach for CSS only when the widget editor's built-in layout and Styles options do not cover a change you need, such as spacing, typography, colors on a specific element, or hiding something.

The Pre-Purchase Widget is a popup that appears when a customer clicks the Checkout button in the Smart Cart, giving them one last chance to add a recommended product before checkout. Because it is a popup rather than an on-page widget, some of its styling targets the popup shell (the overlay and the content box) in addition to the products inside it.

Before you start: preview your changes safely

You can preview the Pre-Purchase Widget and your CSS changes without showing them to live shoppers, so test in preview mode first and switch the widget live once the styling looks right. Because the popup is triggered from the cart, you preview it the same way a customer would shop: add a product to the cart, then click the Smart Cart's Checkout button to open the Pre-Purchase Pop-Up.

There are two ways to preview it safely:

Widget preview mode. After the Pre-Purchase Pop-Up is created and enabled in your Smart Cart, open the widget from the Rebuy Admin Widgets tab under Cart and toggle Live Mode off in the widget editor. This puts the widget in preview mode, so it is hidden from real customers but still visible to you in Rebuy preview mode. Adjust your CSS in the Styles tab, click Save, and refresh to review.
Smart Cart preview mode. You can also test the popup on an unpublished Smart Cart using Rebuy preview mode, so nothing reaches live shoppers until you publish the cart.

When your styling looks right, toggle Live Mode back on (or publish the Smart Cart) to make it live. For the full steps, see Using Rebuy preview mode.

Where to add your CSS

Add your CSS inside the Pre-Purchase Widget's own editor, in the Styles tab. To get there, open your Smart Cart, go to Checkout Area Options, and click Edit on the Pre-Purchase Pop-Up. You can also open it from the Rebuy Admin Widgets tab under Cart. In the widget editor, open the Styles tab, paste your CSS into the CSS code box, and click Save.

(Screenshot above: The Custom CSS code editor in the Pre-Purchase widget editor)

The CSS box applies its rules globally to the page, not only inside the popup. Always scope every rule to your widget so you do not accidentally restyle the rest of your store. Scope each rule with the widget's ID, where 12345 is your Pre-Purchase Widget's ID number:

#rebuy-widget-12345 .primary-title {   /* your rules */ }

You can find your widget's ID in the Rebuy Admin Widgets tab, next to the widget's name, and it is the number shown in the widget's edit URL. Replace 12345 with your own ID in every snippet below. Without this change, your CSS will not work.

Because themes vary in specificity, you may occasionally need !important on a rule to make it win over a theme style. Add it only when a rule does not take effect otherwise.

The Pre-Purchase Widget's structure (class name reference)

The Pre-Purchase Widget uses the class names below. The selectors are grouped by area of the popup so you can find the element you want to style. Every class should be scoped to #rebuy-widget-12345 when you use it.

Popup shell container

Element	Class
Overlay (dimmed background behind the popup)	`.rebuy-widget-container`
Popup content box	`.rebuy-widget-content`
Close (X) button	`.rebuy-modal-close`
Countdown timer wrapper	`.rebuy-timer`
Countdown timer text	`.rebuy-timer-title`

Header

Element	Class
Super title (small heading above the main title)	`.super-title`
Primary title (main heading)	`.primary-title`
Description text	`.description`

Product grid and product blocks

Element	Class
Product grid (unique to the Pre-Purchase Widget)	`.rebuy-pre-purchase-block`
A single product block	`.rebuy-product-block`
Product image	`.rebuy-product-image`
Product title and its link	`.rebuy-product-title`, `.rebuy-product-title-link`
Variant dropdown	`.rebuy-select`
Regular price	`.rebuy-money`
Sale price	`.rebuy-money.sale`
Compare-at (crossed-out) price	`.rebuy-money.compare-at`

Add button and added state

Element	Class
Add button wrapper	`.rebuy-button-container`
Add button	`.rebuy-button`
Added-state wrapper (shown after a product is added)	`.rebuy-button--selected`
Added button	`.rebuy-button__upsell-add` (also carries `.rebuy-button__remove`)
Remove (X) button	`.rebuy-button__upsell-remove` (also carries `.rebuy-button__text`)

Bottom action bar (unique to the Pre-Purchase Widget)

Element	Class
Bottom container	`.bottom-container`
Action button row	`.rebuy-button-actions`, `.rebuy-pre-purchase-actions`
Decline button (shown when nothing has been added)	`.rebuy-button.decline`
Checkout button	`.rebuy-button.outline`
Powered by Rebuy link	`.powered-by-rebuy`

Common customizations

Each recipe below is scoped to the widget. Paste it into the Styles tab's CSS box, replace 12345 with your widget ID, and adjust the values to match your brand.

Change the popup box background, width, and corners. This styles the popup content box that holds the offer.

/* Pre-Purchase popup box background, width, and corners */
#rebuy-widget-12345 .rebuy-widget-content {
  background: #ffffff;
  max-width: 600px;
  border-radius: 12px;
}

Change the dimmed overlay behind the popup. This styles the darkened background that covers the store while the popup is open.

/* Pre-Purchase popup overlay (dimmed background behind the popup) */
#rebuy-widget-12345 .rebuy-widget-container {
  background: rgba(0, 0, 0, 0.6);
}

Style the super title, primary title, and description. These are the three text elements at the top of the popup.

/* Pre-Purchase super title */
#rebuy-widget-12345 .super-title {
  color: #888888;
  font-size: 14px;
}

/* Pre-Purchase primary title */
#rebuy-widget-12345 .primary-title {
  color: #232323;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
}

/* Pre-Purchase description */
#rebuy-widget-12345 .description {
  color: #555555;
  font-size: 14px;
}

Style the countdown timer text. This applies when the widget's countdown timer is turned on.

/* Pre-Purchase countdown timer text */
#rebuy-widget-12345 .rebuy-timer-title {
  color: #c0392b;
  font-weight: bold;
}

Round the product image corners. This controls the corner shape of each product image inside the popup.

/* Pre-Purchase product image corners */
#rebuy-widget-12345 .rebuy-product-image {
  border-radius: 8px;
}

Style the product titles. This sets the color and size of each recommended product's title.

/* Pre-Purchase product title */
#rebuy-widget-12345 .rebuy-product-title,
#rebuy-widget-12345 .rebuy-product-title-link {
  color: #232323;
  font-size: 16px;
}

Style the prices. This sets the regular price, the sale price, and the crossed-out compare-at price separately.

/* Pre-Purchase regular price */
#rebuy-widget-12345 .rebuy-money {
  color: #232323;
  font-size: 16px;
}

/* Pre-Purchase sale price */
#rebuy-widget-12345 .rebuy-money.sale {
  color: #c0392b;
}

/* Pre-Purchase compare-at (crossed-out) price */
#rebuy-widget-12345 .rebuy-money.compare-at {
  color: #999999;
}

Style the Add button. This sets the background, text color, border, and corners of the button that adds a product to the cart.

/* Pre-Purchase Add button */
#rebuy-widget-12345 .rebuy-button-container .rebuy-button {
  background: #2491c4;
  color: #ffffff;
  border: 2px solid #2491c4;
  border-radius: 6px;
}

Style the button after a product is added. After a customer adds a product, the button switches to the added state, which shows the added button and a small remove (X) button.

/* Pre-Purchase added button */
#rebuy-widget-12345 .rebuy-button--selected .rebuy-button__upsell-add {
  background: #1b7ba6;
}

/* Pre-Purchase remove (X) button */
#rebuy-widget-12345 .rebuy-button--selected .rebuy-button__upsell-remove {
  background: #1b7ba6;
}

Style the Decline and Checkout buttons at the bottom. These are the two buttons in the bottom action bar. The Decline button appears only when the customer has not added anything yet.

/* Pre-Purchase Checkout button (bottom action bar) */
#rebuy-widget-12345 .rebuy-pre-purchase-actions .rebuy-button.outline {
  background: #2491c4;
  color: #ffffff;
  border-color: #2491c4;
}

/* Pre-Purchase Decline button (bottom action bar) */
#rebuy-widget-12345 .rebuy-pre-purchase-actions .rebuy-button.decline {
  color: #888888;
}

Style the close (X) button. This is the X in the top corner of the popup that closes it.

/* Pre-Purchase close (X) button */
#rebuy-widget-12345 .rebuy-modal-close {
  color: #232323;
}

Make a mobile-only adjustment. Wrap rules in a media query to target small screens only.

/* Pre-Purchase mobile-only adjustment */
@media (max-width: 767px) {
  #rebuy-widget-12345 .primary-title {
    font-size: 18px;
  }
}

Tips and troubleshooting

Keep these points in mind when styling the Pre-Purchase Widget.

Always scope to your widget. Start every rule with #rebuy-widget-12345 (using your own widget ID) so you do not restyle the rest of your store. The CSS box applies globally.
Preview safely before going live. You do not have to test on your live store. Toggle Live Mode off in the widget editor to put the Pre-Purchase Pop-Up in preview mode, or preview an unpublished Smart Cart, then trigger the popup with the Smart Cart's Checkout button to review your CSS.
Use !important only when needed. If a rule does not take effect because your theme's styles are more specific, add !important to that rule.
Keep changes simple to protect your launch timeline. Quick styling changes like colors, fonts, spacing, and hiding an element are straightforward. Advanced or structural custom designs take longer, can delay your launch, and fall outside standard support scope.
Advanced or custom work is out of scope. Structural layout changes, custom templates, and JavaScript-driven behavior are outside standard support. For that work, we can refer you to a Rebuy Partner agency.