Most of what you want is a setting, not CSS
Before writing any custom CSS, check Settings → Widget customization. Nearly every visual property merchants ask about — corner rounding, colors, font sizes and weights, button width, badge styling, icon choice — is already exposed there as a control, and a saved setting survives app updates in a way that hand-written CSS overrides sometimes don't. Custom CSS exists for the remainder: fine positioning, spacing tweaks, and anything the settings genuinely don't cover (the limitations section at the end of this article lists those honestly).
The page has three tabs — Product bundle, Volume discount, and General customization. The first two share almost the same set of sections; Volume discount adds a few extra controls of its own, called out below.
Touring the controls
General
Border radius — a single 0–100 slider that drives corner rounding across the button, the widget container, product images, the variant select, badges, and swatches together. There's no way to round one of these independently of the others from this slider.
Color theme — seven preset palettes, plus a Custom option that gives you three pickers (Text color, Accent color, Secondary color). Choosing Custom fans those three colors out across roughly 17 individual widget elements at once, so it's a fast way to re-skin the whole widget without touching every field by hand.
Show radiobuttons — Volume discount tab only.
Widget
Title font size and color, Description font size and color.
Background & border — an on/off toggle, plus background color, border color, and border radius when it's on.
On the Volume discount tab, this section also has:
Options — radius, background, and border, set separately for the selected and unselected tier cards.
Label — radius, background, font size, color, and a position choice of inside or outside the tier card.
Badge — background, font color, and size.
Description — size, color, and position.
Product
Title font size, color, and weight (100–900).
Title template — controls what the row title actually says: Product name only / Product name + variant name / Product name + product type / Product name + variant + product type.
Enable link to product — makes the row title a link.
Image border radius, and Image type — Product image or Variant image.
Variant selection font size, color, and radius.
Variant display — All variants in one selector, or Swatches with separate selectors. Choosing swatches reveals Swatches template: Button or Select.
Price
Price view for the bundle total — Bundle price / % + price / % only / amount + price / Don't show — plus text alignment and font sizes/colors for both the price and the compare-at price.
The Volume discount tab has its own separate product-price block with the same kind of controls.
A dedicated discount color.
Add to cart button
Text color, background color, border radius.
Button width — Average or Full width.
Show button in widgets — this is covered in full in "Widget placement," including exactly which page it does and doesn't affect; it isn't re-explained here.
Badges & Icons
Quantity badge — background, text color, radius.
Free-price badge — background, text color.
Mix & Match / Product groups template — Selector, Modal, or List. Choosing Modal also lets you pick the icon (Box, Burger, or a custom SVG) and its background color.
Timer title color and countdown color.
Customer reviews template — Stars only or Stars + count, with star color and count size/color. This element only renders once you've connected one of the supported review apps — see "Integrations, third-party apps and the developer surface" for the list.
Other elements
Product description — a toggle that shows the product's own Shopify description as an expandable block under the row. This works only when the widget is in list layout; it stays hidden in grid/horizontal layouts. When it's on, you also get color and size controls for the Read more link.
Custom button — a secondary per-product button with its own text, color, and size, wired to a JavaScript event you choose. The event-hook mechanics and the storefront global object it plugs into are covered in "Integrations, third-party apps and the developer surface."
Plus sign between products — on/off, its color, and a separate Hide plus sign on mobile toggle.
General customization (shop-wide)
This tab sets defaults that apply across your storefront rather than to one bundle type:
Global display — the Yes/No and Top/Bottom controls for widgets on product pages and bundle pages. These are fully covered in "Widget placement" and aren't repeated here.
Display type for several widgets at once — Slider/Carousel or In one column — plus arrow color for the slider.
Widget footer message sizes and colors, a footer note field, and Hide footer in widgets on bundle pages.
Text settings and Screen reader text, both set per language.
Custom code
Both the Product bundle and Volume discount tabs end in a Custom code section with three tools: an AI Style Assistant that drafts CSS from a plain-text description of what you want, a Custom CSS editor, and a Custom JS editor. Each editor has a 50,000-character limit. For the developer-facing details — the storefront global object, the custom button's event system, and the manual placement snippet — see "Integrations, third-party apps and the developer surface."
Layout: horizontal vs. vertical
This is the setting merchants have the hardest time finding, because it isn't on the Widget customization page at all — it's set per bundle, inside the bundle editor's live preview panel.
Open a bundle and look at the preview panel: alongside a Product images checkbox, there's a two-button icon toggle with tooltips reading "Horizontal layout" and "Vertical layout". That toggle is what switches the bundle between a horizontal row layout and a stacked vertical one, and it applies to Volume discount widgets too, not just standard bundles.
There is no shop-wide default for this layout switch today — it's set bundle by bundle, in that preview panel, not on the Widget customization page.
CSS selectors you can target
The widget's markup uses plain, hand-written class names rather than scoped or hashed ones (no auto-generated hashes appended), so these selectors are safe to target in Custom CSS and durable across app updates.
Element | Selector |
Widget root |
|
One bundle |
|
Widget title |
|
Product row |
|
Product title |
|
Variant dropdown |
|
Swatches |
|
Checkbox |
|
Quantity stepper |
|
Add to cart button |
|
Countdown |
|
Bundle total price |
|
Row price |
|
Volume discount tier card |
|
Out-of-stock states are targetable too
When a row is unavailable, its price is swapped out for .mbc-bundle__item-out-of-stock. When an entire bundle has no purchasable combination left, the widget disables its Add to cart button and marks the bundle with data-type="outOfStock". There's also a built-in out-of-stock text color setting, which drives a --out-of-stock-color CSS custom property — so before writing a CSS override for this state, check whether that setting already does what you need.
What styling can't do today
A few things merchants regularly ask for aren't tunable from any setting, and Custom CSS is the only lever — worth knowing up front so you don't spend time hunting for a setting that isn't there:
Image size and zoom. There's no setting for image size, aspect ratio, or click-to-enlarge. The product row always requests a 1000px-wide image from Shopify's CDN, regardless of how large the widget actually renders on the page — so in a narrow widget, the image is genuinely oversized relative to its container. This is a known rough edge, not a hidden setting; if you need a smaller image, Custom CSS is the only way to constrain it today.
Per-product custom labels. Row titles are always built from real Shopify product data through Title template — there's no free-text field to give an individual product a custom label in the widget. The closest available thing is the Product description toggle, which shows the product's own Shopify description as an expandable block, and only works in list layout.