Overview
The Buy More Save More (BMSM) widget is a Merchandising Widget that displays volume-based (quantity-break) discounts directly on the product page, giving shoppers a clear incentive to increase their order quantity. Each discount threshold is called a tier — you configure as many tiers as needed (up to 20), each with its own required quantity, discount type, and messaging.
The BMSM widget lives on the product page and enforces its tier discounts on the storefront through Shopify Functions. It supports percentage discounts, fixed-amount discounts, and no-discount tiers, and can optionally present subscription purchase options alongside the tiers.
This is the Buy More Save More widget, not the Smart Cart Buy More Save More discount. This article covers the Buy More Save More widget — a merchandising widget on the product page. It is a separate feature from the Buy More Save More discount built into the Smart Cart, which applies quantity-break discounts inside the cart itself. The two share a name but are configured in different places and behave differently, so make sure you are setting up the one you intend to.
Creating a BMSM Widget
To create a Buy More Save More widget, build it from the Merchandising Widgets area of the Rebuy admin.
From the Rebuy admin, navigate to Merchandising Widgets in the left sidebar.
Select Product Page from the widget location list.
Find the Buy More Save More (BMSM) card and click Create New.
Follow the onboarding guide to configure the Buy More Save More (BMSM) Widget. The guided setup walks through four steps: Create Tiers, Select Products, Select Layout, and Widget Settings (the last step is optional).
The widget editor opens with a live preview on the right. Configure settings using the sidebar panels described below, then click Save in the top header when done. When you are ready to go live, click Install to add the widget to your Shopify theme and toggle Live Mode on.
BMSM Widget Settings Reference
The Buy More Save More widget editor sidebar is organized into two groups: Settings (Layout, Products) and Configuration (Widget Settings, Tiers, Language, Styles, Subscriptions, Advanced). Each item opens its own sub-panel when clicked. The sections below describe each panel.
Layout
The Layout panel controls how the Buy More Save More widget is visually presented on the product page. Three options are available — click a layout card to select it, and the preview pane updates live to reflect the selection.
Vertical (default): The product image stacks above the product description. Tier options are listed in a vertical stack below, with an Add to Cart button at the bottom.
Horizontal: The product image sits beside the product description. Tier options are displayed in a horizontal row beneath the content, with a full-width Add to Cart button.
Progress Bar: The product image sits beside the product description. Tier options are visualized as a progress bar with step indicators and quantity controls, with an Add to Cart button at the bottom. In the picker, this option appears under the PROGRESS BAR heading and its selectable card is labeled Slider.
Products
The Products panel controls which products the Buy More Save More widget applies to on the storefront.
Product Visibility (dropdown) sets the scope of the widget. Options:
All Products (default): The widget applies to every product page on the store.
Specific Products: The widget applies only to products that match the Product Type filters defined below.
When Specific Products is selected, one or more Product Type filter cards appear. Each card targets a specific scope and has an X button to remove it, and you can add multiple filter cards at once. The available Product Type options per card are:
Specific Products: Search and select individual products by name (up to 100 products).
Collection: Search and select a Shopify collection; the widget applies to all products in that collection (up to 20 collections). New products added to a collection are included automatically.
Tags: Enter one or more product tags using the text input and Add button (up to 100 tags). New products with a matching tag are included automatically.
Widget Settings
The Widget Settings panel controls general display behavior for the Buy More Save More widget. The panel contains a collapsible General section (with Product Display Settings and View Options) and a Variant Selector section.
Product Display Settings
Enable Radio Buttons (checkbox, unchecked by default): When enabled, a radio button selector appears alongside each tier option, so shoppers actively select a tier rather than having one pre-selected. This control is available when the layout is set to Vertical or Horizontal; it is not shown for the Progress Bar (Slider) layout.
Content Alignment (toggle): Sets the alignment of content within the widget. In the Vertical layout the options are Left and Right; in the Horizontal and Progress Bar layouts the options are Left, Center, and Right. Default: Left.
Product Quantity Position (Above / Below): Sets whether the quantity control appears above or below the tier image. This control is shown only for the Progress Bar (Slider) layout and applies to tiers that have an image. Default: Below.
View Options
View Options control how often the widget is shown to a shopper.
Limit number of views (checkbox, unchecked by default): When enabled, limits how many times the widget is shown to a shopper. Two sub-controls appear when checked:
Max View Count (number input): The maximum number of times the widget is shown to a shopper. Default: 1.
Every … Days (number input): The time window in days before the view count resets. Default: 1. If set to 0, the expiration window is 30 minutes instead.
Variant Selector
The Variant Selector section controls whether shoppers can choose a variant inside the widget.
Enable Variant Selector (checkbox, unchecked by default): When enabled, displays a variant selector within the widget. One sub-control appears when checked:
Variant Selector Type (dropdown): Sets the style of the variant selector shown to shoppers. Options: Select (default) and Buttons. Color swatches pull color images from your theme's assets folder using the
color-<color name>.jpgnaming convention (for example,color-red.jpg).
Tiers
The Tiers panel is where you define the volume discount structure of the Buy More Save More widget. It contains a General section, a Discount Protection section, a Single-unit option, and the Tiers list.
Default Selected Tier
The Default Selected Tier (number input): Sets which tier is highlighted as selected when the widget loads, where 1 is the first tier. Default: 1. The single-unit option, when enabled, is not counted here. This control is disabled until at least one tier exists.
Discount Protection
Discount Protection caps how many units on a single cart line are eligible for a discount, protecting your margins when a shopper adds more than your top tier requires.
Enable Discount Protection (toggle, OFF by default): When enabled, reveals the Max Quantity per Line field.
Max Quantity per Line (number input): Sets the maximum quantity of a single cart line eligible for a discount. Default: 10. Exceeding this limit will split the excess items into a new line, which will not be discounted.
Single-unit option
The Single-unit option adds a "Buy 1" choice so shoppers can purchase a single unit at full price alongside your multi-buy discount tiers.
Include single-unit option: When enabled, prepends a single-unit ("Buy 1") option before your discount tiers. This option never receives a discount. You can customize its label, image, and unit text using the tier card that appears when it is enabled. If your first tier already requires a quantity of 1, this option is skipped automatically to avoid a duplicate.
Configure Tiers List
The Tiers list is where you create the individual discount tiers. Click Add Tier in the section header to add a tier (up to 20 tiers). Each tier is a collapsible card (Tier 1, Tier 2, and so on) that can be reordered by dragging, with three sub-sections: Discount, Language, and Image.
Discount — defines the discount type and threshold for the tier.
Discount Type (radio group): Sets how the discount is calculated. Options:
Percentage (default): Applies a percentage off the product price. Reveals the Percentage Discount input.
Fixed Amount: Applies a fixed currency amount off the product price. Reveals the Fixed Discount Amount currency input.
None: No discount is applied to this tier.
Percentage Discount (number input): The discount percentage for this tier. Default: 10%. Visible when Percentage is selected.
Required Quantity (number input): The minimum quantity a shopper must add to cart to unlock this tier's discount. Default: 1. Minimum: 1.
Discount Message (text input, optional): A message displayed on the discounted line item in the Shopify cart when this tier is unlocked. Supports the
{{discount_value}}dynamic variable. Default:{{discount_value}} discount unlocked.Show per unit price (checkbox, checked by default): When enabled, displays the per-unit price for this tier alongside the tier row.
Unit Label (text input): The label shown after the per-unit price. Default: unit. Visible when Show per unit price is enabled.
Tier Language — sets the text shown for the tier.
Label (text input): The primary display label for the tier. Supports the
{{required_quantity}}and{{discount_value}}dynamic variables. Default:Buy {{required_quantity}} get {{discount_value}} off(which renders like "Buy 3 get 10% off").Description (text input, optional): An optional secondary line shown below the label. Default: Unlock this discount.
Image — adds an optional image to the tier.
Image (toggle, off by default): When enabled, reveals the Add Images button.
Add Images (button): Opens a flyout for selecting an image. The flyout has three tabs:
Upload: Drag-and-drop or file upload.
Icons: A searchable library of icons provided by Rebuy.
Your Gallery: Previously uploaded images.
One image can be selected per tier. Click Continue in the flyout footer to confirm the selection.
Language
The Language panel controls the global text labels displayed in the widget header and purchase-type toggles. All fields are in a single collapsible General section.
Super Title (text input): An optional label displayed above the main title. Default: empty.
Title (text input): The main heading displayed at the top of the widget. Default: Buy More, Save More!
Description (textarea): An optional description displayed below the title. Default: empty.
One-Time Label (text input): The label shown on the one-time purchase option when subscriptions are enabled. Default: One-Time Purchase.
Subscribe & Save Label (text input): The label shown on the subscription option when subscriptions are enabled. Default: Subscribe & Save.
Styles
The Styles panel controls the visual appearance of the widget. It has two sections: Theme and Style Controls.
Theme
The Theme section sets the base style source for the widget.
Theme (dropdown): Options are [Store name] (uses the store's existing theme styles) or Custom (enables the CSS editor and the individual style controls below for manual overrides).
CSS (code editor): A Monaco-based CSS editor for writing custom styles, applied globally to the widget. An Expand button opens the editor full-size.
Style Controls
The Style Controls are a set of color pickers and dimension inputs for fine-tuning individual widget elements. They are available when the Theme is set to Custom. Available controls:
Background Color: The widget's background fill.
Border Color: The widget container border.
Button Background: The add-to-cart button fill color.
Button Border Color: The add-to-cart button border color.
Button Border Width (number input, px): Default 0. Range: 0–100.
Button Radius (number input, px): Default 5. Range: 0–100.
Button Text: The add-to-cart button text color.
Carousel Control Background: Background of carousel navigation arrows.
Carousel Control Text: Color of carousel navigation arrow icons.
Carousel Paging Dots: Color of carousel pagination indicators.
Compare Price: The original/crossed-out price color.
Description: The tier description text color.
Input Background: Background of quantity input fields.
Input Border: Border of quantity input fields.
Input Text: Text color inside quantity input fields.
Option Background: The background color of a tier option card in its unselected state.
Option Border: The border color of a tier option card.
Option Selected Background: The background color of the currently selected tier option card.
Option Selected Color: The accent/text color of the currently selected tier option card.
Price: The standard price text color.
Product Description: The product description text color.
Product Title: The product title text color.
Product Vendor: The product vendor text color.
Progress Bar Fill: The filled portion of the progress bar in the Progress Bar (Slider) layout.
Progress Bar Track: The unfilled track of the progress bar in the Progress Bar (Slider) layout.
Reviews Background: Background of the reviews rating element.
Reviews Foreground: Star/icon fill color for reviews.
Reviews Text: Reviews text color.
Sale Price: The discounted price text color.
Supertitle: The super title text color.
Title: The widget title text color.
Subscriptions
The Subscriptions panel controls whether and how subscription purchase options are presented alongside the Buy More Save More tiers. The panel has a master enable toggle in the header, plus two sections: General and Layout.
The Subscriptions toggle in the panel header must be turned on for the subscription options to appear to shoppers. When it is off, the widget shows one-time purchase options only.
Excluded Bundle Discount (checkbox, unchecked by default): When enabled, the Buy More Save More tier (bundle) discount is not stacked on top of the subscription discount, so subscription purchases do not receive both.
Subscribe Title (text input): The label displayed on the subscription option button. Default: Subscribe & Save.
One Time Label (text input): The label displayed on the one-time purchase option button. Default: One-Time Purchase.
Exclusion Bundle Discount Label (text input): The message shown to shoppers when the bundle discount is excluded on subscriptions. Default: Choosing Subscribe & Save? Discounts only apply to one-time purchases.
Subscription Layout
The Layout section in the BMSM Subscription tab - sets how the subscription and one-time purchase toggle buttons are positioned relative to the tier list. Two layout styles are available, each with an Above/Below position option:
Side by Side: Displays the Subscribe & Save and One-Time Purchase buttons next to each other in a horizontal row. Position options: Above (default) or Below the tier list.
Stacked: Displays the Subscribe & Save and One-Time Purchase buttons stacked vertically. Position options: Above or Below the tier list.
Advanced
The Advanced panel contains three collapsible sections for developer-level configuration: Dynamic Placement, Callbacks, and Product Properties.
Dynamic Placement
Dynamic Placement provides manual installation and responsive repositioning controls.
HTML Div Placement (read-only text input): Displays the widget's HTML div snippet for manual theme installation. A copy icon copies it to the clipboard.
Three breakpoint cards allow the widget to be dynamically repositioned on different screen sizes. Each card has an Enabled dynamic placement checkbox (unchecked by default).
When enabled, four sub-controls appear:
Min Breakpoint: The minimum screen width (in px) at which this placement rule applies.
Max Breakpoint: The maximum screen width (in px) at which this placement rule applies.
Placement Selector: A CSS selector targeting the element the widget should be placed relative to.
Placement Location (dropdown): Where to place the widget relative to the selector. Default: After.
The three cards — Large Screen, Medium Screen, and Small Screen — each target a screen-size range so the widget can be dynamically repositioned per breakpoint. All three link to the Dynamic Placement Selectors help article for more information.
Callbacks
Callbacks are checkboxes that enable JavaScript callback hooks firing at specific points in the widget lifecycle. All are unchecked by default. These instance-based event callbacks are triggered automatically and let you couple events with your theme and add custom tracking logic.
Available callbacks: Add, BeforeAdd, BeforeReady, Init, and Ready.
Product Properties
Product Properties control the hidden tracking data attached to items added through the widget.
Enable Attribution Tracking (checkbox, checked by default): Tracks that items were added via this Rebuy widget, enabling attribution reporting. Disabling this loses performance and engagement metrics for the widget.
Enable Product Discovery Tracking (checkbox, checked by default): Tracks product discovery events through the widget.
Installing the Widget
After configuring the widget, click Install in the top header to open the installation instructions. For Product Page widgets, installation is done via Shopify's Theme Editor using the Rebuy Widget App Block. For more details see Installing Rebuy Widgets via App Blocks.
Copy the Widget ID from the Install page.
In the Shopify Theme Editor, navigate to the product page template (
templates/product.json) and add the Rebuy Widget App Block under the Apps section.Paste the Widget ID into the Widget ID field in the App Block settings.
Drag the Apps section to the desired position on the page.
Click Save.
Back in the Rebuy admin, click Mark as installed in the Manual Tracking section.
If the automatic install link fails with a "rebuy-widget not added" error, add the App Block manually via the Theme Editor sidebar: navigate to Add section, select the Apps tab, and choose Rebuy Widget.
