Adding custom CSS to the widget

Bundlex Bundles 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 Bundles dashboard.
2. Open the Style tab and expand Custom CSS in the Advanced section, the last section of the tab.
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 Bundles 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 Online Store and click Edit theme.
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 Bundles 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

Use the built-in controls first. For widget width, try Style > Widget style > Container > Max width > Full width (100%). If a theme rule still overrides the result, inspect the affected element and use !important only on the declarations that need it. For example:

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

This example fills the available parent container; it cannot make a narrow theme column wider. If a rule has no effect, check that the selector matches a rendered element, the stylesheet is loaded and the declaration is valid. Then inspect which competing rule wins. A more specific selector can be enough without !important.

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.

CSS does not change the discount rules, but it can hide prices, choices or buttons and prevent shoppers from using the widget. Test all offer states, variant choices and Add to cart on desktop and mobile after applying a rule.