Choosing a Theme¶
Admin → Shop Settings → Theme is where a site admin picks the look of the storefront. (Platform staff can also set a site's theme under System → Tenants → {site} → Theme.)
Changing the theme takes effect for every visitor immediately. There is no draft or preview mode, so the page asks you to confirm before it saves.
The page¶
| Section | What it shows |
|---|---|
| Your storefront theme | The live theme: thumbnail, name, a one-line description and a Best for line. |
| Modern themes | The current designs, all layered on Nova: Nova, Brock, Depot, Pop, Atelier and Spec. Shown as large cards with a description and a Best for line. |
| Bespoke themes | Themes built for one kind of shop and not based on Nova (for example Hardware). Only shown when the platform has any. |
| Classic Bootswatch skins | The legacy Bootstrap 4 layout in 23 colour schemes. Collapsed by default, and opened automatically when one of them is live. |
| Navigation Style | Header and footer options for the live theme. |
To change theme, tick a card (its border turns green and it is marked Selected), then press Change Theme. A dialog confirms that the change goes live now; Change theme now saves it. The button stays disabled while the live theme is the one selected.
The page works without JavaScript (the radios and the button still submit the form, the confirmation dialog is skipped) and every card can be reached and chosen with the keyboard: Tab to the group, arrow keys to move, Space to select.
Things worth knowing¶
- Modern themes change layout, classic skins only change colour. All 23 classic skins share one page layout and differ in colour and typography. Modern themes each redesign the collection, product and search pages.
- Your brand settings carry across the modern themes (brand colour, font, corner radius, image shape).
- A missing thumbnail shows a plain tile with the theme's initial. It never shows a broken image.
- If the live theme has been removed from the platform's theme list, the page says so and shows the copy the site holds. The storefront keeps working; pick any listed theme to move off it.
- A preview without saving is not available. The storefront resolves its theme from the site record for the whole request (templates, CSS, emails and cached fragments), so previewing a theme safely would need a per-request site override that cannot leak between tenants or into the shared cache. That is not done, so switch and switch back if you want to compare.
Navigation Style¶
These options are stored on the site and read by the theme's templates. Not every theme reads every option, so the page shows only the ones your live theme uses and says which theme it is talking about. Options a theme ignores keep their stored value, so switching back to a theme that uses them restores your earlier choice.
| Option | Bootstrap / Bootswatch | Nova | Brock, Depot, Pop, Atelier, Spec | Hardware |
|---|---|---|---|---|
| Fixed or static header | ✓ | ✓ | ||
| Light / primary / dark header | ✓ | ✓ | ||
| Header border size | ✓ | |||
| Hide site name with logo | ✓ | ✓ | ✓ | |
| Sticky footer | ✓ | ✓ | ✓ | ✓ |
A theme the platform does not know about (a tenant-authored one) is assumed to honour everything, so all options are shown.
For platform operators: theme records¶
Themes are themeContext documents (ThemeContext). Besides the template and asset paths, three optional fields drive this page:
| Field | Meaning | Default when absent |
|---|---|---|
family |
MODERN, BESPOKE or CLASSIC |
Derived: templatePath bootstrap is classic; nova or based on nova is modern; anything else is bespoke |
sortOrder |
Position within the family, lowest first | Nova 10, Brock 20, Depot 30, Pop 40, Atelier 50, Spec 60, Hardware 100, Bootstrap 200, all others 1000 (ties alphabetical) |
The description and Best for text are messages, so they can be reworded or translated like any other platform text:
admin.theme.<lower-cased theme name>.description=...
admin.theme.<lower-cased theme name>.bestFor=...
A theme with no messages simply shows its name and thumbnail. Avoid apostrophes and curly braces in these messages, because they pass through MessageFormat.
System update 91.json (BackfillThemeSelectorFields) writes family and sortOrder onto existing records. It only fills fields that are missing, so it is safe to re-run and never overwrites a hand-set value. initialisation/templates.json carries the same values for new installs.
Adding a theme: add its themeContext record (an InsertIfAbsent system update, as for Atelier and Spec), add the two messages, and drop <lower-cased name>.png into web-mvc/.../themes/admin/images/themeThumbnail/. It appears in the right family with no template change.