Styling the Bundle Widget Block (Colors, Corners & Layout)

The Bundle Widget theme block comes with built-in styling settings, so you can match your store's look without writing any CSS. These settings live in the Shopify theme editor and apply to the block on that page.

Where to find the settings

  1. In your Shopify admin go to Online Store → Themes → Customize.
  2. Open the page that contains your bundle and click the Bundle Widget block (listed under Bundable).
  3. The styling settings appear in the right-hand panel. Changes preview live and are saved with your theme.

Color mode

This setting decides where the widget's colors come from when you haven't picked them yourself:

  • Match my theme — Bundable reads your theme's text color, background color and primary button style (color, label color, corner radius, and whether button text is uppercase or letter-spaced) and uses them automatically. It works with any theme that styles its buttons. If your theme uses outline-style buttons, the widget falls back to a clean monochrome look based on your text and background colors.
  • Bundable classic — the original green-button look.
  • Store default — the default value. It behaves as Match my theme for stores that installed Bundable on or after September 13, 2026, and as Bundable classic for stores installed before then. If you installed earlier and want automatic matching, simply choose Match my theme.

Color pickers

Each picker overrides the color mode for one part of the widget. Leave a picker empty to keep inheriting.

  • Button — the Add to Bundle, View Options and Add to Cart buttons, plus accents such as the active step and progress bar. The hover shade is derived automatically.
  • Button text — leave empty and Bundable picks black or white for readability.
  • Text, Background and Borders — the main text, card and summary backgrounds, and card outlines. When you set both Text and Background, muted text and secondary backgrounds are derived automatically.

Corners

Automatic follows your theme (or the classic 8px rounding). Square, Rounded and Pill buttons set the corner radius of buttons and cards directly.

Layout

  • Break out to full page width — on by default, the widget spans the full page width regardless of the section's margins. Turn it off to keep the widget inside the section's own margins.
  • Maximum content width — the widest the product grid and summary will grow when full width is on (1200px by default).

What happens automatically

  • Fonts follow your theme's body and heading fonts. There is no font setting because none is needed.
  • Popups and notifications (the variant picker, the notes popup and the "added to bundle" toast) use the same colors as the widget.
  • The loading spinner shown before the widget appears uses your Button color, or your theme's text color if none is set.
  • The bundle summary stays pinned on screen while customers scroll on desktop. This is always on for the theme block; the "Sticky summary sidebar" toggle in the Bundable admin only affects the classic bundle page.

How block settings work with Custom CSS

If you have custom CSS for the widget (added by you, by our team, or by the Generate from theme button on the Template page), it keeps working. The order of precedence, from strongest to weakest, is:

  1. Colors and corners picked in the block settings
  2. Custom CSS
  3. Match my theme (automatic)
  4. Bundable's defaults

So a color you pick in the theme editor wins over custom CSS for that element, unless the CSS uses !important. Clear the picker to hand control back to the CSS. Note that the Template page stylesheet applies to the classic bundle page; CSS for the theme block goes in your theme's own stylesheet and can target the widget's bdlr__ classes.

Good to know

  • Settings are saved per block. If you have the widget on several pages, set the colors on each block.
  • Settings are saved with your theme. If you switch themes, re-apply them after adding the block to the new theme.
  • The product grid columns, items per page and button labels are managed in the Bundable admin (the bundle's Display and Bundle page sections, and the Translations page), not in the theme editor.
  • In the theme editor the widget reloads after each setting change. If you have just added the block to a page and it stays on "Loading bundle…", refresh the editor preview once.

Need a hand matching a specific design? Contact us at support@soviapps.com with your store URL and a screenshot of what you're after.

Still need help? Contact Us Contact Us