How to Customize the Tabbed Recommendations Widget with CSS

Use this guide to style the Tabbed Recommendations Widget, also called the Tabbed Widget, with custom CSS (Cascading Style Sheets). It covers where to add CSS for the Tabbed Recommendations Widget, the class names and CSS variables the widget renders, and copy-paste recipes for the tab row, the active tab, pill tabs, the savings badge, product images, and styling a single tab. Every recipe is scoped to one widget with its widget ID, so your CSS changes only the Tabbed Recommendations Widget you add it to.

Many Tabbed Recommendations Widget style changes are available as settings in the widget editor, and a setting is easier to maintain than custom CSS. The table below lists common changes, the setting that makes each one, and where that setting sits.

The Theme menu in the Tabbed Recommendations Widget's Display settings lists your store's Rebuy Theme by name, along with Custom. With your Rebuy Theme selected, the widget uses the styling set in Settings > Themes in your Rebuy admin, which the widgets on that theme share. Selecting Custom shows the Styles group beneath the CSS box, and its color and button settings apply to this Tabbed Recommendations Widget only.

Reach for CSS when the change you want is not covered by a setting, such as spacing, font size, the active tab's underline color, letting tabs wrap on mobile, or styling one tab differently from the others.

You add CSS for a Tabbed Recommendations Widget in the CSS box in the widget editor's Display settings. Follow these steps:

Your Tabbed Recommendations Widget's ID appears in the top bar of the widget editor after WIDGET ID:, with a copy icon beside it. The ID also appears in the ID column of the Widgets list in your Rebuy admin.

Once you have the ID, it goes straight into the selector after #rebuy-widget-. For example, a Tabbed Recommendations Widget with the ID 311934 scopes its CSS like this:

Check Tabbed Recommendations Widget CSS on your storefront rather than in the widget editor's preview. The editor preview does not load your Shopify theme's CSS, and on the real page your theme's styling can override yours. Widget CSS has no draft state, so CSS saved to a live widget appears to shoppers as soon as you click Save. To test without shoppers seeing your changes, use one of these methods:

For the full steps, see Using Rebuy preview mode.

The Tabbed Recommendations Widget's standard template renders the class names in the tables below, grouped by area of the widget. The tables list the classes you are most likely to target, not every class in the widget, so use your browser's Inspect tool to find any element that is not listed. Scope every class to #rebuy-widget-12345 when you use it.

The following table lists the Tabbed Recommendations Widget's root and heading classes and the element each one targets.

The Tabbed Recommendations Widget's super title renders as an h3 element and its title as an h4 element, so heading styles from your Shopify theme can reach them. Scoping your CSS to the widget ID makes it specific enough to win against those theme styles.

This example uses the Tabbed Recommendations Widget's heading classes to restyle the super title, title, and description in one widget:

The following table lists the classes on the Tabbed Recommendations Widget's tab row and on each tab.

The number at the end of a Tabbed Recommendations Widget tab's ID is that tab's position in the Tabs panel, counting from 0 for the first tab. The number follows the position rather than the tab, so reordering tabs moves any position-based CSS to whichever tab now holds that position. A tab that is hidden because its data source returned no products keeps its number, so the tabs after it are not renumbered.

This example uses the Tabbed Recommendations Widget's tab row classes to draw a divider line under the tab row, give the active tab a colored underline, and lighten the tab descriptions in one widget:

The following table lists the classes on the product cards inside each Tabbed Recommendations Widget tab.

The Tabbed Recommendations Widget's savings badge carries the .rebuy-money and .sale classes as well as .rebuy-tabbed-widget__badge, so CSS you write for .rebuy-money.sale sale prices also reaches the badge. To keep the badge out of a sale price selector, add :not(.rebuy-tabbed-widget__badge), as in #rebuy-widget-12345 .rebuy-money.sale:not(.rebuy-tabbed-widget__badge).

This example uses the Tabbed Recommendations Widget's product card classes to outline each product card, bold the product titles, and bold the sale price while leaving the savings badge unchanged:

Some Tabbed Recommendations Widget settings add a modifier class to the widget, which lets you write CSS for one style only. The admin label and the class name do not always match, so the following table lists each setting choice, the class it adds, and the element that carries the class.

This example uses the Tabbed Recommendations Widget's setting classes so that each block of CSS applies only while that setting is chosen. The image ratio class sits on the widget root itself, so it attaches to the widget ID with no space between them.

The Tabbed Recommendations Widget uses CSS variables (custom properties) for the product image ratio and the savings badge colors. Setting a variable on #rebuy-widget-12345 changes every element in that widget that uses it, which takes less CSS than targeting each element. The following table lists each variable, what it controls, and its default value.

The Tabbed Recommendations Widget's savings badge background defaults to currentcolor, meaning the badge's own text color. The badge carries the .rebuy-money.sale classes, so its background matches the widget's sale price color. That color is the Sale Price setting in the Styles group when Theme is set to Custom, and the sale price color of your Rebuy Theme otherwise. Changing the sale price color, with that setting or with CSS, changes the badge background too, unless you set --rebuy-tabbed-widget-badge-background.

