Tabbed Recommendations Widget: show multiple curated product sets in tabs

Use this article to create a Tabbed Recommendations Widget, configure each of its tabs, and understand how the widget behaves for your shoppers. The Tabbed Recommendations Widget is a Rebuy widget type that displays multiple product carousels or grids in one widget, organized into tabs that shoppers click between. Each tab pulls from its own independent data source, so a single widget can offer Best Sellers, New Arrivals, and Trending With You without taking up a separate widget placement for each one, and shoppers browse all of them without leaving the spot on the page where the widget sits.

You create a Tabbed Recommendations Widget from the Tabbed Recommendations card on the Create New Widget page in your Rebuy admin. The Tabbed Recommendations card offers the Home Page, Product Page, and Cart locations, so Rebuy asks which location you plan to install the widget on before it opens the widget editor. A new Tabbed Recommendations Widget is created with one tab already configured, so it has products to show as soon as you save it and you can add the rest of your tabs whenever you are ready.

The location you choose for a Tabbed Recommendations Widget sets which installation guide the Install button in the widget editor opens, and the widget renders wherever you install it. Choose the location where you plan to install the widget so the guide matches.

When you save, the Tabbed Recommendations Widget shows your tabs in the order you arranged them, with the first tab active the first time a shopper sees the widget. If the Tabbed Recommendations Widget does not appear on your storefront once it is installed, check that Live Mode is on and that at least one tab's data source is returning products, since a tab that returns nothing is hidden and a widget whose tabs all return nothing does not render.

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 placement card you create a Tabbed Recommendations Widget from sets which installation guide the widget editor shows, and the widget renders wherever you install it, either in your Shopify theme or, for the Rebuy Smart Cart, through a Widget component in the Smart Cart editor. Pick the card for the location where you plan to install the widget, so the guide matches. The table below lists each placement card and the storefront location it is for.

A Tabbed Recommendations Widget on your home page, product pages, or Shopify cart page shows on your storefront only after you install it in your Shopify theme and turn on Live Mode in the widget editor, while a Tabbed Recommendations Widget in the Rebuy Smart Cart is added in the Smart Cart editor instead, as described in Add a Tabbed Recommendations Widget to the Rebuy Smart Cart. To open the theme installation guide for your widget, click Install in the top bar of the Tabbed Recommendations Widget editor.

To install a Tabbed Recommendations Widget with an app block in the Shopify theme editor, follow these steps.

App blocks work only in Online Store 2.0 themes, so on a vintage theme you install the Tabbed Recommendations Widget manually instead. For full instructions, see Installing Rebuy Widgets via App Blocks in 2.0 Themes and Manually Installing Widgets.

You add a Tabbed Recommendations Widget to the Rebuy Smart Cart with a Widget component in the Smart Cart editor, and you do not install it in your Shopify theme editor, so no app block or theme code is needed. You can place a Tabbed Recommendations Widget you already set up, or create a new one from inside the Smart Cart editor.

To set up the tabs of a Tabbed Recommendations Widget that is already in your Smart Cart, open the Widget component's menu and click Edit Widget, which opens the widget editor in a new browser tab. A Tabbed Recommendations Widget that already sits in another Widget component of the same Smart Cart shows as (already in use) under Select Widget and cannot be selected a second time.

Tab Display Style, at the top of the Tabs panel in the Tabbed Recommendations Widget editor, controls the appearance of the tab row. Tabs display as Basic Tabs or as Pills, and Alignment places the tab row on the Left, Center, or Right. This setting belongs to the widget rather than to an individual tab, so every tab in the widget uses the same style and alignment.

The Tabs panel in the Tabbed Recommendations Widget editor is where you add, remove, and reorder tabs. Add New Tab adds a tab to the list, the delete icon on a tab's row removes that tab, and dragging a tab by its handle moves it to a new position. The order of tabs in the panel is the left-to-right order your shoppers see. A Tabbed Recommendations Widget holds a maximum of 10 tabs.

Every tab in a Tabbed Recommendations Widget is configured on its own, and nothing you set on one tab carries over to the others. Click a tab in the Tabs panel to open its settings, which include the Data Source, Discount, Language, and Product Display Settings sections.

