How to Create a Product Page Cross-Sell Pop-Up Widget

A Product Cross-Sell Pop-Up widget opens a pop-up of product recommendations on your Shopify product page when a shopper adds that page's product to the cart, so the shopper can add complementary products before moving on. This guide takes you from an empty widget to a live one: create the widget, check its pop-up settings, connect a Data Source, set the layout and copy, install it on your product page template, and turn on Live Mode.

​Product Cross-Sell is the widget type name the Rebuy widget editor shows for this widget. A Product Cross-Sell Pop-Up is a Product Cross-Sell widget with Display Type set to Popup, which is the same widget type behind the inline product page recommendation widget. A cross-sell adds the recommended product alongside the product the shopper just added, so the cart ends up with the added product and the recommendation, and it never replaces the product the shopper added.

Requirement: The Product Cross-Sell Pop-Up is created under Cart & Merchandising > Widgets in the Rebuy dashboard and installed on your Shopify product page template. It does not require Rebuy's Smart Cart.

Rebuy has several pop-ups that can open when a shopper adds a product to the cart, and they differ in where they are installed and in what happens to the cart. Pick the right one before you start building. The table below matches each goal to its pop-up, then gives where that pop-up is created and installed and what it does to the cart.

For the Smart Cart version, see How To Create A Cart Cross Sell Pop Up Widget. For the upsell, see How To Create A Product Upsell Widget, and for the subscription pop-up, see Switch To Subscription Pop-up. If you want recommendations that sit inline on the product page instead of opening in a pop-up, follow How to Create a Product Page Cross-Sell Widget.

A Product Cross-Sell Pop-Up widget is created on the Create New Widget page, starting from the Add to Cart Cross-Sell (Popup) card.

The widget editor opens with your Product Cross-Sell Pop-Up widget created. Rebuy does not ask you to choose a location for this widget, because the Add to Cart Cross-Sell (Popup) card offers only one location, Product Page. Rebuy names the new widget after the card and creates a Data Source for it named Product - Add to Cart Cross-Sell (Popup), which returns AI recommendations for the product on the page. On wide screens the editor's top bar shows the widget's location and type, PRODUCT PAGE and PRODUCT CROSS-SELL, next to the WIDGET ID you need for installation.

The goal buttons, the location picker, and the Your Widgets table are covered in Widget Dashboard Page: Create a Widget and Manage the Ones You Have.

The pop-up settings are in Widget settings > General, and the Add to Cart Cross-Sell (Popup) card already sets Display Type and Popup Trigger for you. Any Product Cross-Sell widget becomes a pop-up the same way, so a widget built from another product page card such as AI Recommended turns into this pop-up when you set its Display Type to Popup.

The Popup Trigger setting decides what opens a Product Cross-Sell Pop-Up, and it appears only while Display Type is Popup. The table below lists each trigger this widget offers and what opens the pop-up on a product page.

The Check Out trigger does not appear on a Product Cross-Sell Pop-Up, because it is reserved for Pre-Purchase widgets.

A Product Cross-Sell Pop-Up set to Add To Cart opens only when the product the shopper adds is the product on the page. Adding a different product from the same page, for example from another Rebuy widget, does not open it. The pop-up opens again every time the shopper adds the page's product during the visit, so use Limit number of views in Widget settings > General > View Options if you want to cap how often one shopper sees it.

The Data Source of a Product Cross-Sell Pop-Up decides which products appear in the pop-up and whether the pop-up opens at all. The pop-up opens only when its Data Source returns at least one product, so the rules are your visibility control as well as your merchandising control.

The data source Rebuy creates with this widget has a single IF Anything rule that returns AI recommendations for the product on the page, so the pop-up works without any rules written. Add rules when you want specific products to appear after specific adds, such as a matching accessory for one product line. For the full rule reference, see Data Sources 101.

A Product Cross-Sell Pop-Up set to Add To Cart requests its products again after the shopper adds the page's product, and that request includes the exact variant the shopper added. That lets a pop-up offer different products for different variants, which a product page widget embedded in the page cannot do, since an embedded widget only knows which product is on the page.

The Screens section of Widget settings lays out the products inside the pop-up, with one card per screen size: Large Screen for devices wider than 768px, Medium Screen for 481px to 768px, and Small Screen for 480px and narrower. Each card has its own Display Style, Carousel, Show Paginations, and Grid Columns, so set every screen size whenever you change one. Setting Display Style to None stops the pop-up from opening at that screen size. For a pop-up that offers one product, set Grid Columns to 1. The layout settings are explained in full in How to Create a Product Page Cross-Sell Widget.

