Adding custom CSS to the widget

Bundlex gives you a full visual editor for widget styling, but sometimes you need to reach a detail the editor does not expose, or override something your theme is forcing onto the widget. Custom CSS is the power-user escape hatch for exactly that. This article covers the two places you can add it and how to target the widget reliably.

Two places to add custom CSS

There are two separate Custom CSS fields, and they differ in scope.

The bundle's Custom CSS field

Each bundle has its own Custom CSS section, the last item in the bundle's Widget style settings. CSS you paste here travels with that one bundle, so it is the right choice when a tweak should apply only where that specific bundle is shown.

1. Open the bundle in the Bundlex dashboard.
2. Open the Widget style settings and expand the Custom CSS section at the bottom.
3. Paste your rules into the code editor. The field hints at the format with a placeholder: .bx-widget-container {margin-bottom: 10px;}.
4. Save the bundle.

The app embed Custom CSS field

The Bundlex app embed (the theme app extension you enable in the Shopify theme editor under App embeds) also has a Custom CSS field, located under its Advanced settings header. CSS here applies wherever the embed renders, so use it for theme-wide adjustments that should hold across every product page the widget appears on.

1. In Shopify admin, open your theme and click Customize.
2. Open App embeds and find the Bundlex embed.
3. Expand Advanced settings and paste your rules into the Custom CSS field.
4. Save the theme.

As a rule of thumb: reach for the bundle field for per-bundle tweaks, and the app embed field for changes you want everywhere the widget shows.

Targeting the widget

Every element Bundlex renders uses a bx- class prefix, following a BEM-style bx-block__element--modifier naming pattern. That makes the widget straightforward to target without touching your theme's own selectors.

Some of the most common targets:

• .bx-widget-wrapper - the outermost wrapper around everything Bundlex renders.
• .bx-widget-container - the main widget box that holds the offers and total.
• .bx-offer-card - a single offer tier, with .bx-offer-card--selected for the active one.
• .bx-offer-card__title and .bx-offer-card__description - the offer name and subtitle.
• .bx-price--original and .bx-price--discounted - the strikethrough and discounted prices.
• .bx-widget-total - the total price section, which includes .bx-total__savings.
• .bx-countdown-timer and .bx-sticky-atc - the countdown timer and sticky add-to-cart bar, when enabled.

To find the exact class for an element you want to change, open the widget on your live product page, right-click the element, and choose Inspect in your browser. Look for the nearest bx- class in the DOM and write your selector against it.

Overriding theme styles with !important

Themes often apply their own typography, spacing, and layout rules that bleed onto injected widgets. To make sure your overrides win, add !important to each declaration. For example, a common fix when the widget renders narrower than the surrounding content column is to force it to fill the available width:

.bx-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

If a rule does not seem to apply, it is almost always specificity: the theme's selector is more specific than yours. Adding !important resolves most of these cases. You can also make your selector more specific by chaining a parent, for example .bx-widget-container .bx-offer-card__title.

When to ask support for help

Both Custom CSS fields note that you can contact Bundlex support if you need help, and that offer is genuine. If you cannot work out the right selector, or a custom theme is fighting your overrides in a way !important does not solve, send support a link to the product page and a description of the change you want. They can hand you a tested selector to paste in.

The same goes for the embed's Selectors settings (for custom placement, the add-to-cart button, the product form, and the quantity or variant blocks). Those are CSS selectors too, and support can help you fill them in for custom themes that are not detected automatically.

Custom CSS changes how the widget looks, not how discounts are calculated. Pricing and tier matching are unaffected by anything you put in these fields.