Tab Name, in the Language section of a Tabbed Recommendations Widget tab's settings, is the label your shoppers see on that tab, such as Best Sellers or New Arrivals. Description (Optional), in the same section, adds a short line of text that displays beneath the tab's name in the tab row.

Add to Cart Text (Optional), in the Language section of a Tabbed Recommendations Widget tab's settings, replaces the Add to Cart button wording on that tab's product cards only. Leave it empty to keep the default wording on that tab.

Data Source, at the top of a Tabbed Recommendations Widget tab's settings, selects which products fill that tab. The Endpoint menu groups its options into Default Endpoints, which include Recommended (AI), Top Sellers, Buy It Again, Recently Viewed, and Similar Products (AI), and Custom Endpoints, which lists your shop's custom data sources by name and ID. Each tab can point at a different data source, which is what lets one widget show unrelated product sets side by side.

When a tab points at a custom data source, Edit beside the Data Source heading opens that data source in a new browser tab so you can change its rules. Create new data source opens the Data Sources page in a new browser tab. If you delete a custom data source that a tab is pointing at, that tab returns no products and is hidden from shoppers, and the widget editor shows no error telling you why.

The Data Source section of a Tabbed Recommendations Widget tab's settings has checkboxes that control what product data that tab pulls. Enabled Metafields includes product metafield data, Enabled Variant Metafields includes variant metafield data, and Enable Variants as Products displays each variant of a product as its own product entry in that tab.

Max Number of Products displayed, in the Data Source section of a Tabbed Recommendations Widget tab's settings, sets the most products that tab shows, from 1 to 20. Each tab has its own maximum, so one tab can show 20 products while another shows 4.

Product Display Settings, in a Tabbed Recommendations Widget tab's settings, controls the layout of that single tab. You set the number of products shown per row separately for desktop, tablet, and mobile, and you turn Carousel on to let that tab's products scroll or off to show them as a static grid. This widget type has no widget-level layout setting, so every tab carries its own Product Display Settings and two tabs in the same widget can look completely different.

Watch Cart Changes, in Widget Settings > General, controls whether the widget's tabs react to cart changes. When on, every tab adds the shopper's cart items to its data source inputs and refreshes each time the cart changes, so products already in the cart drop out and recommendations reflect what the shopper is buying. When off, tabs build their products from the page alone (e.g. the product a shopper is viewing), load once with the page, and do not refresh on cart changes.

Watch Cart Changes is on by default for widgets created for the cart page or Smart Cart. It is off by default for all other placements (home page, collection page, product page). Turn it on for those placements when you want the tabs to follow each shopper's cart.

The setting applies to every tab in the widget.

To confirm it is working, visit a storefront page where the widget is installed and add a product to your cart. With Watch Cart Changes on, the tabs refresh and the added product drops out. If they do not refresh, reopen Widget Settings, confirm the toggle is on, and save again.

A Tabbed Recommendations Widget has a widget-level discount, set in the Discount card of the widget editor's Configuration list, and each tab can either use that widget discount or set a discount of its own. The Widget Discount toggle in the Discount section of a tab's settings decides which discount applies to products added from that tab, so one tab can run an offer that the other tabs in the same widget do not.

A tab's Quantity (Optional) sets the most units of a single cart line that receive that tab's discount. If you leave a tab's Quantity (Optional) empty, the tab uses the widget's quantity setting instead.

A tab's discount shows in a Tabbed Recommendations Widget but does not apply in the cart or at checkout when Discounted By Functions is turned off in the widget's main Discount setting. A discount set on a single tab with the tab's Widget Discount toggle applies in the cart and at checkout only while Discounted By Functions is on for that Tabbed Recommendations Widget. With Discounted By Functions off, the tab's product cards still show the tab's discounted price, but products added from that tab are not discounted in the cart or at checkout.

To make a tab's discount apply in the cart and at checkout, turn on Discounted By Functions for the Tabbed Recommendations Widget:

The Discounted By Functions toggle is available on a Tabbed Recommendations Widget even when the widget's own Discount Type is None, so a widget can run a discount on one tab without a widget-level discount. After saving, add a product from the discounted tab on your storefront and check that the discount appears in the cart.

