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 → Theme → Themes. The Themes tab has five sub-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.
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. 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.
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 Themes tab 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.