> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sellauth.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme Quickstart

> Create a theme, pull it locally, edit it with live preview, and apply it to your shop.

## Overview

This walkthrough takes you from nothing to a live, edited theme. It uses the [Theme CLI](/developers/theme-cli), which is the recommended way to develop themes.

You need Node.js 18 or newer and a SellAuth API key.

<Steps>
  <Step title="Install the CLI">
    ```bash theme={null}
    npm install -g sellauth-theme-cli
    ```

    The installed binary is called `sellauth-theme`.
  </Step>

  <Step title="Log in">
    ```bash theme={null}
    sellauth-theme login
    ```

    Paste your API key when prompted.

    <Note>
      Your API key is available at **Dashboard > Account > [API Access](https://dash.sellauth.com/api)**. If you don't see an API key, click **Regenerate**. Your Shop ID is shown on the same page.
    </Note>
  </Step>

  <Step title="Create a theme">
    Themes are created on SellAuth, from an official theme as the starting point:

    ```bash theme={null}
    sellauth-theme create --name "My Theme" --template canvas
    ```

    The command prints the new Theme ID. If your account has more than one shop, add `--shop <shopId>`.
  </Step>

  <Step title="Pull it locally">
    ```bash theme={null}
    sellauth-theme pull --theme <themeId>
    ```

    Files land in `./themes/<themeId>`. Open that folder in your editor. Start with `templates/shop.njk` and `components/hero.njk` to see how a page is put together.
  </Step>

  <Step title="Start watch mode">
    ```bash theme={null}
    sellauth-theme watch --theme <themeId>
    ```

    This prints a preview URL, watches your files, pushes every change, rebuilds Tailwind, and reloads the preview. Keep it running while you work.
  </Step>

  <Step title="Make an edit">
    Open `components/hero.njk` and change some markup, then save. The preview reloads with your change.

    To add a new configurable setting instead, add it to `schema.json` and read it in the component:

    ```njk theme={null}
    {{ properties.my_setting if properties.my_setting else 'Fallback' }}
    ```

    See [Settings and Schema](/developers/theme-settings) for the property types you can use.
  </Step>

  <Step title="Apply it to your shop">
    When you are happy with the result, make the theme live:

    ```bash theme={null}
    sellauth-theme apply --theme <themeId>
    ```
  </Step>
</Steps>

## Recommended workflow

<Warning>
  `push` and `watch` are a two-way sync. Files that exist on SellAuth but not in your local folder are **deleted** on SellAuth. Always `pull` before you start working on a machine that may be out of date.
</Warning>

<Tip>
  Keep the theme folder in git. It is the only reliable undo, and it makes it obvious what a theme update overwrote.
</Tip>

A `.gitignore` worth starting from:

```txt theme={null}
themes/*/assets/built.css
```

`built.css` is generated from `style.css` on every build, so tracking it only produces noisy diffs.

## Where to go next

<CardGroup cols={2}>
  <Card title="Theme Structure" icon="folder-tree" href="/developers/theme-structure">
    What each folder does and which template maps to which URL.
  </Card>

  <Card title="Nunjucks Templating" icon="code" href="/developers/nunjucks">
    The template language, tags, and the scope rules that trip people up.
  </Card>

  <Card title="Template Variables" icon="table-list" href="/developers/theme-variables">
    What data each page gives you.
  </Card>

  <Card title="Assets and Styling" icon="paintbrush" href="/developers/theme-assets">
    Tailwind, design tokens, and upgrade-safe custom CSS.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.