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, available in the Style tab. 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 Style tab 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, visible when Show advanced settings is enabled. 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 Bundlex Bundles.
3. Enable Show 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

Bundlex markup uses bx- classes. These are useful targets in the current widget:

• .bx-widget-container - the widget container.
• .bx-widget - the widget content.
• .bx-offer-wrap - an offer wrapper.
• .bx-offer - the offer card inside that wrapper.
• .bx-active .bx-offer - the selected offer card; the active class is on its wrapper.
• .bx-offer-title and .bx-offer-subtitle - offer text.
• .bx-original-price and .bx-discounted-price - original and discounted price text.

Scope rules to the widget container. For example:

.bx-widget-container .bx-offer-title {
  font-weight: 700;
}

Inspect the element on your product page before styling it. Markup depends on the enabled features, and a selector copied from an older widget version may no longer match.

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-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 selector fields revealed by the embed's Show advanced settings option (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.