How to Create an Embedded Cart Cross-Sell Widget

An embedded cart cross-sell widget displays in-cart product recommendations inline inside your Rebuy Smart Cart, so shoppers see complementary products in the cart drawer alongside the items they have already added. Because it is a cross-sell rather than an upsell, adding a recommended product never replaces what is already in the cart — the shopper keeps both.

This guide covers the embedded display style. If you want the recommendations to appear as a pop-up overlay triggered by a shopper action instead of sitting inline in the drawer, see How to Create a Cart Cross-Sell Pop-Up Widget.

(Screenshot above: A Rebuy Smart Cart drawer with an inline cross-sell widget below the cart items, showing two recommended products with Add buttons.)

In-cart recommendations reach shoppers at the point where they have already decided to buy, which makes them one of the highest-intent placements on the store. Each recommendation is personalized based on the cart's contents and your Data Source configuration, so the products shown change as the shopper's cart changes.

The two most common goals are raising average order value by surfacing complementary products, and moving specific inventory by targeting what appears for a given cart. Because the widget sits inside the cart rather than on a product page, it can also react to the whole cart at once — for example, recommending an accessory only once a qualifying product is present.

Both display styles use the same widget, the same Data Source, and the same settings. The only difference is how and when the widget presents itself, which is controlled by one setting called Display Type. The table below compares them.

Choose embedded when you want recommendations to be a persistent part of the cart experience. Choose a pop-up when the offer is time-sensitive or conditional and losing it in the drawer would undercut it. You can run both in the same Smart Cart using two separate widgets.

An embedded cross-sell widget is created as a component inside the Smart Cart editor. Adding the component is what connects the widget to the cart — a widget created anywhere else will not appear in the cart until a Cross-Sell Widget component points at it.

(Screenshot above: The Smart Cart editor with the Add + button in the Body section)

(Screenshot above: Add Component panel with Cross-Sell Widget selected)

(Screenshot above: Smart Cart Cross-Sell Widget component dropdown and Create Cross-Sell Widget button)

A cross-sell component with no widget assigned to it is not a valid component. Rebuy places invalid or unconfigured components in a Needs Attention section in the editor, and they do not render in the cart until you finish configuring them. If a component you added is not showing, check there first.

The Cross-Sells section only exists on double-column Smart Cart layouts. If you switch a double-column cart to single-column, any components in that section move to Needs Attention and you will need to drag them into the Body, Header, Goal Box, or Footer.

The widget's Display Type decides whether it renders inline or as an overlay, and Embed is the default — a newly created cross-sell widget is already embedded and needs no change. Only revisit this setting if the widget was previously configured as a pop-up and you want to bring it back inline.

If the widget is set to Popup, it will not appear inline in the cart no matter where you place the component, because a pop-up widget stays hidden until its trigger fires. A cross-sell component that is correctly placed but never visible in the drawer is very often a widget left on Popup.

(Screenshot above: The Widget Settings tab with Display Type set to Embed.)

The widget's Data Source decides both which products the widget recommends and whether it appears at all. An embedded widget renders whenever its Data Source returns at least one product, and stays hidden when the rules return nothing — so the rules are your visibility control as well as your merchandising control.

By default, a new cross-sell widget's data source returns AI-driven recommendations based on the cart's contents. That is a working configuration on its own — you only need rules when you want to control what appears in specific situations, such as returning Top Sellers for a nearly empty cart or featuring a collection during a promotion.

(Screenshot above: The Data Source section of the widget editor sidebar with the Endpoint dropdown, Edit link and Create new data source link.)

A cart widget's Data Source input is the cart itself, and every product currently in the cart is an input product. This is what makes cart-only rules possible — rules based on cart subtotal, line item count, total item count, specific products in the cart, or an applied discount code. A product page widget cannot use any of them, because it only has access to the product being viewed.

Two settings behave differently here as a result:

For the full reference on every cart rule, its operators, and how to scope a rule by tag or collection, see Data Sources and the Cart. For all rule types, see Data Sources 101.

You can attach a discount to an embedded cross-sell widget so recommended products display at a reduced price. Configuring the discount correctly requires one setting beyond the discount amount itself.

If Discounted By Functions is left off, Rebuy shows the discounted price in the widget but the shopper is charged full price at checkout, because the widget's discount is display-only in that mode. You would need to create a matching discount in Shopify yourself. See the Rebuy Discounting Overview for the full picture.

