Skip to main content

How To Create A Product Upsell Widget

This help article will show you how to create a Rebuy product upsell widget!

Written by Christian Sokolowski

Wait! If you haven't completed steps 1-3 on our getting started guide, do that first!

A Product Upsell Widget is a great way to display offers to customers on add to cart, which asks if they would like to switch to a higher value alternative.

Upsell widgets in Rebuy provide a dynamic way to recommend higher-value alternative products to customers at crucial moments in their shopping journey, helping to boost sales while providing relevant suggestions.

  • An upsell is NOT a cross-sell (adding additional items) but replaces an item the customer has added with a more expensive alternative(a bundle, switching to a subscription, etc). For more insight on upselling vs cross-selling, check out this article.


Create a Product Upsell widget

A Product Upsell widget is created on the Create New Widget page, starting from the Add to Cart Upsell (Popup) card.

  1. In the Rebuy admin sidebar, click Cart & Merchandising and then Widgets. On some plans the sidebar shows a single Merchandising Widgets entry instead, which opens the same Widgets page.

  2. Click Create New. If this is your store's first widget, the button reads Create Your First Widget instead.

  3. Find the Add to Cart Upsell (Popup) card. To find it quickly, type upsell into the search bar, or set the Location dropdown above the cards to Product Page.

  4. Click Create on the Add to Cart Upsell (Popup) card.

The widget editor opens with your Product Upsell widget created. Rebuy does not ask you to choose a location for this widget, because the Add to Cart Upsell (Popup) card offers only one location, Product Page.

How To Create A Product Upsell Widget, the Add to Cart Upsell (Popup) card on the Create New Widget page in the Rebuy admin, with its Create button and location tags.


Styling and Language, and Presentation!

This quick start to the product upsell widget is automatically set to be a popup, and be triggered when the customer clicks add to cart(you're obviously more than welcome to change this). From here you'll just need to determine what you want the language of the widget to say, when the widget is triggered, how many options you want to give the customer (we generally do one), and what the offers(s) will be. To learn more about creating product page rules for your new widget, check out this article.

You can further customize your upsell widget by adding promotional discounts to recommended items. For instance, offering a slight discount (e.g., 1% off) can incentivize customers to upgrade to the suggested product.

  • Pro Tip: If you don't have any pre-configured bundles to offer as in upsell, check out our Dynamic Bundles widget!


Tips and Tricks!

If you aren't seeing the pop-up when you click add to cart, consider changing the pop-up trigger under Widget Settings.

Some themes are a bit tricky to work with and the popup may not work as expected. We've found that adding the following code snippet before the closing body tag in the theme.liquid file may help! Be sure to replace the "XXXXX" with the correct widget ID, and remove the initial Rebuy div from the product.liquid file. Click save!

{% if product %} 
<div data-rebuy-id="XXXXX" data-rebuy-shopify-product-ids="{{ product.id }}"></div>
{% endif %}

NOTE: This widget is designed to work out-of-the-box with Rebuy's Smart Cart.

If you wish to run this widget alongside a Native Cart, we recommend referencing the guide below for ensuring compatibility with your Native Cart.

Now that you've created your widget and set up your rules in the Data Source, go test it out! There is a "Live Mode" toggle in the widget settings, just make sure it's off, then you're ready to install and test, if it's working as expected, enable Live Mode and you're set!

Check out this Case Study to see how Roma Designer Jewelry boosted AOV by over 21% with an upsell widget (and a couple of others).

Did this answer your question?