Appearance & Themes
Your theme is the design of your whole website: its pages, header, footer, colours and fonts. You can keep several themes, work on one privately, and publish it when it's ready.
Themes and the live site
The Appearance page lists your themes. One is live, which is what visitors see. Others are drafts you can edit without affecting the live site. This lets you redesign safely: duplicate the live theme, change the copy, preview it, and publish when you're happy.
| Action | What it does |
|---|---|
| Customize | Opens the active theme’s homepage in the page builder. |
| Edit | Opens a theme’s page list so you can pick any page to edit. |
| Preview | Opens the theme in a new tab exactly as visitors would see it, without publishing. |
| Publish | Makes this theme live. Your previous theme stays saved, and you can switch back at any time. |
| Duplicate | Copies a theme. Do this before a big redesign. |
| Delete | Removes a theme you no longer need. Publish another theme first if you’re removing the live one. |
Get a new theme
Click Add another theme. There are three ways to start:
Starter templates
Ready-made designs grouped by type — Online Store or Business Website — with categories under each, such as Fashion & Apparel, Electronics & Gadgets, Agency & Studio or Salon & Spa. The list opens on your own store's type; the other type is one click away.Theme marketplace
Themes made by designers in Joomni Studio, filtered by the same types and categories. Search by name, tag or builder. Install adds the theme and makes it live. On a business website, Online Store themes carry an Online Store only badge: you can preview them, but installing one means creating an online store — we set the theme up on it for you.New Theme Workspace
A blank theme you name yourself, for building from scratch.
Theme styles: colours and fonts
Set colours once and every page follows them. In the page builder, open Theme styles (it applies to every page), or go to Global Styles from Appearance.
| Group | Colours |
|---|---|
| Brand | Primary (buttons, links and anything clickable), Secondary and Accent. |
| Surfaces | Page background, card surface and text. |
| Detail | Muted text and borders. |
Short on time? Pick a preset: Midnight, Indigo, Forest, Ocean, Rose, Sand, Violet or Slate. For fonts, choose a heading font and a body font from the Sans, Serif, Display and Mono families. A live sample shows them as you choose.
Keep it simple
Header and footer
The header and footer are shared by every page. Edit them from any page in the builder: click the header or footer on the canvas. Their menus come from Navigation, so a menu change updates every page at once.
Custom code (Business)
On Business and above, the theme code editor lets you edit HTML, CSS and JavaScript directly, add custom code sections to any page, and ask the AI to generate or fix code for you. Open the Advanced Editor for a full-screen view. Use it carefully: custom code isn't checked the way built-in sections are.