Enhance Widget Styling Using Custom CSS Code

Rebuy widgets inherit their colors, fonts, and buttons from your Rebuy Theme, and you can go further with custom CSS (Cascading Style Sheets) to control almost any visual detail. This guide is the starting point for styling Rebuy widgets: it covers where CSS goes, how to scope it to one widget or every widget, and how to test it. If the widget you want to style has its own dedicated CSS guide, use the table below to jump straight to it.

Several Rebuy widgets have their own dedicated CSS guide with selectors and recipes specific to that widget. Find your widget in the table below to go straight to its guide, or keep reading for the CSS fundamentals that apply to every widget.

Most Rebuy widgets support custom CSS, and you can confirm any individual widget by opening it and looking for a Styles tab with a Custom CSS box. If that box is not there, custom CSS is not supported for that widget type.

Post-Purchase widgets and Checkout Extension widgets are the two exceptions. Neither includes a Custom CSS box, because both run inside Shopify's sandboxed checkout environment (Shopify Checkout Extensibility), which blocks custom CSS and JavaScript to keep checkout secure and compliant. Their appearance comes from your store's Shopify Checkout branding instead, which you set in your Shopify Admin under Settings > Checkout > Customize.

Here is what you can control for each of those two widget types:

Custom CSS for Rebuy widgets is loaded by Rebuy itself, not by your Shopify theme, so you never edit theme files to style a Rebuy widget. Rebuy adds your CSS to the page as an ordinary stylesheet, which leads to the most important thing to understand before writing any: your CSS is not automatically limited to the widget you added it to. Limiting it is something you do yourself, in every selector you write.

Before writing any CSS, check whether your Rebuy Theme already has a setting for the change you want, because a theme setting is easier to maintain than custom CSS. Your Rebuy Theme controls button background, border color, border width and radius, price and sale price styling, input field colors, super title, title, description, product title, product review colors, carousel controls, and the Smart Cart banner and timer colors. Every widget you create inherits those settings automatically.

To open your Rebuy Theme, go to your Rebuy admin Settings page and click Themes. For the full list of available settings, see Manage Rebuy Theme.

Reach for custom CSS when the change you want is not covered by a theme setting, such as spacing, font family, text alignment, widget width, mobile-only styling, or hiding an element.

A Custom CSS box controls which pages your CSS loads on, not which elements it is allowed to change. Once your CSS loads on a page, it applies to everything on that page, exactly like any other stylesheet on your store.

This catches people out most often with a widget's own Custom CSS box. Adding CSS there does not confine it to the widget. For example, if you add this CSS to a widget that sits on your home page, every heading on your entire home page turns red, not just the widget's heading:

To limit your CSS to one widget, prefix the selector with that widget's ID:

Rebuy gives you two places to add custom CSS, and the difference between them is which pages your CSS loads on, not what it can reach. The table below shows when each one loads and what to use it for.

Locating the custom CSS editor for some Rebuy features such as the Smart Cart, Smart Search, Smart Collections, Smart Flows, and Bundle Builder is different. Each one has its own CSS editor inside its own settings. Use the Widget-Specific CSS Guides table at the top of this article to open the correct guide.

These steps apply to widgets you create and manage in the Widgets list. Keep in mind that this box loads your CSS on every page where the widget renders, so scope each selector with the widget's ID to keep it from changing the rest of the page. Follow these steps:

If the widget's changes do not appear after saving, see the Testing Your CSS Changes section later in this guide.

Almost every CSS snippet in this guide needs your widget's ID number, and the Rebuy admin shows it in a few places.

In the widget editor. Open the widget you want to style and look at the top bar, which displays WIDGET ID: followed by the number. Click the copy icon next to it to copy the ID, which saves you from mistyping it.

(Screenshot example above: a widget editor top bar showing the widget ID)

In the Widgets list. Go to Cart & Merchandising > Widgets in the Rebuy admin. Every widget's ID appears in the ID column beside its name. If your list is long, type the widget's name into the search field to filter down to it.

(Screenshot example above: Widgets listed with the ID column)

Once you have the number, drop it straight into the selector. A widget with ID 300516 becomes:

To apply one CSS change to every widget on your store, add the CSS in your Rebuy Theme rather than in an individual widget, and target the .rebuy-widget class instead of a specific widget ID. Go to your Rebuy admin Settings page, click Themes, scroll to the Custom CSS box, add your CSS, and click Save.

Prefix the element you want to style with .rebuy-widget:

Every piece of CSS you write has the same two parts, a selector and one or more properties, so learning those two terms is enough to write and adapt your own CSS.

Selector. The selector is what you are styling. In #rebuy-widget-12345 .primary-title, the .primary-title class is the element being targeted and #rebuy-widget-12345 limits the change to that one widget. Replace 12345 with your own widget ID number.

Properties. Properties are the changes you are making, and they go inside the curly brackets that follow the selector. In #rebuy-widget-12345 { background: #ffffff; }, background is the property and #ffffff is its value, which sets that widget's background to white. Every property and value pair needs a semicolon after it.

For a wider range of unique CSS properties, explore further at:

Comments. Anything wrapped in /* and */ is a comment, which does not run as code. Comments label what a block of CSS does. Keeping the comments when you copy CSS from a Rebuy guide makes it far easier to revisit months later.

The !important flag. Adding !important before the semicolon forces your styling to apply even when your Shopify theme is trying to style the same element. It is not always necessary and meant to be used only when necessary.

Your browser's developer tools show you the exact class name of any element you want to style. Right-click the element on your live storefront, choose Inspect, and read the class name on the highlighted element in the panel that opens. Use that class name as your selector, scoped to your widget ID.

