Theme setup & styling

Placing the block

The Smart Bundle / TB Bundles embed can sit on product pages. Offers also target a single product, a collection, or all products, so you do not always place a per-page block.

Block settings

• Bundle — products are bound to their offers automatically when you save a bundle, so the block usually resolves the right offer on its own; you can also enter a bundle handle manually.
• Show bundle title / description — toggle the heading content.
• Button label — customize the add-to-cart text.
• Sticky price summary — keep the price and button pinned while scrolling (on by default).
• Custom colors — accent, text, border, and badge colors plus corner radius, or leave off to inherit a neutral style that adapts to most themes.

Layouts per bundle type

• Fixed sets — Included list, or Kit with options.
• Volume & BOGO — Stacked offers, Compact rows, or Side by side; multipacks also offer a Wholesale table.
• Mix & match — Fill the slots, or One group at a time.
• Build your own — Grid and summary, or Simple list.

Store-wide look settings (Settings → Bundle look) control colors, corner radius, typography, and badge position for every offer; individual offers can override them. “Match theme” is on by default, so the widget inherits a neutral style that adapts to your theme until you customize it.

Advanced styling

The widget exposes CSS custom properties you can override from your theme's custom CSS:

smart-bundle {
  --sb-accent: #008060;   /* buttons, selected states */
  --sb-text: #202223;     /* primary text */
  --sb-border: #e1e3e5;   /* card borders */
  --sb-badge-bg: #d4edda; /* savings badge background */
  --sb-badge-text: #155724;
  --sb-radius: 8px;       /* card corner radius */
  --sb-btn-radius: 999px; /* button corner radius */
}