Customising the look: presets, colours, fonts, custom CSS

Per-offer design options, store-wide presets, and the CSS classes you can target.

5 min read

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 or shape does not match my theme.

The widget reads the primary button colour, text colour, corner radius, border and font of Dawn-family and Horizon-family themes (Dawn, Sense, Craft, Horizon, Tinker, Ritual and the other Shopify themes). A third-party theme that exposes none of those variables gets a near-black button: set an accent colour in Settings › Widget or in the offer, and the text turns black or white automatically.

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

← All articles · Next: Languages, translations and right-to-left stores · Still stuck? Contact support