Cart Tabs is a Smart Cart component that groups multiple pieces of cart content into tabs inside a single footprint. Instead of stacking several Cross-Sell Widgets, images, and custom blocks one after another down the cart drawer, you organize them into up to three tabs that shoppers switch between. Cart Tabs saves vertical space in the cart while surfacing more upsell, cross-sell, and informational content, which can help increase average order value (AOV). It is especially useful in the single-column cart layout, where stacked content feels crowded.
(Image above: Onsite Smart Cart flyout showing Smart Cart tabs containing cart cross-sell recommendation widgets.)
How to add the Cart Tabs component to your Smart Cart
Follow these steps to add a Cart Tabs component to your Smart Cart. You add Cart Tabs the same way you add any other Smart Cart component.
Open your Smart Cart editor from the Manage Your Smart Carts page.
In the Body section, click Add+ at the location where you want the tabs to appear.
Select Cart Tabs from the component list.
Click into the Cart Tabs component to manage its tabs, then save your cart.
You can add multiple Cart Tabs components to a single Smart Cart, and you can place each one in any Body section location. When you save, the component appears in the cart at the position you chose. If Cart Tabs does not appear in the component list, confirm your Smart Cart plan and setup with Rebuy support.
Build and name your tabs
After adding the Cart Tabs component, you build the individual tabs inside it. Each Cart Tabs component holds up to three tabs.
Click Add New Tab to create a tab.
Enter a name in the Tab Name field. This is the label shoppers see on the tab onsite.
Choose a Tab Type for the tab (see the tab types below).
Reorder tabs by dragging the drag handle, and save your cart when finished.
Click Save
If a Tab Name is too long to fit, it truncates onsite, so keep tab names short. You can also drag Cross-Sell Widgets and Custom Code Blocks between tabs after they are created.
Cart Tabs settings
The Cart Tabs component has the settings described in the following table. Each tab is configured independently.
Setting | What it does |
Add New Tab | Adds a new tab to the Cart Tabs component. |
Tab Name | The display name shown on the tab onsite. Truncates if it is too long to fit. |
Tab Type — Content Block | Assigns a Content Block (a custom image or icon) as the tab's content. |
Tab Type — Cross-Sell Widget | Assigns an existing or newly created Cross-Sell Widget as the tab's content. |
Tab Type — Custom Code Block | Assigns a custom HTML code block as the tab's content. |
Choosing a Tab Type
Each tab holds one of three content types. Select the Tab Type that matches what you want that tab to show. The three tab types are described below.
What does the Content Block tab type do?
The Content Block tab type displays a custom image or icon in the tab. When you select it, a Configure Content Block section appears with Upload, Gallery, and Icons options. Uploads support JPG, PNG, GIF, or SVG files up to 5 MB. For full detail on the Content Block component, see Smart Cart Content Blocks.
(Screenshot above: Content Block tab type selected, showing the Configure Content Block section with Upload, Gallery, and Icons options and the Upload Images area.)
What does the Cross-Sell Widget tab type do?
The Cross-Sell Widget tab type displays product recommendations in the tab. When you select it, a Configure Cross-Sell Widget section appears where you select an existing widget from the Choose a widget dropdown, or click Create Cross-Sell Widget to build a new one. For how Cross-Sell Widgets work in the cart, see In-Cart Product Recommendations (Cross-Sell Widgets).
(Screenshot above: Cross-Sell Widget tab type selected, showing the Configure Cross-Sell Widget section with the widget dropdown and the Create Cross-Sell Widget button.)
What does the Custom Code Block tab type do?
The Custom Code Block tab type injects custom HTML into the tab. When you select it, an HTML editor appears with a Fill With Example HTML button that inserts starter code you can edit. Use this tab type for custom content that the other tab types do not cover.
(Screenshot above: Custom Code Block tab type selected, showing the HTML editor with the Fill With Example HTML button.)
How Cart Tabs behave onsite
Cart Tabs follow specific display rules once your shoppers see them in the cart. These behaviors are described below.
If a tab is assigned a Cross-Sell Widget that has no products to show, for example an upsell recommendation that returns empty, that entire tab is automatically hidden from the shopper rather than shown as an empty tab.
On mobile in the double-column layout, components that normally sit in the Cross-Sells column, including Cart Tabs, move into the Your Cart column. This matches the existing Smart Cart mobile behavior.
A Tab Name that is too long to display fully truncates onsite.
Tab styling follows the existing Smart Cart styling approach. This release does not add tab-specific styling controls.
Cart Tabs limitations
Cart Tabs has the following limitations in this release. Review these before planning your tab layout.
Each tab can contain only a Cross-Sell Widget, a Custom Code Block, or a Content Block. No other component types can be assigned to a tab.
The same Cross-Sell Widget cannot be assigned to more than one tab within the same Cart Tabs component.
Cart Tabs cannot be placed in the same Body section as the Login button or the Cart Title.
Tab styling is not independently customizable in this release. Tabs inherit the existing Smart Cart styling approach.
Frequently asked questions about Cart Tabs
Can I use the same Cross-Sell Widget in two tabs?
No, the same Cross-Sell Widget cannot be assigned to more than one tab within the same Cart Tabs component. Assign a different Cross-Sell Widget to each tab, or create a new widget for the second tab.
What happens if a tab's Cross-Sell Widget has no products to show?
If a tab's assigned Cross-Sell Widget returns no products, that entire tab is automatically hidden from the shopper onsite. Shoppers do not see an empty tab.
Can I style Cart Tabs separately from the rest of my Smart Cart?
No, Cart Tabs does not add tab-specific styling controls in this release. Tabs inherit your existing Smart Cart styling approach.