Customising the look: presets, colours, fonts, custom CSS
Per-offer design options, store-wide presets, and the CSS classes you can target.
Per offer (wizard step 3)
- Layout: Tiered cards, Horizontal, Simple table. Frequently bought together always uses the side-by-side layout.
- “Most popular” and “Best value” labels on chosen tiers.
- Compare-at (strikethrough) price on or off.
- Inherit theme colours (recommended) or an accent colour; corner radius 0 to 20 px.
- Widget title and position (below price or above the buy button; you can still drag the block in the editor).
Store-wide (Settings › General › Advanced)
- Style presets: Match theme, Minimal, Soft, Bold. They change borders, badges and tint at once.
- Accent colour override and font family override.
- Text direction: Auto (follows the storefront language), left-to-right, right-to-left.
- Custom CSS, up to 5,000 characters, injected on product pages and in the cart next to the widget.
Theme editor (block settings)
Layout override, size (compact / comfortable), margins and a second custom CSS box per block instance.
CSS classes
Everything starts with .bf-: .bf-widget, .bf-title, .bf-tier, .bf-tier.is-selected, .bf-badge, .bf-add (button), .bf-fbt-item, .bf-urgency, .bf-cart-bar, .bf-cart-track, .bf-card-badge. Sizes are in em, so changing font-size on .bf-widget scales the whole widget.
Common problems
The button colour does not match my theme.
The widget reads the theme's button variables (Dawn-style --color-button). On themes without them, set an accent colour in Settings or in the offer.
The widget looks tiny or huge.
The theme sets a different base font size. Use the Size setting in the block (compact/comfortable) or custom CSS: .bf-widget { font-size: 15px; }.
More in Storefront
- The cart upsell bar
- Badges on product cards in collections and search
- Languages, translations and right-to-left stores
- Widget not showing? Checklist
← All articles · Next: Languages, translations and right-to-left stores · Still stuck? Contact support