The Language screen holds every piece of text the pop-up displays. A new pop-up opens with the super title You'll Also Love and the title Don't forget these customer favorites!

The Decline Offer field also appears under Call to Action, but the Product Cross-Sell Pop-Up has no decline button, so text entered in Decline Offer is not shown to shoppers. To change the label of the button that closes the pop-up, edit Continue instead.

A Product Cross-Sell Pop-Up only opens on pages where it is installed, and it has to be installed on the product page template so it can read the page's product ID. The widget editor generates the code for either install method.

Appending a Product Cross-Sell Pop-Up to the page body is the fix Rebuy Support uses most often when a product page pop-up does not open or opens behind the cart drawer, and it is worth doing at install time. The pop-up is drawn inside the theme section that holds its container, so that section's styling carries over to it: a hidden section hides the pop-up, and a section layered below your cart drawer keeps the pop-up behind the drawer. Moving the container to the end of the page body takes it out of the section.

The pop-up still reads the product ID from the app block or container you installed in your product template, so keep that installation in place. For more on placement selectors, see Dynamic Placement Selectors.

Testing a Product Cross-Sell Pop-Up before shoppers see it is the reason to turn Live Mode off in Step 1. Once the pop-up is installed and working, Live Mode is what makes it public.

If the pop-up does not open at this point, work through the FAQ below before anything else, then see Why Isn't My Widget Showing?.

You can attach a discount to a Product Cross-Sell Pop-Up so its recommended products display at a reduced price. Making the discount apply at checkout takes one setting beyond the amount.

If Discounted By Functions is left off, the pop-up shows the discounted price but the shopper is charged full price at checkout, because the widget's discount is display only in that mode. For the full picture, see the Rebuy Discounting Overview.

The widget editor shows the same sections for every widget type, and most of them are shared. The table below lists the settings that change how a Product Cross-Sell Pop-Up behaves, where each one is, and what it does.

The following constraints apply to Product Cross-Sell Pop-Up widgets. Each one has a workaround or an alternative where one exists.

The Display screen is where you change how a Product Cross-Sell Pop-Up looks. Set Theme to Custom to reveal color pickers and button shape fields with no code needed. For spacing, font sizes and anything else those fields do not cover, use the CSS box on the same screen, and scope every selector to the widget ID, as in #rebuy-widget-12345 .rebuy-widget-content for the pop-up box, since CSS in that box reaches the whole page. The pop-up uses the same product markup as the product page widget, so the Product Page Recommendation Widget CSS Styling Guide applies to its titles, prices and buttons. For how CSS works across Rebuy widgets, see Enhance Widget Styling Using Custom CSS Code.

Yes, a Product Cross-Sell Pop-Up set to Add To Cart can show different products for different variants. After the shopper adds the page's product, the pop-up requests its products again with the exact variant that was added, so a Data Source IF rule on Product that names specific variants matches only when one of those variants is added. Pair each variant rule with a RETURN rule for the products to offer. This works only in the pop-up: a product page widget embedded in the page knows which product is on the page but not which variant the shopper picks. The pop-up has to be installed with the page's product ID, which the Enable Product ID app block setting or the HTML Div Placement container provides.

A Product Cross-Sell Pop-Up that never opens on add to cart is almost always one of the following. Check them in this order:

For broader troubleshooting, see Why Isn't My Widget Showing?.

A Product Cross-Sell Pop-Up appears behind the cart drawer when the theme section holding it sits on a lower layer than the drawer, and appending the pop-up to the page body fixes it. Follow the steps in "Append the pop-up to the page body" in Step 5, for every screen size. If your theme's own cart drawer is also opening alongside Rebuy's Smart Cart, hide the theme's drawer as well, using How to Debug the Smart Cart: Hide an Existing Cart Drawer.

No, the Product Cross-Sell Pop-Up built from the Add to Cart Cross-Sell (Popup) card is a product page widget and is installed on your product page template, not in the Smart Cart. For a cross-sell pop-up that lives inside the Smart Cart, build a Cart Cross-Sell Pop-Up as a Cross-Sell Widget component in the Smart Cart editor: see How To Create A Cart Cross Sell Pop Up Widget.

No, a Product Cross-Sell Pop-Up cannot be limited to one Smart Cart in a Smart Cart A/B test, because it is installed on the product page and opens for every shopper regardless of which Smart Cart they see. To show a cross-sell pop-up for only one cart in the test, build a Cart Cross-Sell Pop-Up and add it to that Smart Cart only. Each Smart Cart in the test runs with its own components, so the pop-up appears only for shoppers who see that cart. See How To Create A Cart Cross Sell Pop Up Widget.