The table below lists each Tabbed Recommendations Widget setting, whether it belongs to the whole widget or to a single tab, where it lives in the widget editor, and what it controls.

Enable Quick View, in the Quick View Options section of the Tabbed Recommendations Widget editor's Product Settings, lets shoppers open a product in a modal and add it to their cart without leaving the tab they are browsing. It applies to the product cards on every tab. Under Triggered By, select Button, Product Photo, or both to choose what opens Quick View.

Show Savings Badge, in the Product Options section of the Tabbed Recommendations Widget editor's Product Settings, lets each product card in the widget show a percent-off badge. Show Savings Badge is on by default in a new Tabbed Recommendations Widget, so turn it off if you do not want the badge on your product cards.

The Product Images section of the Tabbed Recommendations Widget editor's Product Settings controls how product images display on the widget's product cards, on every tab. The settings in this section work as follows.

The Tabbed Recommendations Widget editor's Product Settings also holds the product card settings that Rebuy's other product widgets use, and they apply to the product cards on every tab. The table below lists each one by the section it sits in.

The Display settings in the Tabbed Recommendations Widget editor control the widget's colors and custom CSS. Setting Theme to Custom shows a Styles group of color settings, such as Background Color, Border Color, and Button Background, and the CSS box accepts your own CSS for the widget. To switch the tab row between Basic Tabs and Pills, use Tab Display Style in the Tabs panel rather than CSS.

CSS in a Tabbed Recommendations Widget's CSS box loads on every page where the widget renders and applies to that whole page, not only to the widget. Start every selector with #rebuy-widget- followed by your widget ID, such as #rebuy-widget-12345, so your styling reaches only this widget.

The Advanced settings in the Tabbed Recommendations Widget editor hold the widget's manual installation code, its callbacks, and its tracking settings.

HTML Div Placement, in the Advanced settings of the Tabbed Recommendations Widget editor, holds the div you paste into your theme to install the widget manually. Click the copy icon beside it, then follow Manually Installing Widgets.

Callbacks, in the Advanced settings of the Tabbed Recommendations Widget editor, lets you run your own JavaScript at set points in the widget's life, such as TabChange when the active tab changes or Add after a product is added to the cart. Selecting a callback opens a box for that callback's code. Callback code is written by your own developer or a Rebuy Partner agency, and Rebuy support does not build or troubleshoot it. If you have a developer, the technical starting point is Developer reference: Tabbed Widget event listeners.

Enable Attribution Tracking, under Product Properties in the Advanced settings of the Tabbed Recommendations Widget editor, adds the _attribution line item property to products added from the widget. Keep it on so orders from the widget can be traced, as described in the order section of this article.

Layout and behavior changes that the Tabbed Recommendations Widget settings do not cover require a custom template in your theme code. Custom template work is carried out by your own developer or a Rebuy Partner agency, and Rebuy support does not build or troubleshoot it. If you have a developer, the technical starting points are Developer reference: Tabbed Widget custom template and Developer reference: AI Integration Guide.

A Tabbed Recommendations Widget loads its tabs, refreshes them when the cart changes, hides empty ones, remembers the selected tab, and handles keyboard navigation as described below.

A product added from a Tabbed Recommendations Widget carries line item properties that identify the widget and the tab it came from, which is how you trace a sale back to a specific tab on an order. The table below lists each property and what it holds. Tabs are recorded by position rather than by a fixed ID, so a line item from a tab you later move or delete still holds the position that tab occupied at the time of the order.

To find these properties on an order, open the order in your Shopify admin and expand the line item properties under the product.

The Tabbed Recommendations Widget has the constraints below. Review them before planning your tabs.

The Tabbed Recommendations Widget is a widget type you create from the widget catalog, so even when it appears in the Rebuy Smart Cart it is not the Smart Cart's Cart Tabs component, which is added inside the Smart Cart editor and fills each of its tabs with an existing Cross-Sell Widget, a Content Block, or a Custom Code Block. The table below shows where each feature is built, where it appears on your storefront, and what each of its tabs holds.

For the Smart Cart component, see Cart Tabs: organize your Smart Cart content into tabbed sections.