Once a cross-sell component is in the cart, you manage it from the Smart Cart editor rather than from the widget editor. Each action below is a component-level change and takes effect when you save the cart.

Hiding a component keeps it and all of its configuration in the cart while stopping it from rendering, which is the right choice for a seasonal or paused offer.

Note that a component must have valid settings before Rebuy will let you make it visible again. A cross-sell component with no widget assigned cannot be turned back on until you assign one.

(Screenshot above: A Cross-Sell Widget component row in the Smart Cart editor with the visibility eye icon highlighted.)

Cross-sell components are repositioned by dragging them, and their order in the editor is the order they appear in the cart.

If a component has no drag handle, the cart is using a custom template. Nothing is draggable while a custom template is active — the layout is controlled by the template markup instead.

Deleting removes the component from the cart. The underlying widget itself is not deleted and remains available in Cart & Merchandising > Widgets, so you can add it back later or use it elsewhere.

Delete is unavailable while the cart is using a custom template.

The Cross-Sell Widget component is repeatable, so you can add several to one Smart Cart and position each independently. Each component points at its own widget, so each can have its own Data Source, layout, and rules.

Most of the widget editor is shared across every widget type. The settings below are the ones that meaningfully change an embedded cart widget, where the constraint is that it renders inside a narrow drawer rather than on a full-width page.

The Screens section of Widget Settings is where a cart cross-sell widget's product layout is actually decided. It contains one card per screen size, and each card has its own copy of every setting:

The three cards are independent. Changing Large Screen does nothing to how the widget looks on a phone, so configure all three whenever you change one.

Each card has four settings:

Grid Columns and Carousel together decide how many products a shopper actually sees.

(Screenshot above: A Cross-Sell Widget's Screen settings showing Display Style dropdown, Carousel, Pagination and Grid Column options.)

The following constraints apply to embedded cart cross-sell widgets. Each has a workaround or an alternative where one exists.

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.

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.

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:

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.

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.

Rebuy support cannot troubleshoot native cart integrations, but there are three paths forward depending on your situation:

An embedded cross-sell widget most often fails to show for one of four reasons, in this order of likelihood:

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

When a widget displays fewer products than you configured, the products are usually being returned correctly and the layout is showing only some of them at a time. Check these three settings in this order:

The products are not lost in any of these cases. They are returned by the Data Source and present in the widget — the layout is deciding how many sit on screen at once.

Yes, the Cross-Sell Widget component is repeatable, so you can add several to one Smart Cart, each pointing at its own widget with its own Data Source and layout. Position them independently by dragging them in the editor. You can also organize them further by using Cart Tabs - see Cart Tabs: organize your Smart Cart content into tabbed sections

Yes, a cross-sell widget can be placed inside Cart Tabs instead of sitting directly in the cart body. Cart Tabs is a separate Smart Cart component that groups up to three pieces of cart content into tabbed sections, and Cross-Sell Widget is one of the available tab types — when you select it, you either choose an existing widget or create a new one from inside the tab. Use it when you want more than one set of recommendations without each one taking its own vertical space in the drawer, which matters most on single-column carts. For setup steps, see Cart Tabs: Organize Your Smart Cart Content Into Tabbed Sections.

A cross-sell adds the recommended product alongside what the shopper already has, so the cart ends up with both. An upsell replaces the original item with the recommended one, so the cart ends up with only the upsold product. In-cart recommendation widgets are cross-sells. See How To Create A Product Upsell Widget

An embedded cart cross-sell widget requires Rebuy's Smart Cart, because the Cross-Sell Widget component is what places it in the cart. You can place a Rebuy cart widget inside your Shopify theme's own cart drawer instead, but that is a developer integration and Rebuy support does not cover it. See the Native Cart Support section.

Deleting a Cross-Sell Widget component removes it from the cart only. The widget itself still exists in Cart & Merchandising > Widgets with all its settings intact, so you can add it back to the cart or use it elsewhere at any time.

Yes, and the right tool depends on what you want to change. For appearance — colors, spacing, typography, sizing — use CSS: see Custom Style the Cart Cross-Sell Widget for selectors aimed specifically at this widget, and the Smart Cart CSS Customization Guide for the surrounding cart. For structural changes — different markup, extra elements, or rearranged product information — a developer can replace the widget's template entirely. See Widget Custom Templates.