# First steps

From zero to the new storefront live, in ten minutes. This guide follows the
shortest path (all in the dashboard) and shows where the tool and the AI come
in, so you can pick later.

## What you need

- A store on Hystore whose plan includes the **Code theme** module. Check it in
  Settings > Modules: it must be on.
- A role with the permissions of the *Code theme* group (the store owner has
  all of them). See [Permissions](/en/code-theme/#permissions).
- To connect an AI straight to the store: the **Connect your AI** option inside
  the module, in the plan.

## 1. Pick a theme to start

1. Open the dashboard at [app.hystore.com.br](https://app.hystore.com.br).
2. Go to **Customization > Code theme**.
3. Pick one of the four ready themes: **Base**, **Aurora**, **Celeste** or
   **Prisma**. It becomes your draft, with every page, light and dark, and
   your store's colours.

> [!NOTE]
> Starting from a ready theme changes nothing on the store. The store only
> changes its look when you publish and choose *Use the theme in the store*.

## 2. Make your first change

1. Click **Open the editor**. Files are on the left and the preview on the
   right.
2. Open `locales/en.json`. It keeps the theme's texts in English.
3. Change a text, for example the title at the top of the home page, and press
   **Ctrl+S**. The preview reloads with the new text.

A text in the theme looks like this:

```liquid sections/hero.liquid
<h1>{{ 'home.hero_title' | t }}</h1>
```

And the value lives in the language file:

```json locales/en.json
{
  "home": {
    "hero_title": "The best survival server in the world"
  }
}
```

> [!TIP]
> Change `locales/pt.json` and `locales/es.json` too: visitors in Portuguese or
> Spanish see the text of their language. When one is missing, Portuguese
> shows.

## 3. Change colours and sections without code

1. Go back to Code theme and open **Customize theme**.
2. In **Theme settings**, change the colours, texts and images the theme
   offers.
3. In **Sections of the page**, pick a page and move sections up and down, hide them
   or add new ones.
4. Click **Save**. Everything goes to the draft.

## 4. See the preview on the store's address

The editor's preview is the store itself, with the draft. To send it to
someone, use the preview link: it opens the draft on the store's real address
for 24 hours, with a band saying it is a preview. The live store stays the
same.

## 5. Publish

1. In Code theme, look at the list of changes and the errors (a theme with an
   error does not publish).
2. Click **Publish now**. This creates version 1 of your theme.

## 6. Turn the theme on in the store

1. In Code theme > **In the store**, click **Use the theme in the store**.
2. Open your store: the storefront is now your theme.

While the code theme is live, the drag-and-drop builder is turned off. To go
back, pick a ready layout again: the theme leaves the store without being
deleted.

## Next steps

- **Ask an AI to make the changes**: connect Claude, Cursor or another app in
  [Connect your AI](/en/code-theme/mcp/). You describe what you want and
  approve the publish.
- **Edit on your computer**: the [hystore tool](/en/code-theme/cli/)
  downloads the theme, follows every save in the preview and works with git.
- **Learn the format**: the [theme guide](/en/code-theme/guide/) explains
  files, sections, data and filters, and the [ready examples](/en/code-theme/examples/)
  give you code to copy.