The Theme Hub: Browse, Apply & Fine-Tune
Browse theme packs, preview one against your current storefront, apply it store-wide, and fine-tune individual colour tokens.
A theme pack is a complete visual language for your store — colours, depth, borders, and typography feel, all defined together. Applying one changes your entire storefront at once; you don't set it page by page.
Screen: Online Store → Store Editor → Settings → Theme. The Theme hub has five tabs: Browse, Featured, Custom, Fine-tune, and Identities.
Browse tab
The Browse tab shows every available theme pack as a grid of cards.
- Search by theme name using the search box.
- Filter using the chip filters — All, Light, Dark, Structural, Palette only — or by theme family (Surface/Depth, Anti-Aesthetic, Retro/Futurist, Atmospheric).
- Click any card to open a preview on the right, rendering a mini-storefront in that theme.
Featured tab
Curated picks — seasonal themes, trending looks, and editor's choices. Browse and apply them the same way as the Browse tab.
Custom tab
Any custom themes your store has saved — either created through the Fine-tune panel or by your brand team — appear here.
Applied badge and Compare mode
The theme currently active on your store shows an Applied badge on its card. Hover over a different theme card to reveal a compare option, which opens a side-by-side preview of your current theme against the one you're considering.
Applying a theme
Preview the theme
Click a theme card to open its preview panel on the right.
Press Apply Theme
A confirmation dialog shows the theme name and its colour swatches.
Confirm
Press Apply Theme again to confirm. The change takes effect on your live storefront immediately — there's no separate publish step for a theme change.
My theme applied but the page still looks the same
Do a hard refresh in your browser (Shift + reload, or Ctrl+Shift+R / Cmd+Shift+R). BillionBiz stores use content-hashed bundles, so a hard refresh loads the new CSS.
Product listings and product pages follow the applied theme
After you explicitly apply a theme preset in the current Store Editor, your product listing and individual product pages inherit the preset's heading and body fonts, primary colours, and button corner radius. Their selected page layouts remain in place; the applied theme changes the shared visual treatment around those layouts.
Apply a preset
Go to Online Store → Store Editor → Settings → Theme. Choose a preset from Browse or Featured, select Apply Theme, and confirm the action.
Fine-tune if needed
Open Fine-tune, adjust the colours, heading or body fonts, or radius preset, and select Save theme. Fine-tune changes are not persisted until that save completes.
Check both commerce pages
Open a product listing and an individual product page in a fresh storefront view. Confirm their fonts, primary-colour actions, and button corners follow the saved theme, then refresh once if an older view was already open.
Stores that have never explicitly applied a preset keep their existing product-listing and product-page styling. Browsing or previewing a theme alone does not opt those pages into a new visual treatment.
My product page still shows the old font
First return to Settings → Theme and confirm the preset is marked Applied. If you changed a font in Fine-tune, select Save theme before leaving. Then open the product page in a fresh tab or hard-refresh it; if the old font remains, confirm the heading or body font you expected was actually changed in the saved theme.
Fine-tune
The Fine-tune sub-tab lets you adjust individual colour tokens — primary colour, background colour, accent colour — on top of whichever theme pack is currently applied. It also has separate Heading font and Body font pickers. Fine-tune changes layer on top of the theme; they don't modify the underlying theme pack itself, and you can save the result as a custom theme that then appears in the Custom tab.
Changing only the heading font leaves your body font untouched
Picking a font in Heading font and selecting Save theme saves only that heading change — your body font stays exactly as it was, even if the panel's own display briefly shows both fields loaded together. The same is true in reverse: changing only Body font and saving never touches the heading font. Changing a colour token and saving doesn't touch either font. To change both fonts in one save, set both fields before you click Save theme; applying a theme preset, or using Reset, still sets both fonts together as before.
A heading font's fallback now matches its own style family
If a heading font hasn't loaded yet (slow connection, or before the browser finishes fetching it), the storefront shows a fallback font while it waits. That fallback now matches the heading font's own category — a serif heading font (e.g. Playfair Display, DM Serif Display, Merriweather) falls back to a serif system font, and a sans/display heading font (e.g. Space Grotesk, Bricolage Grotesque) falls back to a sans system font — instead of always falling back to the same generic sans font regardless of what you picked. Your body font's fallback is unaffected and keeps its own existing behaviour.
Identities
The Identities sub-tab applies a complete design direction to your entire storefront — landing page, product listing, checkout, and all 19 page types — in a single click, instead of picking a template per page. Identities are grouped by the plan tier they require: Max Plan, Growth Plan, and Starter.
Browse and preview
Click any Identity card to load it into the live preview panel on the right, rendered as an iframe of your actual storefront.
Press Apply Identity
Available Identities show an Apply Identity button; the Identity currently active on your store shows an Applied badge instead.
Plan gating
If your plan doesn't include the Identity's tier, applying it fails with an upgrade message instead of an error — you'll need to upgrade your plan before that Identity can be applied.
Custom CSS field differs by admin skin
A separate Custom CSS field lives under Online Store → Theme → Advanced → Custom code. On the classic admin skin it's a "Coming soon" placeholder — there's no field to type into yet. On the newer editorial admin skin, a textarea lets you draft and preview CSS locally, but the Save button is disabled and labelled "Coming soon" — there's no backend endpoint yet for storefront-wide Custom CSS on either skin, so nothing you type is kept once you leave the page. Don't rely on Custom CSS on either skin to hold a customisation you need to keep; use the Theme Hub's colour tokens and starter presets instead.
Head scripts and Body scripts are coming soon
Two more fields sit in the same Online Store → Theme → Advanced → Custom code group as Custom CSS:
Head scripts (for tags inside the storefront <head> — analytics, fonts, meta tags) and
Body scripts (for scripts injected before </body> — chat widgets, tracking pixels). Both are
placeholders today on every admin skin; neither accepts input yet.
Theme families and what they change
Theme packs group into five families, each defining a different structural and visual language — not just a different colour:
| Family | Characteristics | Examples |
|---|---|---|
| Surface / Depth | Layered cards, subtle shadows, clean depth cues | Abyssal, Ceramic, Concrete, Claymorphism |
| Anti-Aesthetic | Bold borders, raw type, high-contrast, intentionally unpolished | Neubrutalism, Brutalist |
| Retro / Futurist | Neon gradients, nostalgic palettes, retrofuture colours | Vaporwave, Y2K, Retro Futurism |
| Atmospheric | Soft glows, aurora gradients, ethereal overlays | Aurora UI, Glassmorphism |
| Palette only | Colour palette change only, no structural effect | Various palette packs |
For example, Glassmorphism gives your product cards frosted-glass panels with soft blur behind them, while Neubrutalism gives the same cards bold black borders and stark contrast — the theme changes the card structure, not just its colour.
Store-wide, not per-page
Applying a theme — whether from the Theme Hub or from the built-in theme packs shown in the Theme section inside any individual page editor — changes your entire storefront at once. To use a different layout for just one page (without changing your overall theme), use that page's own template picker — see Page-Layout Pickers.
Exception: if you click one of your own saved custom theme packs from inside a page's Theme section (instead of one of the built-in packs), it applies to that page only, and only once you press Save Draft or Publish there — see Custom brand-kit themes in the Theme tab.