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.
Create a Tabbed Recommendations Widget
You create a Tabbed Recommendations Widget from the widget catalog in your Rebuy admin. The catalog is organized by placement, so you start from the catalog page for the location you want the widget to appear in. A new widget is created with one tab already configured, so it renders as soon as you save it and you can add the rest of your tabs whenever you are ready.
In your Rebuy admin, open Cart & Merchandising in the left navigation and click Widgets.
Under Get Started, click the card for the placement you want, such as Product Page.
On the Tabbed Recommendations card, click Create New.
In the widget editor's Configuration list, click Tabs.
Under Tab Display Style, choose Basic Tabs or Pills, then choose an Alignment.
Click Add New Tab for each tab you want, then click each tab to configure it.
Turn on Live Mode at the top of the widget editor sidebar.
Save the widget.
When you save, the 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.
Where you can place a Tabbed Recommendations Widget
You choose where a Tabbed Recommendations Widget appears when you create it, by starting from the catalog card for that placement. The table below lists each placement and where the widget renders on your storefront.
Placement | Where the widget renders |
Home Page | Your storefront home page |
Product Page | Your Shopify product pages |
In Cart | Your Shopify cart page |
Choose the tab style and alignment
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.
Add, reorder, and remove tabs
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.
Configure each tab
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.
Name a tab and add a description
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.
Change the Add to Cart button text on one tab
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.
Choose which products fill a 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.
Include metafields and variants in a tab
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.
Limit how many products a tab shows
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.
Set a tab's layout
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.
Apply a discount to a Tabbed Recommendations Widget
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.
When a tab's Widget Discount toggle is off, products added from that tab get the widget's discount.
When a tab's Widget Discount toggle is on, products added from that tab get the tab's own discount instead of the widget's. You set the tab's Discount Type to Fixed, Percentage, or None, enter the discount amount (the field reads Percentage Discount when the type is Percentage), and optionally add a Discount Message (Optional) and a Quantity (Optional).
When a tab's Discount Type is set to None with its Widget Discount toggle on, products added from that tab get no discount, even while the widget itself has a discount set.
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.
Tabbed Recommendations Widget settings
The table below lists each Tabbed Recommendations Widget setting, whether it belongs to the whole widget or to a single tab, and what it controls. Columns and Carousel are found under Product Display, Metafields and Variants as Products are found under Product Options, Enable Quick View, Triggered By, and Show Savings Badge are found under Product Settings, and the image ratio and Show Second Image on Hover are found in the Product Images card.
Setting | Applies to | What it controls |
Tab Display Style | The whole widget | Whether tabs render as basic tabs or as pills, and whether the tab row aligns left, center, or right. |
Tabs | The whole widget | How many tabs the widget has and their left to right order. Order is changed by dragging a tab. |
Tab Title | A single tab | The label shoppers see on that tab. |
Data Source | A single tab | Which default Rebuy endpoint or custom data source supplies that tab's products. |
Product Limit | A single tab | The maximum number of products pulled for that tab. |
Columns | A single tab | How many products appear per row on desktop, tablet, and mobile, set separately for each. |
Carousel | A single tab | Whether that tab's products scroll as a carousel or sit in a static grid. |
Metafields | A single tab | Whether metafield data is included in the product data pulled for that tab. |
Variants as Products | A single tab | Whether each product variant displays as its own product entry. |
Enable Quick View | The whole widget | Whether the widget's product cards offer Quick View. |
Triggered By | The whole widget | What a shopper activates to open Quick View, which can be a button, the product title, or the product photo. |
Show Savings Badge | The whole widget | Whether product cards can show a percent-off badge. On by default. |
Image ratio | The whole widget | Whether product images display at a 1:1, 3:4, or 9:16 ratio. |
Show Second Image on Hover | The whole widget | Whether a product's second image shows when a shopper hovers over its card. |
Widget Discount | The whole widget | The discount applied to products added from the widget. |
Per-tab Discount | A single tab | When Off, that tab uses the widget's discount. On, that tab uses its own discount type, amount, optional message, and optional Quantity instead. |
Turn on Quick View for your product cards
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 a savings badge on product cards
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.
Set how product images display on the 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.
Image Ratio displays every product image at 1:1, 3:4, or 9:16.
Show Second Image on Hover shows a product's second image when a shopper hovers over its card.
Image Source sets whether a card shows the Variant image or the Product image.
Image Border Radius rounds the image corners, measured in the unit chosen in Image Border Radius Unit, either Pixels or Percentage.
Enable fixed height images and Enable fixed width images are also in this section.
Other product card settings in Product Settings
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.
Section in Product Settings | Setting | What it controls |
General | Product Type | Whether the widget offers products as Both, One-Time, or Subscription. |
General | Learn More | Whether the product card links to the product page (Product) or does not link (Disabled). |
Product Options | Hide Out of Stock Variants | Whether out of stock variants are left off the product cards. |
Product Options | Match On Variant | Whether recommendations match the variant options, such as color or size, of the product the shopper is viewing or added. |
Product Options | Match On Selling Plan | Whether recommendations match the selling plan of the product the shopper is viewing or added. |
Product Options | Display Product Description | Whether product cards Show or Hide the product description. |
Product Options | Display Variant Title | Whether product cards Show or Hide the variant title. |
Product Options | Display Variant Options | When product cards show variant options, set to Default, Never, Always, or Dynamic. |
Product Options | Display Product Vendor | Whether product cards show the product vendor beneath the product title. |
Product Quantity Controls | Enable Quantity Input | Whether product cards show a quantity input. |
Product Quantity Controls | Quantity Increment | How many units each step of the quantity input adds, from 1 to 20. |
How shoppers experience a Tabbed Recommendations Widget
A Tabbed Recommendations Widget loads its tabs, hides empty ones, remembers the selected tab, and handles keyboard navigation as described below.
All tabs in a Tabbed Recommendations Widget load their products together when the page loads, and the widget appears as soon as the first tab with products is ready.
A tab whose data source returns no products is hidden from shoppers automatically, so a tab is never shown empty.
If every tab in the widget returns no products, the widget does not render at all.
The tab a shopper selects in a Tabbed Recommendations Widget stays selected on the other pages that shopper visits during the same browsing session. Each widget remembers its own selected tab, and nothing is kept once the browsing session ends.
Tabs are fully keyboard navigable and follow standard tab and tab panel accessibility patterns, so a shopper can move between them without a mouse.
How a Tabbed Recommendations Widget is recorded on an order
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.
Line item property | What it holds |
_attribution | Rebuy Tabbed Widget, the attribution value every Tabbed Recommendations Widget writes. |
_widget_id | The unique ID of the widget that added the product, which separates one Tabbed Recommendations Widget from another. |
_r_tab_index | The position of the tab the product was added from, counting from 0 for the leftmost tab. |
_r_tab_title | The Tab Title of the tab the product was added from, as it read at the time of the order. |
Tabbed Recommendations Widget limitations
The Tabbed Recommendations Widget has the constraints below. Review them before planning your tabs.
A Tabbed Recommendations Widget holds a maximum of 10 tabs.
Tabs share the widget's language and style settings. A tab cannot override the wording or the styling that the widget uses.
Your reports do not break Tabbed Recommendations Widget results down by tab. Results are reported for the widget as a whole.
A tab pointing at a custom data source that has been deleted returns no products and is hidden from shoppers, with no error shown in the widget editor.
Tabbed Recommendations Widget compared with Cart Tabs
The Tabbed Recommendations Widget is a widget type you create from the widget catalog. 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.
Feature | Where it is built | Where it appears | What each tab holds |
Tabbed Recommendations Widget | The widget catalog in your Rebuy admin | Your home page, product pages, Shopify cart page | Its own data source, product limit, and layout |
Cart Tabs | The Smart Cart editor, added as a component in the Smart Cart body | The Rebuy Smart Cart only | An existing Cross-Sell Widget, a Content Block, or a Custom Code Block |
For the Smart Cart component, see Cart Tabs: organize your Smart Cart content into tabbed sections.