Overview
The Buy More Save More (BMSM) widget can be styled beyond the built-in options using 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 customizations. Use it when the Styles panel's color pickers and layout options don't cover a change you need.
Before writing CSS, try the Styles panel first (in the widget editor: Styles → Theme → Custom). It exposes color and radius controls for most elements without any code. Reach for CSS only for changes the panel can't make — spacing, typography, hiding elements, or responsive tweaks.
Where to add your CSS
Add your CSS in the widget editor under Styles → add your CSS code to the CSS code editor box, click Save.
Important: The CSS you enter in this field is applied globally to the page, not only inside the widget. Always scope your rules to the widget so you don't accidentally restyle the rest of the product page. Scope every rule with the widget's root class:
.rebuy-buy-more-save-more { /* your rules */ }
To target one specific widget instance (if you run more than one), use its ID instead, where WIDGET_ID is the ID shown on the Install page:
#rebuy-widget-WIDGET_ID { /* rules for this widget only */ }
Because themes vary in specificity, you may occasionally need !important to make a rule win over a theme style. Add it only when a rule doesn't take effect otherwise.
Preview your changes on the real storefront using Storefront Preview Mode (add ?preview=true to your product URL) before turning the widget live.
The widget's structure (class name reference)
Every widget element uses the BEM prefix rebuy-buy-more-save-more. The root element also carries rebuy-buy-more-save-more__widget and rebuy-widget. The layout in use is reflected on a wrapper class, so you can target styles per layout.
Root and layout
Element | Class |
Widget root |
|
Layout wrapper |
|
Header wrapper |
|
Super title |
|
Title |
|
Description |
|
Main content |
|
Tier cards (Vertical and Horizontal layouts)
Element | Class |
Tier list container |
|
A single tier card |
|
Tier image |
|
Tier title |
|
Tier description |
|
Price |
|
Compare-at (crossed-out) price |
|
Per-unit price |
|
Radio input (when enabled) |
|
Progress Bar layout (labeled "Slider" in the editor)
Element | Class |
Slider container |
|
Tier labels row |
|
A single tier label |
|
Tier image (circular) |
|
Image/title order wrapper |
|
Progress track (background) |
|
Progress fill |
|
Slider handle |
|
Subscription (purchase-type) tabs
Element | Class |
Container |
|
Tabs row |
|
A tab |
|
Tab title |
|
Frequency dropdown |
|
Bundle-exclusion note |
|
Note on the Add to Cart button: The widget does not render its own Add to Cart button — it works with your theme's native Add to Cart button, and the shopper's quantity is set by the selected tier. While the widget is active, Rebuy adds the class rebuy-buy-more-save-more-active to the page's <body> and hides the theme's quantity selector. Style the Add to Cart button through your theme, not this widget.
Design tokens (CSS variables)
Several colors are driven by CSS custom properties, which the Styles panel sets for you. You can also override them directly in CSS. Setting a token restyles both the tier cards and the subscription tabs at once, which is usually cleaner than targeting each element.
CSS variable | Controls |
| Tier card / tab background (unselected) |
| Tier card / tab border (unselected) |
| Selected tier card / tab background |
| Selected tier / tab accent (border, radio, active slider ring) |
| Filled portion of the Progress Bar (Slider) |
| Unfilled track of the Progress Bar (Slider) |
Example — set all option colors at once:
.rebuy-buy-more-save-more {
--rb-widget-option-background: #f7f7f7;
--rb-widget-option-border-color: #e3e3e3;
--rb-widget-option-selected-background: #eef6fb;
--rb-widget-option-selected-color: #2491c4;
}
Common customizations
Each recipe below is scoped to the widget. Paste it into the CSS field and adjust the values.
Restyle the tier cards (unselected and selected). This changes the border, background, and corner radius of each tier option.
.rebuy-buy-more-save-more__block {
border-color: #e3e3e3;
background: #ffffff;
border-radius: 12px;
}
.rebuy-buy-more-save-more__block--active {
border-color: #2491c4;
background: #eef6fb;
}
Recolor the progress bar (Slider layout). This sets the filled and unfilled portions of the bar.
.rebuy-buy-more-save-more {
--rb-widget-progress-bar-fill: #2491c4;
--rb-widget-progress-bar-track: #ececec;
}
Change the title size and color.
.rebuy-buy-more-save-more__header-title {
font-size: 22px;
color: #232323;
}
Adjust the widget's width and outer spacing. The widget is centered with a max width by default; change or remove the cap here.
.rebuy-buy-more-save-more {
max-width: 100%;
padding: 20px;
}
Increase spacing between tier cards.
.rebuy-buy-more-save-more__blocks-container--vertical,
.rebuy-buy-more-save-more__blocks-container--horizontal {
gap: 16px;
}
Style the subscription tabs.
.rebuy-buy-more-save-more__purchase-type-tab {
border-radius: 12px;
}
.rebuy-buy-more-save-more__purchase-type-tab--active {
border-color: #2491c4;
background: #eef6fb;
}
Hide the per-unit price on every tier. Use this if you don't want unit pricing shown. (You can also turn off Show per unit price per tier in the editor.)
.rebuy-buy-more-save-more__block-info-unit {
display: none;
}
Hide the tier description text.
.rebuy-buy-more-save-more__block-info-description {
display: none;
}
Make a mobile-only adjustment. Wrap rules in a media query to target small screens.
@media (max-width: 767px) {
.rebuy-buy-more-save-more__header-title {
font-size: 18px;
}
}
Hide a leftover third-party subscription widget. Rebuy already hides the common subscription apps while the widget is active. If a subscription control from another app still shows on your product page, target it while BMSM is active. Replace the selector with the one from your app.
.rebuy-buy-more-save-more-active .your-subscription-widget-selector {
display: none !important;
}
Tips and troubleshooting
Always scope to the widget. Start every rule with
.rebuy-buy-more-save-more(or#rebuy-widget-WIDGET_ID) so you don't restyle the rest of the product page — the CSS field applies globally.Prefer the design tokens (the
--rb-widget-*variables) for colors that repeat across tiers and tabs; it's less code and stays consistent.Test in Storefront Preview Mode (
?preview=true) on a real product page before going live.Custom templates aren't previewable in the editor. If your widget uses a custom template, the in-editor preview won't reflect your CSS — preview onsite instead.
Heavy or theme-level custom work (structural layout changes, JavaScript-driven behavior) is outside standard support scope. For that, we can refer you to a Rebuy Partner agency.