Skip to main content

How to Install the Buy More Save More Product Page Widget

Step-by-step guide to installing the Buy More Save More product page widget: copy the Widget ID, add the Rebuy Widget app block to your product template, mark it as installed, preview it with Storefront Preview Mode, and turn on Live Mode.

Written by Tom

Overview

Installing the Buy More Save More (BMSM) widget means adding it to your Shopify product page so shoppers can see it, then turning it live. The BMSM widget is a Merchandising Widget that lives on the product page, and — like all Rebuy product page widgets — it is installed on Online Store 2.0 themes using the Rebuy Widget app block in the Shopify Theme Editor.

This guide covers adding the widget to your product template, marking it as installed in Rebuy, previewing it on your storefront with Storefront Preview Mode before it goes live, and turning Live Mode on.

Before you begin, make sure you have:

  • Created and saved a Buy More Save More widget in the Rebuy admin (under Merchandising Widgets → Product Page). See Creating a BMSM Widget

  • The Rebuy app installed on your Shopify store.

Step 1: Open the install instructions and copy the Widget ID

To start installing the Buy More Save More widget, open its install instructions from the widget editor.

  1. In the Rebuy admin, open your Buy More Save More widget in the editor.

  2. Click Install in the top header to open the installation instructions.

  3. Copy the Widget ID shown on the Install page. You will paste this into the app block in the next step.

(Images above: BMSM widget editor with the "Install" button in the top header and the Install page showing the Widget ID.)

Step 2: Add the Rebuy Widget app block to your product template

Product page widgets are placed using the Rebuy Widget app block in the Shopify Theme Editor. Adding the app block to your product template is what makes the widget appear on the page.

  1. In Shopify, go to Online Store → Themes, then click Customize on your live theme to open the Theme Editor.

  2. Use the template selector at the top to switch to the Product template (templates/product.json).

  3. In the section where you want the widget, click Add block (or Add section), then open the Apps tab.

  4. Select Rebuy Widget.

  5. In the app block settings, paste the Widget ID you copied into the Widget ID field.

  6. Drag the block to the exact position on the page where you want the widget to appear. Because the widget uses your theme's native Add to Cart button, we recommend placing it directly above the Add to Cart button so shoppers choose a discount tier before adding the product to their cart.

  7. Click Save.

(Image above: Shopify Theme Editor on the Product template, with the "Rebuy Widget" app block)

(Image above: the "Rebuy Widget" app block added under the Apps tab and the Widget ID field filled in.)

If you do not see Rebuy Widget after selecting Add section → Apps, confirm the Rebuy app is installed on your store and that the Rebuy Connector is enabled, then reopen the Theme Editor.

Step 3: Mark the widget as installed in Rebuy

After adding the app block, mark the widget as installed in Rebuy so its status reflects that it is on your storefront.

  1. Return to the Rebuy admin.

  2. On the Install page (or the Merchandising Widgets list), find the Manual Tracking section and click Mark as installed.

  3. Confirm when prompted.

Marking the widget as installed updates its tracking status in Rebuy; it does not by itself make the widget visible to shoppers. Visibility is controlled by Shopify Theme Installation and toggling ON Live Mode from the Widget Editor.

(Image above: Merchandising Widgets list - mark the widget as installed in Rebuy so its status reflects that it is on your storefront.)

Preview your widget with Storefront Preview Mode

Storefront Preview Mode lets you see the Buy More Save More widget on your real storefront before it is live to shoppers. This is the recommended way to confirm placement, styling, and tier behavior on an actual product page while the widget is still in draft.

How Live Mode and preview relate

At the top of the widget editor is the Live Mode toggle:

  • Live Mode off (default for a new widget): The widget is in draft. It is not shown to your customers, even if the app block is installed on the page.

  • Live Mode on: The widget is live and shown to all customers on pages where the app block is installed.

Storefront Preview Mode is how you view a widget while Live Mode is still off, so you can check it privately before turning it on for everyone.

Note: The widget must already be added to the page via the app block (Step 2) for it to appear in preview. Storefront Preview Mode shows draft widgets that are installed; If a widget still does not appear in preview, check that its installed in your Shopify Theme editor and check the Products visibility settings include the product you are viewing.

How to enter Storefront Preview Mode

You have two ways to enter preview mode:

  • From the editor: In the widget editor sidebar, click the Preview Onsite link. This opens your storefront with preview mode already turned on.

  • Manually: Add ?preview=true to the end of any storefront URL and load the page. For example: https://your-store.myshopify.com/products/your-product?preview=true.

When preview mode is on, a Rebuy admin bar appears at the top of the page reading "Rebuy is currently in Preview Mode for: Widgets." Your draft (not-live) widgets render on the page as they would when live, so you can review them on the real product page.

Preview mode is stored in a cookie, so it stays on as you browse from page to page — you do not need to re-add ?preview=true to every URL. Preview mode is only visible to you (the person with the preview cookie set); regular shoppers are unaffected.

The preview parameter also accepts ?preview=enable and ?preview=rebuy, which behave the same as ?preview=true.

How to exit Storefront Preview Mode

To leave preview mode, do either of the following:

  • Add ?preview=false (or ?preview=disable) to the storefront URL and load the page, which clears the preview cookie.

  • Use the exit control on the Rebuy admin bar by clicking Close Preview

Step 4: Turn on Live Mode to go live

Once you have previewed the widget and it looks correct, make it visible to shoppers.

  1. In the widget editor, toggle Live Mode on.

  2. Click Save

  3. The widget is now shown to all customers on the product pages where the app block is installed.

You can toggle Live Mode off again at any time to pull the widget from your storefront without removing the app block from your theme.

Troubleshooting

The automatic install link fails with a "rebuy-widget not added" error. Add the app block manually through the Theme Editor: go to Add section, open the Apps tab, and choose Rebuy Widget, then paste the Widget ID as described in Step 2.

The widget does not appear on the product page (live). Confirm that Live Mode is on, that the app block with the correct Widget ID is added to the Shopify Theme editor product template, and that the widget's Products visibility settings include that product.

The widget does not appear in Storefront Preview Mode. Confirm the app block is added to the page (Step 2), that the preview bar is showing, and that the widget's Products visibility settings include the product you are previewing.

Related articles

Related Articles
Did this answer your question?