---
title: "Step 1: Create the theme"
space: "Commera"
url: "https://docs.bwh.tech/commera/build-a-theme/create-the-theme"
updated: "2026-10-08"
---

In this step, you create the `acme_theme` app and the **Acme** theme record. At the end, Commera has made the empty theme folders in your app.

## What you'll build

- The `acme_theme` Frappe app, installed on your site
- The **Acme** Shop Theme record, with Shop Base Theme as its parent
- The empty `themes/acme/` and `public/themes/acme/` folders in your app

## 1. Create a Frappe app

1. Go to your bench directory.
2. Run `bench new-app`:

    ```bash
    bench new-app acme_theme
    ```

3. At **App Title**, type `Acme Theme`.
4. Answer the other prompts: description, publisher, email, license, the GitHub workflow and the branch name.
5. Install the app on your site:

    ```bash
    bench --site your.site install-app acme_theme
    ```

6. Open `acme_theme/hooks.py` and add Commera as a required app:

    ```python
    required_apps = ["commera"]
    ```

The title that you typed also becomes the app's module. With the title `Acme Theme`, the module is **Acme Theme**. You select this module on the theme record.

In this guide, file paths start at the app's repository root, `apps/acme_theme/`. For example, `acme_theme/hooks.py` is `apps/acme_theme/acme_theme/hooks.py`.

## 2. Create the Shop Theme record

1. In Desk, open the **Shop Theme** list at `/desk/shop-theme`.
2. Click **+ Add Shop Theme**.
3. Fill in the form:

    | Field | Value |
    | --- | --- |
    | Theme Name | `Acme` |
    | Module | `Acme Theme`. Change it from the default, `Shop Themes`. |
    | Is Standard | Ticked |
    | Parent Theme | `Shop Base Theme` |
    | Theme Settings | Leave it empty |
    | Config | Leave it empty |

4. Click **Save**.

<img src="/files/commera-create-theme-new-shop-theme-form-36e1a31e.png" alt="The new Shop Theme form with Theme Name, Module, Is Standard and Parent Theme filled in" width="720">

A theme name can have letters, digits, spaces, `-` and `_`. Commera makes the folder name from it: `Acme` becomes `acme`, and `Acme Catalog` becomes `acme_catalog`.

:::caution[Set Module before the first save]

Commera makes the theme folders once, on the first save, in the app that owns the selected **Module**. **Module** starts as `Shop Themes`, which is Commera's own module. If you keep it, the folders go into the Commera app, not yours, and your files do not ship with your app.

If you saved with the wrong module, clear **Is Standard**, save, and then delete the record. In developer mode, Commera deletes the folders and the record's JSON file of a theme that is not standard. Then create the record again with **Module** set.

If you delete a standard theme, Commera keeps its files. Find the theme's `<folder>.json` file and its `themes/<folder>/` and `public/themes/<folder>/` folders in the Commera app, and delete them yourself. If you keep the JSON file, the next `bench migrate` creates the theme again.

:::

:::caution[Tick Is Standard]

Commera writes the record to your app only when **Is Standard** is ticked. Without it, the theme exists only in this site's database, and `bench migrate` on another site cannot create it.

:::

After the save, the form shows the theme name as its title, and the **Theme Name** field is no longer on the form.

<img src="/files/commera-create-theme-acme-shop-theme-form-b4b6a39e.png" alt="The saved Acme record with Module, Parent Theme and Is Standard" width="720">

## 3. Look at the folders

The save made these folders, all empty, in your app:

```
acme_theme/
├── themes/acme/
│   ├── components/
│   │   ├── includes/
│   │   └── macros/
│   ├── pages/
│   └── styles/
├── public/themes/acme/
│   ├── images/
│   └── scripts/
└── acme_theme/shop_theme/acme/acme.json
```

<img src="/files/commera-create-theme-scaffolded-folders-b3951473.png" alt="The tree of the scaffolded folders" width="680">

| Folder | What goes in it |
| --- | --- |
| `acme_theme/themes/acme/components/` | The layout, includes and macros that pages use |
| `acme_theme/themes/acme/pages/` | One `.html` file for each page, and an optional `.py` controller |
| `acme_theme/themes/acme/styles/` | CSS sources for a Tailwind build. Acme does not use it. |
| `acme_theme/public/themes/acme/` | CSS, scripts, images and fonts that the browser loads |
| `acme_theme/acme_theme/shop_theme/acme/acme.json` | The theme record. `bench migrate` imports it on other sites. |

Git does not keep empty folders. That is not a problem: Commera needs only the folders that hold files.

## Next steps

- [Step 2: Add a layout](/commera/build-a-theme/add-a-layout)
- [Architecture](/commera/theme-reference/architecture): every folder and what it holds