Rebuy publishes its developer documentation as machine-readable files built for AI assistants, which gives you a practical way to look up a widget's class names and draft CSS without reading every reference page yourself. This is a developer resource, so treat whatever an AI tool produces as your own code and test it before putting it on your live store. The full walkthrough lives in Rebuy's AI Integration Guide.

Rebuy offers two files, and which one you use depends on how much context your AI tool can hold at once. The table below compares them.

Because the documentation includes Rebuy's widget template markup, an AI assistant with that documentation loaded can tell you which class names a given widget type actually renders, which is a fast way to check a selector before you write CSS against it. Ask the assistant to quote the template markup rather than describe it, then confirm the class name yourself with Inspect on your live storefront before relying on it.

Always confirm your CSS on your storefront rather than in the widget editor's preview, because the two render in different environments and can look genuinely different. The sections below explain why that happens, how to check your CSS without showing work in progress to shoppers, and what to do when a change does not appear.

The widget editor's preview renders your widget inside the Rebuy admin, not on your storefront, so your Shopify theme's CSS is not loaded around it. On your real storefront both stylesheets are present at once, and they compete: where your theme targets the same element as your CSS, whichever selector is more specific wins. The preview has no theme styling to compete with, so it cannot show you the result of that competition.

That difference cuts in three directions:

Saving CSS to a widget that is already live puts that CSS on your storefront immediately, because widget CSS has no draft state. There are two ways to see your changes on a real page with your theme's CSS loaded, without shoppers seeing them:

While you are in preview mode, click Toggle Highlight in the Rebuy preview bar to put a colored border around every Rebuy element on the page. That is the quickest way to tell which elements Rebuy controls and which belong to your theme before you decide what to target.

For the full walkthrough of both methods, including Smart Cart and draft themes, see Using Rebuy preview mode.

When a change does not appear on your storefront, work through these checks in order:

When CSS looks correct but still does not apply, the style beating it usually comes from somewhere other than the widget you are working in. In your browser's developer tools Styles panel, every style targeting the selected element is listed top to bottom in winning order, and each one shows the stylesheet address it came from on its right. That address is what tells you where to go and fix it. The table below covers the four sources you will see on a Rebuy widget.

The first source is the one that surprises people most. Because every Rebuy CSS box loads page-wide, an unscoped selector sitting in one widget's box restyles every other Rebuy widget on the same page. If two of your widgets keep affecting each other, check both of their CSS boxes for selectors that are missing a #rebuy-widget- prefix.

Your theme reaches in the other direction as well. A Rebuy widget's title renders as a real heading element on your page, so styling your theme applies to every heading of that level also lands on the widget's title. That is the second reason to scope your CSS to a widget ID: it keeps your CSS off your theme, and it makes your CSS specific enough to win against your theme's.

If you need to change a widget's structure or content rather than its appearance, custom widget templates go further than CSS. See How To Create A Custom Template For A Rebuy Widget.

The most common reasons a CSS change does not show up are a missing widget ID, a missing semicolon, or your Shopify theme overriding your styling. Work through the checks in the Testing Your CSS Changes section above, and confirm you are looking at your live storefront rather than the widget editor's preview.

No, CSS added in a widget's Styles tab is not confined to that widget. The box controls which pages your CSS loads on, which is every page where that widget renders, but the CSS inside applies to the whole page just like any other stylesheet. Scope each selector with #rebuy-widget-XXXXX so it only changes that widget.

Yes, every snippet containing #rebuy-widget-XXXXX or #rebuy-widget-12345 needs XXXXX and 12345 replaced with your widget's actual ID number, or your CSS will not apply to anything. You can find the ID in the widget editor's top bar, or in the ID column of the Widgets list.

To style every widget at once, add your CSS to the Custom CSS box in your Rebuy Theme under Settings > Themes, and target .rebuy-widget instead of a specific widget ID. See the How to Add CSS to Every Widget at Once section above.

No, Post-Purchase and Checkout Extension widgets cannot be styled with custom CSS, because both run inside Shopify's sandboxed checkout environment, which does not allow custom CSS or JavaScript. Set their appearance through your Shopify Checkout branding settings instead, as described in the Which Rebuy Widgets Support Custom CSS section above.

No, you never need to add Rebuy widget CSS to your Shopify theme files, because Rebuy loads your custom CSS itself. Add it in your Rebuy Theme for store-wide styling, or in an individual widget's Styles tab for one widget.

Custom CSS added in Rebuy can affect the rest of the page, because Rebuy loads it as an ordinary stylesheet rather than confining it to the widget. It never edits your Shopify theme files, so nothing about your theme is permanently changed, but an unscoped selector such as h2 { } or .button { } restyles every matching element on the pages where your CSS loads. Scope every selector with #rebuy-widget-XXXXX for a single widget, or .rebuy-widget for all widgets, to prevent that.

To find any element's class name, right-click it on your live storefront, choose Inspect, and read the class name on the highlighted element in the developer tools panel. Use that class name as your selector, scoped to your widget ID.

Yes, you can target mobile screens only by wrapping your CSS in a media query such as @media only screen and (max-width: 480px), which applies your styling at or below the screen width you set and leaves desktop screens unaffected.

Yes, you can use an AI assistant for Rebuy CSS, and Rebuy publishes its developer documentation in machine-readable files built for exactly that. Point your tool at https://developers.rebuyengine.com/llms.txt for an index of the documentation, or https://developers.rebuyengine.com/llms-full.txt for the complete contents, then confirm any class name it gives you with Inspect on your live storefront. See the Using AI Tools with Rebuy's Developer Documentation section above.

Rebuy's support team can point you to the correct guides, but does not troubleshoot, write, or debug custom CSS, because custom code falls outside the standard Rebuy package. For custom styling work, see the Rebuy Partner Directory and Rebuy's support policy.