Each recipe below is scoped to one Tabbed Recommendations Widget. Paste the CSS into the CSS box in the widget's Display settings, replace 12345 with your widget ID, and adjust the values to match your brand.

The Basic Tabs style of the Tabbed Recommendations Widget marks the active tab with bold text and a 2px underline drawn in the tab's text color. Tabs take their text color from the text around the widget, so setting color on the active tab changes its text and underline together, and border-bottom-color sets the underline on its own.

This recipe is for the Basic Tabs style. When Tab Display Style is set to Pills, use the recipe under Style pill-shaped tabs instead.

The Pills style of the Tabbed Recommendations Widget draws each tab as a rounded pill with a 1px light gray border (#eee), and the active pill's border takes the tab's text color. The recipe below sets the border on inactive pills, fills the active pill with a solid color, and softens the fully rounded corners.

This recipe applies only while the Tabbed Recommendations Widget's Tab Display Style is set to Pills, because every selector in it starts from the .rebuy-tabbed-widget__tabs--pills class.

Tab names in a Tabbed Recommendations Widget display at 14px on a 20px line height, and tab descriptions display at 12px and 75% opacity beneath the name. The active tab's name is bold (font weight 600). The recipe below changes the size, case, and color of each.

The Tabbed Recommendations Widget keeps every tab on a single row. When the tabs are wider than the screen, the row scrolls sideways with its scrollbar hidden, which shoppers on mobile can miss. The recipe below lets the tabs wrap onto additional lines instead, while each tab's own name stays on one line.

The Tabbed Recommendations Widget places 8px between tabs, 15px between the tab row and the products, and 8px of top and bottom padding with 12px of side padding inside each tab. The widget itself has 30px of padding above and below it. The recipe below adjusts each of these.

The Alignment setting in the Tabbed Recommendations Widget's Tabs panel moves only the tab row, and Rebuy's built-in styling keeps this widget's super title, title, and description left-aligned. To center the Tabbed Recommendations Widget's heading text as well, add this CSS:

The savings badge on a Tabbed Recommendations Widget product card sits 8px from the top left corner of the product image, as a rounded label with white text on your sale price color. The recipe below sets the badge colors with its CSS variables, moves the badge to the top right corner, and gives it square corners.
​

To remove the savings badge from a Tabbed Recommendations Widget entirely, turn off Show Savings Badge in the Product Options section of Product Settings rather than hiding the badge with CSS.

The Image Ratio setting in a Tabbed Recommendations Widget offers 1:1, 3:4, and 9:16, and product images fill that shape by cropping to fit. To use a ratio the setting does not offer, set the --rebuy-tabbed-widget-image-ratio variable, which overrides the Image Ratio setting for that widget.

To show each whole product image in a Tabbed Recommendations Widget without cropping, change object-fit to contain. Images that do not match the ratio then show empty space around them, filled with the background color you set.

Every tab in a Tabbed Recommendations Widget shares the widget's styling, but CSS can target a single tab by its position. Use #rebuy-tabbed-widget-12345-tab-1 for the tab button and .rebuy-product-grid__tab-1 for that tab's products, where 1 is the tab's position counting from 0 for the first tab. The tab button's ID contains your widget ID, so replace 12345 there as well. The recipe below colors the second tab's name red and gives that tab's product cards a tinted background.

Reordering tabs in the Tabbed Recommendations Widget's Tabs panel changes their positions, so update the number in this CSS whenever you move a tab.

Add to Cart and Quick View buttons on Tabbed Recommendations Widget product cards stretch to the full width of the card. Button colors, border width, and corner radius come from your Rebuy Theme, or from the Styles group of the widget's Display settings when Theme is set to Custom, under Button Background, Button Border Color, Button Text, Button Border Width, and Button Radius. Use CSS for what those settings do not cover, such as spacing and text style. The recipe below adds space between the Quick View and Add to Cart buttons and changes the button text style.

Rebuy draws a 2px blue outline (#2491c4) around a Tabbed Recommendations Widget tab when a shopper reaches it with the keyboard. The recipe below changes that outline's color. Keep a visible outline when you restyle it, so shoppers who navigate by keyboard can still see which tab is focused.

To change a Tabbed Recommendations Widget on small screens only, wrap your CSS in a media query. The recipe below shrinks the tab names and the padding inside each tab at screen widths of 767px and below.

When CSS in a Tabbed Recommendations Widget's CSS box does not apply on your storefront, work through these checks in order:

Rebuy support does not write, debug, or troubleshoot custom CSS for the Tabbed Recommendations Widget, because custom code falls outside the standard Rebuy package. For changes that go past the recipes in this guide, share Rebuy's AI Integration Guide and the Tabbed Widget custom template reference with your developer or AI coding tool.

For hands-on custom work, the Rebuy Partner Directory lists agencies that build Rebuy customizations. See Rebuy's support policy for what support covers.