Nearly every visual property merchants ask about — corner rounding, colors, font sizes and weights, button width, badge styling, icon choice — is already a control under Settings → Widget customization. A saved setting also survives app updates in a way hand-written CSS overrides sometimes don't, so check the page before writing any custom CSS.

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. General customization holds shop-wide defaults rather than settings for one bundle type.

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 switches the bundle between a horizontal row layout and a stacked vertical one, and it applies to Volume discount widgets too.

There is no shop-wide default for it today — it is set bundle by bundle, in that preview panel.

Border radius is 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 is no way to round one of these independently of the others from this slider.

Color theme offers seven preset palettes, plus a Custom option that gives you three pickers: Text color, Accent color and 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 appears on the Volume discount tab only.

Title font size and color, and Description font size and color.

Background & border is an on/off toggle; when it's on you also get background color, border color and border radius.

On the Volume discount tab this section carries four extra blocks:

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, or Product name + variant + product type. Row titles are always built from real Shopify product data this way.

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 is either all variants in one selector, or Swatches with separate selectors; choosing swatches reveals Swatches template, set to Button or Select.

Price view sets how the bundle total is shown: Bundle price, % + price, % only, amount + price, or Don't show. Alongside it sit text alignment and font sizes and colors for both the price and the compare-at price, plus a dedicated discount color.

The Volume discount tab has its own separate product-price block with the same kind of controls.

Text color, background color and border radius.

Button width is Average or Full width.

Show button in widgets controls only the button the widget draws, never your theme's own Add to cart button. It is covered in full in "Widget placement," including exactly which pages it does and doesn't affect.

The button's wording is not set here — the Add to cart caption, like every other widget caption, is edited in Text settings.

Quantity badge — background, text color, radius. Free-price badge — background and text color.

Mix & Match / Product groups template is 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. The Timer element requires the bundle to have an end date set.

Customer reviews template is Stars only or Stars + count, with star color and count size and 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.

Product description shows the product's own Shopify description as an expandable block under the row. It works only when the widget is in list layout and stays hidden in grid and horizontal layouts. With it on you also get color and size controls for the Read more link.

Custom button adds a secondary per-product button with its own text, color and size, wired to a JavaScript event you choose. The event mechanics and the storefront global object it plugs into are covered in "Integrations, third-party apps and the developer surface."

Plus sign between products is on/off, with its own color and a separate Hide plus sign on mobile toggle.

Global display holds the Yes/No and Top/Bottom controls for widgets on product pages and bundle pages. These are covered fully in "Widget placement."

Display type sets several widgets at once to Slider/Carousel or In one column, with an 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 using the language selector at the top of the section.

The Product bundle and Volume discount tabs each 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 is capped at 50,000 characters. The AI Style Assistant has a daily usage quota, and any reference image you give it must be under 1 MB (PNG, JPG or WebP).

Widget customization carries an out-of-stock text color setting, which drives a --out-of-stock-color CSS custom property.

The setting that decides whether a widget is shown at all when something is sold out is a different control, and it is not here: it lives on the General settings page, App settings tab. If bundles are disappearing when an item runs out, that is the setting to change.

The widget's markup uses plain, hand-written class names rather than scoped or hashed ones, so these selectors are safe to target in Custom CSS and durable across app updates.

Several of those carry modifiers. A bundle takes .mbc-bundle-temp-grid, .mbc-bundle-temp-list, .mbc-bundle-temp-list-with-img or .mbc-bundle--volume-discount. The product row's full selector is .mbc-bundle__item.mbc-bundle__item--product, and the button's is .mbc-bundle__button.mbc-bundle__atc. Swatches sit in .mbc-bundle__swatches-list and take -type-button or -type-select. The checkbox has __label, __input and __fake children. The countdown title is .mbc-bundle-countdown__title. A tier card's clickable face is .mbc-bundle-vd__offer-inner, with modifiers --has-discount, --has-gifts and --has-badge.

The quantity stepper's buttons and input carry no classes of their own — target them as children of .mbc-bundle__qty-selector.

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".

Image size and zoom. There is 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, so in a narrow widget the image is genuinely oversized relative to its container. This is a known rough edge, not a hidden setting; Custom CSS is the only way to constrain it today.

Per-product custom labels. There is no free-text field to give an individual product a custom label in the widget — row titles always come from Title template. The closest available thing is the Product description toggle, which shows the product's own Shopify description and only works in list layout.