A cart cross-sell pop-up widget is a Rebuy widget that appears as an overlay on top of your store when a shopper's cart meets conditions you define, offering complementary products they can add alongside what they already have. Unlike an upsell, a cross-sell never replaces an item — the customer keeps what is in the cart and adds more.
This guide covers the pop-up display style. If you want the recommendations to sit inline inside the Smart Cart drawer instead of appearing as an overlay, see In-Cart Product Recommendations (Cross-Sell Widgets).
Requirement: This setup requires Rebuy's Smart Cart. The widget is created as a Smart Cart component, and the Smart Cart is what connects the widget to your cart. It is available on the Cart & Merchandising package.
(Screenshot above: A cart cross-sell pop-up overlay on a storefront, showing recommended products.)
How a Cart Cross-Sell Widget Differs from a Product Page Widget
A cart cross-sell widget and a product page widget look similar in the editor but read completely different data, which changes what rules you can write and when the widget can appear. The table below compares the two.
| Cart cross-sell widget | Product page (PDP) widget |
What the Data Source reads | The cart object — every item actually in the cart, including variants and quantities | The product object for the page being viewed. The cart is sent as well, so cart rules evaluate, but only as of page load. |
Reacts to variant choice | Yes — it sees the exact variant that was added | No — it sees the product, not which variant a shopper picks |
Re-evaluates when | On every cart change, so recommendations can update as items are added or removed | On page load for that product page |
Input products (what "Filter input products" excludes) | The products currently in the cart | The featured product on the page |
How it is installed | As a Cross-Sell Widget component inside the Smart Cart editor | As a Shopify theme app block or a manually placed div on the product page template |
Choose a cart cross-sell widget whenever the offer depends on what is in the cart: a spend threshold, a specific product being present, or a total item count. Reading the cart does not mean waiting for the cart. A cart widget re-evaluates its Data Source every time the cart changes, so a pop-up set to trigger on Add To Cart appears as soon as a qualifying product is added, after whatever Popup Delay you set, without the shopper opening the cart drawer first. Choose a product page widget when the offer depends only on the product being viewed. A product page widget can still use cart rules, because Rebuy sends the cart with every widget request, but it evaluates them once when the product page loads and does not re-evaluate when the shopper changes the cart.
Step 1: Create a Cross-Sell Widget in the Smart Cart
To create a cart cross-sell widget, you start by adding a Cross-Sell Widget component to your Rebuy Smart Cart. Creating it here is what connects the widget to the cart — a widget created anywhere else is not attached to the Smart Cart until a Cross-Sell Widget component points at it.
Navigate to the Rebuy Dashboard and open Cart & Merchandising > Smart Cart, then open the Smart Cart editor you want to add the widget to.
Add the component in the anchor that matches your cart layout:
Double-column carts: Click Add + in the Cross-Sells component area.
Single-column carts (most common): Click Add + in the Body section.
Select Cross-Sell Widget from the component list, then create a new widget and give it a descriptive name.
Once the cross-sell widget is created, click the widget name or the settings icon to open its configuration editor. You can also reach it later from Rebuy Dashboard > Cart & Merchandising > Widgets.
Save your Smart Cart settings.
(Screenshot above: The Smart Cart editor with the Add + button in the Body section)
The Cross-Sells anchor only exists on double-column Smart Cart layouts. If you switch a double-column cart to a single-column layout, any cross-sell components move into Needs Attention and you will need to drag them into the Body, Header, Goal Box, or Footer anchor.
Step 2: Choose Your Display Style
The widget's Display Type is what determines whether it renders inline or as an overlay. There are two options:
Embedded — the widget appears directly inside the Smart Cart drawer as an inline widget. This is the default. For the embedded build, follow In-Cart Product Recommendations (Cross-Sell Widgets).
Pop-Up — the widget appears as a pop-up overlay triggered by a shopper action, and only when its Data Source rules match.
To configure the widget to display as a pop-up instead of an inline embed within the Smart Cart:
In the widget's editor, open the Widget Settings tab.
Under Display Type, select Popup.
Under Popup Trigger, select when the pop-up should appear. Add To Cart is the most common choice for a cart cross-sell.
Set Popup Delay to the number of seconds Rebuy should wait after the trigger before showing the pop-up. Enter
0for no delay.Click Save.
(Screenshot above: The Widget Settings tab with Display Type set to Popup and the Popup Trigger radio group visible.)
Step 3: Configure Data Source Rules
The Data Source rules determine when the widget appears to the customer. These rules define the conditions a customer's cart must meet before the widget is rendered — if no rule matches, the widget returns no products and the pop-up never triggers.
In the widget's editor, find the Data Source section in the sidebar.
Confirm the Endpoint dropdown points at the data source you want to use, or click Create new data source.
Click Edit next to the Data Source section to open that data source in a new tab.
Add the IF rules that describe when the offer should appear, and the RETURN rules that decide which products it shows.
Save the data source, then return to the widget editor.
(Screenshot above: The Data Source section of the widget editor sidebar with the Endpoint dropdown, Edit link and Create new data source link.)
Data Source rules specific to cart widgets
Cart widgets behave differently from product page widgets inside the Data Source, and a few rule behaviors catch merchants out. The following points apply specifically to cross-sell widgets in the Smart Cart:
The cart is the input. Every item in the cart is an input product. This is what lets you write rules against subtotal, item counts, and specific products in the cart.
Filter input products decides whether the cart's own items can come back as recommendations. On cart widgets, the products already in the cart are the input products, so Filter input products stops the widget from recommending something the shopper already added. When Rebuy creates a data source for you as part of creating a widget, this setting starts checked. Uncheck it only when you deliberately want a product that is already in the cart to be returnable — for example a gift-selection flow.
Cart Subtotal supports only Is Greater Than, Is Less Than, and Equals. There is no "greater than or equal to" operator. To trigger at a $100 threshold, set the rule to Cart Subtotal Is Greater Than $99.99.
Rules re-evaluate on every cart change. As the shopper adds or removes items, the widget refetches and its matched rules update. This is why a cart widget can start returning products mid-session when a product page widget cannot.
For the full rule reference, see Data Sources 101 and Data Sources and the Cart.
Optional: Set Up a Discount on the Pop-Up
Adding a discount to a cart cross-sell pop-up is optional. When you configure one, Rebuy can both display the discounted price in the widget and apply the real discount at checkout using Shopify Functions.
In the widget's editor, open the Discount tab.
Choose a Discount Type — Percentage, Fixed, or None.
Enter the discount value.
Toggle Discounted By Functions on. This creates an automatic discount in Shopify scoped to this widget, so the discount applies to items the shopper adds from the pop-up. Shopify Functions discounting is available on all Shopify plan types.
Set Discounted From to Price or Compare at Price, depending on which value the discount should calculate against.
Optionally enter a Discount Message to display in the cart and at checkout.
Optionally set Quantity to cap how many units of a single cart line are eligible. Units above the cap split into a new, undiscounted line.
Click Save.
If you leave Discounted By Functions off, Rebuy shows the discounted price visually in the widget but charges full price at checkout. In that case you are responsible for creating a matching discount in Shopify yourself. For the full picture, see the Rebuy Discounting Overview.
This widget does not remove the product or the discount if the cart stops qualifying
A cart cross-sell pop-up widget adds products to the cart, and that is where its involvement ends. It does not monitor the cart afterward. If a shopper adds a discounted product from the pop-up and then removes other items so the Data Source rules no longer match, the product stays in the cart and the widget takes no action to remove it. Whether the discount survives depends on the Shopify Functions discount's own conditions, not on the widget.
This matters most for free-gift and threshold-based offers, where merchants expect the reward to disappear when the shopper drops below the threshold. To get that behavior, build the widget as a Selectable Gift With Purchase widget instead. That setup uses custom JavaScript in the widget's Advanced tab that listens for rebuy:cart.change, checks whether the widget's Data Source rules still match, and calls Rebuy.Cart.removeItem() to pull the gift back out when they do not. Full instructions are in Selectable Gift-With-Purchase Widgets.
Note that even the Selectable GWP setup only runs on the storefront. Neither approach runs validation at Shopify Checkout, so a shopper who removes items at checkout keeps the product in the order even though the discount drops off.
Widget Editor Settings for a Cart Cross-Sell Pop-Up
The widget editor exposes the same tabs for every widget type, but only a handful of settings change how a cart pop-up behaves. The table below covers the Widget Settings tab, which is where the pop-up behavior lives.
Setting | Where it is | What it does |
Display Type | Widget Settings tab > General | Embed renders the widget inline in the Smart Cart. Popup renders it as an overlay. |
Popup Trigger | Widget Settings tab > General (appears only when Display Type is Popup) | The shopper action that opens the pop-up: Page Load, Add To Cart, Submit Event, or Exit Intent. |
Popup Delay | Widget Settings tab > General (Popup only) | Seconds to wait after the trigger before showing the pop-up. |
Show continue button | Widget Settings tab > General (Popup only) | Adds a continue button so shoppers can dismiss the pop-up without adding anything. |
Limit number of views | Widget Settings tab > View Options | Stops showing the pop-up to a shopper after a set number of views. Pair with Max View Count and Every … Days. Setting days to |
Add to Cart Redirect | Widget Settings tab > View Options | Where the shopper goes after adding from the widget. This has no effect on a Smart Cart cross-sell — see Limitations. |
Enable Variant Selector | Widget Settings tab > Variant Selector | Shows variant options on the recommended products. Variant Selector Type switches between a dropdown (Select) and swatch-style Buttons. |
Timer | Widget Settings tab > Timer | Adds a countdown to the pop-up. Enable Timer turns it on, Timer Title sets the text shown above the countdown, and Minutes and Seconds set how long it runs. Action decides what happens when it reaches zero: Dismiss Widget closes the pop-up, Redirect to Cart sends the shopper to the cart page, Redirect to Checkout sends them straight to checkout, and Stop Timer leaves the pop-up open with the countdown stopped at zero. |
Screens | Widget Settings tab > Screens | Sets columns and items shown per breakpoint: Large above 768px, Medium 481–768px, Small below 480px. |
The remaining tabs in the Widget editor are shared with every other widget type. Use this table to find the one you need.
Tab | Use it for |
Product settings | Per-product display options such as descriptions, pricing, and quantity inputs. |
Language | Editing every piece of visible text, including the pop-up's title and button labels. |
Discount | Discount Type, Discounted By Functions, Discounted From, Discount Message, and Quantity. |
Integrations | Turning on product review providers such as Judge.me, Okendo, Loox, Yotpo, and Stamped. |
Styles | Colors, spacing, and typography, plus the widget's Custom CSS box. |
Advanced | Dynamic Placement (HTML Div Placement), attribution and product discovery tracking, and the JavaScript callback sections including Ready. |
The Data Source section sits above the tabs in the sidebar and holds the Endpoint dropdown, an Edit link to the data source, metafield toggles, and Max Number of Products displayed.
Limitations
The following constraints apply to cart cross-sell pop-up widgets. Each one has a workaround or an alternative where one exists.
A widget ID renders once per page. If the same widget ID is used both in the Smart Cart and as a page app block, Rebuy keeps the first placement in document order and deletes the rest from the page. The Smart Cart is normally the one removed. Duplicate the widget and use it's id for the second placement. See the FAQ below.
Add to Cart Redirect setting is ignored for Cart Cross-Sell popup widgets installed inside the Smart Cart. Rebuy forces the redirect to None (Stay on Current Page) for any widget referenced by a Smart Cart Cross-Sell Widget component, so shoppers always stay on the current page after adding. This is deliberate — it keeps the add asynchronous so the Smart Cart can update in place.
The Check Out pop-up trigger is not available. That trigger is reserved for Pre-Purchase widgets. Build a Pre-Purchase widget if you need an offer on checkout button click.
The widget does not remove products or discounts. It adds to the cart and stops there. Use a Selectable Gift With Purchase setup if the offer needs to be withdrawn when the cart stops qualifying.
Nothing validates the offer at Shopify Checkout. Cart-based widgets do not run or re-evaluate on the Shopify checkout page. If a shopper removes items there and drops below a threshold, the product remains in the order.
Data Source rules cannot read line item properties. Custom properties written onto a cart line by your theme or a third-party app are not an available rule input, so offers cannot branch on them.
If the pop-up renders behind the Smart Cart. Fix it in the widget's Advanced > Dynamic Placement settings by setting the HTML Div Placement selector to
bodywith Append, for all screen sizes. See Dynamic Placement Selectors.The Smart Cart Cross-Sells anchor exists on double-column layouts only. On a single-column Smart Cart, place the widget component in the Body anchor. It can be placed in other sections of the Smart Cart but the Body anchor is most common.
Custom templates are theme code, not an editor setting. A cart cross-sell widget renders with Rebuy's recommended template, and neither the Smart Cart component row nor the widget editor has a field to change it. A developer overrides it by adding a template script tag to the theme: use the ID rebuy-widget-[WIDGET ID] to override that one widget, or rebuy-recommended-template to override every widget on the page that uses the recommended template. See Widget Custom Templates. While a custom template is active, the widget editor's preview no longer matches what shoppers see.
Shopify Native Cart Support
Everything above assumes Rebuy's Smart Cart. If your store uses your Shopify theme's own cart drawer, flyout, or modal instead, you can still place a Rebuy cart widget inside it, but the integration is a developer task and it sits outside what Rebuy support can help with.
Rebuy's support policy for Shopify native carts
The Rebuy team no longer supports native Shopify carts. Before we developed our own cart solution we used to facilitate the incorporation of native carts, but we discontinued that practice in order to prioritize and support our own product. The variations of native carts between themes posed a significant risk to the business due to the complexity and ongoing support they required, and that is why we built Smart Cart instead.
Smart Cart offers more customization options for the style and design of the cart, so you can match it to your website's look and feel. It also provides features a native cart does not, including automatic discounts, product recommendations, and upsells. Because Rebuy owns that code, migrating to Smart Cart also means the cart comes with full support. For those reasons we recommend migrating rather than integrating with a native cart.
If you choose to stay on your native cart, Rebuy can provide the reference material below, but cannot troubleshoot the integration, guarantee it works on your theme, or maintain it when your theme updates.
How the integration works
A Rebuy widget renders into a div you place in your theme's cart drawer markup. On a native cart there are two problems your developer has to solve, and understanding both is the fastest way to scope the work:
Placement. The widget needs a container element inside the drawer's HTML, in the spot where the recommendations should appear.
Re-initialization. Most themes rebuild the cart drawer's HTML from scratch every time the cart changes, which destroys the widget's container along with it. The theme has to re-add the container and re-initialize Rebuy after each rebuild, and Rebuy has to tell the theme to refresh its own cart display after a shopper adds something from the widget. Smart Cart handles both automatically; a native cart does not.
General installation process for native carts
The steps below are the general shape of the work. The exact function names and file paths differ for every theme, so treat this as a scope outline for your developer rather than a copy-and-paste procedure.
In Rebuy Dashboard > Cart & Merchandising > Widgets, create a cart widget and give it a descriptive name. Note its widget ID.
Find your Shopify theme's cart drawer file. Open your storefront, inspect an item in the cart drawer with your browser's developer tools, note the classes on the surrounding markup, then search your theme for those classes.
Add the Rebuy widget's container
divto that file, in the position where the recommendations should appear. The container must be adivcarrying the widget'sdata-rebuy-id— Rebuy does not detect the attribute on a span, section, or any other element, and it fails silently if you use one.Find the function your Shopify theme calls to rebuild the cart drawer after a cart change. Searching your theme code directly. In Online Store > Themes > Edit code, search your theme's JavaScript files for
cart/update.js,cart/change.js, orcart/add.js. Also look for functions that redraw the cart markup and for listeners on cart events such ascart:updated. This code usually lives intheme.js,cart.js, or a file with "cart" or "drawer" in its name.In the widget editor's Advanced tab, add code to the add callback that triggers your theme's own cart refresh, so the drawer updates when a shopper adds a product from the widget.
Shopify Theme-specific starting points, including snippets contributed for Impulse, Prestige, Turbo, Parallax, Modular, Motion, and others, are collected in How to Add Rebuy to a Native Cart Flyout, Drawer, or Modal. Those snippets are community and support findings from past integrations, not a maintained compatibility list, and they may not match your theme's current version.
Getting help with a native cart integration
Rebuy support cannot troubleshoot native cart integrations, but there are three paths forward depending on your situation:
Migrate to Smart Cart. This is the recommended path and comes with full Rebuy support. See How to Enable Smart Cart.
Have your developer build it. Point them at the native cart guide How to Add Rebuy to a Native Cart Flyout, Drawer, or Modal and at Rebuy's developer documentation, including the AI Integration Guide, which is written to be fed into AI coding tools so a developer can generate theme-specific integration code.
Work with a Rebuy Partner. If you do not have a developer, Rebuy's Partner team can connect you with an agency that has done this integration before. Book time with them at rebuy.partnerpage.io/matchmaking.
Frequently Asked Questions
Can I use the same pop-up widget on the Smart Cart and on a product page?
You cannot use the same widget ID in both places on the same page — Rebuy will delete one of them. Duplicate the widget and use the duplicate's ID for the second placement, as described in the first FAQ above.
There is also a behavioral reason to build two widgets rather than share one. A cart widget's Data Source reads the cart, while a product page widget's Data Source reads the main product being viewed, so the same rules produce different results in each context.
Why isn't my Smart Cart cross-sell widget showing when the same widget is also installed on a page?
Your Smart Cart cross-sell widget is not showing because Rebuy renders one instance of a widget ID per page, and the in-cart placement is usually the one it removes. When the same widget ID appears twice on a page, Rebuy keeps the first placement in the page's document order and deletes the other containers from the page entirely. The Smart Cart is appended to the page after the theme's own content, so a page app block using that widget ID comes first and wins, and the in-cart placement disappears.
The removal is silent, and the removed placement is not listed in Rebuy Preview Mode.
To show the same recommendations in both places, give each placement its own widget:
Go to Rebuy Dashboard > Cart & Merchandising > Widgets.
Open the actions menu on the widget's row and select Duplicate.
Copy the duplicate's widget ID.
Point the page app block at the duplicate's widget ID, and leave the Smart Cart Cross-Sell component on the original.
Both widgets can stay connected to the same Data Source, so the recommendations stay consistent while each placement keeps its own layout and settings. For more detail, see Installing Rebuy Widgets via App Blocks in 2.0 Themes.
What is the difference between a cross-sell pop-up and an upsell pop-up?
A cross-sell pop-up and an upsell pop-up differ in what happens to the shopper's original item. A cross-sell adds the product from the pop-up alongside the item the shopper already had, so both end up in the cart. An upsell replaces the original item with the product chosen from the pop-up, so only one ends up in the cart.
Why is my pop-up appearing behind the Smart Cart?
This is uncommon for cart cross-sell widgets installed in the Smart Cart but If your pop-up is appearing behind the Smart Cart, set the widget's placement so it is appended to the end of the body:
In the widget's editor, open the Advanced tab.
Expand Dynamic Placement.
Set the HTML Div Placement selector to
bodyand the position to Append, for all screen sizes.Click Save.
Does the cart cross-sell pop-up remove the product if the customer no longer qualifies?
No, the pop-up does not remove the product. A cart cross-sell widget adds products to the cart and does not monitor the cart afterward, so a product added from the pop-up stays in the cart even if the shopper changes their cart and the widget's Data Source rules stop matching. To get automatic removal, build the offer as a Selectable Gift-With-Purchase widget, which adds custom JavaScript in the Advanced tab that removes the item on cart change when the rules no longer match.
Can the cart cross-sell pop-up appear when the customer clicks the checkout button?
No, a cart cross-sell widget cannot trigger on checkout button click. The Check Out pop-up trigger is disabled for every widget type except Pre-Purchase. Build a Pre-Purchase widget if you want an offer to appear between the cart and Shopify Checkout.
My cart cross-sell pop-up never renders. What should I check?
If the pop-up never renders, check these four things in order:
Check that it's installed and set visible in the Smart Cart editor.
Check if Live Mode is enabled in the widget editor, if it's toggled OFF but still installed in the Smart Cart editor you will need to use Rebuy's Preview Mode to view the widget.
Data Source rules. Open the widget's data source and confirm its rules match the cart state you are testing. If no rule matches, the widget returns no products and the pop-up will not open on any trigger.
Display Type. Confirm it is set to Popup and not Embed.
View limits. If Limit number of views is on and you have already hit Max View Count, the pop-up stays hidden until the cookie window expires.
Popup Delay. A long delay can make the pop-up look like it never fired.
You can also inspect the widget in your browser console. Rebuy.widgets exposes each widget's data.metadata.matched_rules array, which shows whether any rules matched, and data.products, which is only populated when rules have matched. For broader troubleshooting, see Why Isn't My Widget Showing?.
Can I style the pop-up beyond what the editor offers?
Yes, you can style the pop-up with custom CSS beyond the Styles tab options. See Custom Style the Cart Cross-Sell Widget for ready-to-use CSS snippets.