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

# Template Structure

> File layout for Vite and Nunjucks Join Markt themes.

# Template Structure

## Vite theme (default)

Canonical starter: `templates/markt-vite-storefront/`<br />Full rules: `templates/TEMPLATE-STRUCTURE.md`

```text theme={null}
templates/<template-name>/
  index.html
  package.json
  vite.config.ts
  tailwind.config.ts
  public/
    pm/                 # payment icons
    hero-cutout.png     # transparent PNG
    placeholder.webp
  src/
    main.tsx
    App.tsx             # routes + navbar/footer
    index.css           # Tailwind + layout (no color tokens)
    theme/
      colors.css        # single token file
    pages/              # one file per route
      LandingPage.tsx
      ProductsPage.tsx
      ProductPage.tsx
      PrivacyPage.tsx
      TermsPage.tsx
      RefundsPage.tsx
    components/         # flat + ui/ only
    context/
      cart-context.tsx
    lib/
      storefront-api.ts
      formatter.ts
      use-mobile.ts
      utils.ts
```

### Required routes

| Path                             | Purpose        |
| -------------------------------- | -------------- |
| `/`                              | Homepage       |
| `/products`                      | Catalog        |
| `/product/:slug`                 | Product detail |
| `/privacy`, `/terms`, `/refunds` | Policies       |

### Hard rules

* `lib/` = those **four** files only (no duplicate API clients)
* `components/` flat except `components/ui/`
* Landing sections live **inside** `LandingPage.tsx`
* Colors only in `theme/colors.css`
* `npm run build` must pass before publish

### Scaffold

```bash theme={null}
cp -r templates/markt-vite-storefront templates/my-new-storefront
```

***

## Nunjucks theme

```text theme={null}
my-theme/
  layouts/base.njk
  templates/
    shop.njk              # or home — homepage
    products.njk
    product.njk
    privacy-policy.njk    # NOT privacy.njk
    terms.njk
    refund-policy.njk     # NOT refunds.njk
  snippets/
  components/           # markt_component targets
  macros/
  assets/
  settings.json
```

| File                           | URL                           |
| ------------------------------ | ----------------------------- |
| `templates/shop.njk` (or home) | `/`                           |
| `templates/products.njk`       | `/products`                   |
| `templates/product.njk`        | `/product/:slug`              |
| `templates/privacy-policy.njk` | `/privacy-policy`             |
| `templates/terms.njk`          | `/terms`, `/terms-of-service` |
| `templates/refund-policy.njk`  | `/refund-policy`              |

Policy body fields: `store.policies.privacy` / `terms` / `refund` (seller Configure). Full guide: [Policy & Legal Pages](/storefront/policy-pages).

Context + filters: [Nunjucks Theme API](/storefront/nunjucks).

***

## Dual engine

A store runs **one** engine: Vite **or** Nunjucks. Visual Builder targets Vite. ZIP/code import can use Nunjucks.

See [Build a Custom Theme](/storefront/custom-themes).