> ## 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.

# Vite Storefront

> Default production theme runtime and checkout wiring.

# Vite Storefront

**Vite theme design + runtime** (React + Tailwind + TypeScript).

Dedicated design hub: [Vite Design](/storefront/vite-design).

Nunjucks users: [Nunjucks Design](/storefront/nunjucks-design).

***

## Scaffold

```bash theme={null}
cp -r templates/markt-vite-storefront templates/my-theme
cd templates/my-theme
npm install
npm run dev
```

***

## Design map

| Layer          | Where                       |
| -------------- | --------------------------- |
| Routes / shell | `App.tsx`                   |
| Pages          | `src/pages/*.tsx`           |
| Tokens         | `src/theme/colors.css`      |
| Data           | `src/lib/storefront-api.ts` |

### Required routes

`/`, `/products`, `/product/:slug`, `/privacy`, `/terms`, `/refunds`

### Rules

* Tokens only in `colors.css`
* On-hold via `isStoreProductOnHold`
* Policies via `LegalPolicyPage` — [Policy Pages](/storefront/policy-pages)
* Platform checkout only

```tsx theme={null}
import { LegalPolicyPage } from '@/components/legal-policy-page'

export const PrivacyPage = () => (
  <LegalPolicyPage
    title="Privacy Policy"
    policyKey="privacyPolicy"
    emptyMessage="No privacy policy has been added yet."
  />
)
```

***

## See also

* [Vite Design](/storefront/vite-design)
* [Template Structure](/storefront/template-structure)
* [Products & Catalog](/storefront/products)