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

# Theme structure

> What each file in a React, Liquid, or Vite theme folder holds.

These are the files in the [Glitch, Noir, and Orbit trees](https://docs.joinmarkt.com/themes/custom-theme.md). JSON is what Visual edits. Section code is what Code edits. `src/platform/` is not in the folder.

```txt theme={null}
theme.json
index.html
tailwind.config.ts
LICENSE
config/
  settings_schema.json
  settings_data.json
groups/
  header.json
  footer.json
templates/
  index.json
  product.json
  products.json
  group.json
  cart.json
  reviews.json
  support.json
  policy.json
  404.json
public/pm/                       Payment SVGs, same nine names in each kit
snippets/                        Liquid kits (Noir)
src/theme.tsx                    React kits (Glitch)
src/styles/theme.css             React kits (Glitch)
src/theme.css                    Liquid and Vite (Noir, Orbit)
src/theme.ts                     Liquid and Vite (Noir, Orbit)
src/components/                  React kits (Glitch)
src/lib/                         Liquid and Vite
src/sections/<type>/schema.json
src/sections/<type>/index.tsx    React
src/sections/<type>/index.liquid Liquid
src/sections/<type>/script.ts    Liquid, optional
src/sections/<type>/index.ts     Vite
```

## theme.json

Glitch:

```json theme.json theme={null}
{
  "engine": "join-markt/v2",
  "id": "glitch",
  "name": "Glitch",
  "version": "1.0.0",
  "author": "Join Markt",
  "description": "Dark cyberpunk storefront: acid-lime and hot-magenta signal colours, monospace display type, scanlines, RGB-split glitch headings, terminal product cards and a live ticker.",
  "runtime": "react"
}
```

Noir sets `"runtime": "liquid"`. Orbit sets `"runtime": "vite"`. Glitch, Noir, and Orbit use version `1.0.0`.

**engine** `string` *required*

`join-markt/v2`.

**id** `string` *required*

Lowercase letters, digits, and dashes. For a catalog folder this matches the folder name (`glitch`, `noir`, `orbit`).

**name** `string` *required*

Name shown for the theme.

**version** `string` *required*

`1.0.0` on Glitch, Noir, and Orbit.

**author** `string`

Optional. `Join Markt` on the kits.

**description** `string`

Optional.

**runtime** `'react' | 'liquid' | 'vite'`

Optional. Omitted means React. See [Runtimes](https://docs.joinmarkt.com/themes/runtimes.md).

## index.html

The document shell. Glitch, Noir, and Orbit each include:

```html theme={null}
<script type="module" src="/src/platform/entry.tsx"></script>
```

The body has `<div id="root"></div>`. The kits also set charset, viewport, `color-scheme`, `theme-color`, and a font preconnect. `src/platform/entry.tsx` is not a file in the theme. The platform overlays it at build time.

## tailwind.config.ts

Present on Glitch, Noir, and Orbit. It maps Tailwind colors onto the theme's CSS variables. Glitch and Orbit scan `index.html` and `src/**/*.{ts,tsx}`. Noir also scans `src/**/*.liquid` and `snippets/**/*.liquid`.

## LICENSE

Present on each kit.

## config

`config/settings_schema.json` is the list Visual shows under theme settings. `config/settings_data.json` stores the chosen values under `current`.

Glitch's schema starts with a Colors group:

```json config/settings_schema.json theme={null}
[
  {
    "name": "Colors",
    "settings": [
      { "type": "color", "id": "color_background", "label": "Page background", "default": "#07080a" },
      { "type": "color", "id": "color_primary", "label": "Primary", "default": "#c6ff3d" }
    ]
  }
]
```

```json config/settings_data.json theme={null}
{
  "current": {
    "color_background": "#07080a",
    "color_primary": "#c6ff3d"
  }
}
```

The full Glitch file has more groups and ids (`color_surface`, `font_heading`, `button_radius`, and others). Noir and Orbit have their own values in the same two filenames.

Read the current values with `useGlobalSettings()` in React (`src/theme.tsx` on Glitch), `theme` in Liquid, or `ctx.settings` in Vite.

## groups

`groups/header.json` and `groups/footer.json` use the same document as a template: `sections` and `order`. Their sections render on every page. Glitch's header starts with an `announcement-bar` section. Its footer section type is `footer`.

## templates

Each file is one page. `sections` holds instances by id. `type` is the folder under `src/sections/`. `order` is the render order. `settings` overrides the schema defaults. `blocks` and `block_order` are the blocks. Optional fields on an instance are `style`, `seo` (`anchor`, `nosnippet`), and `disabled`.

Glitch's home page `hero` instance, and the field roles, are in [Create a custom theme](https://docs.joinmarkt.com/themes/custom-theme.md).

| File | Page |
| - | - |
| `templates/index.json` | Home (`/`) |
| `templates/products.json` | All products (`/products`) |
| `templates/product.json` | Product |
| `templates/group.json` | Product group |
| `templates/cart.json` | Cart (`/cart`) |
| `templates/reviews.json` | Reviews (`/reviews`) |
| `templates/support.json` | Support (`/support`) |
| `templates/policy.json` | Policies (`/privacy`, `/terms`, `/refunds`) |
| `templates/404.json` | Page not found |

Glitch's `templates/product.json` is a `main-product` section, then a `featured-products` section whose id in that file is `related_products`.

## public

`public/pm/` holds the same payment marks on Glitch, Noir, and Orbit: `apple-pay.svg`, `bancontact.svg`, `crypto.svg`, `google-pay-alt.svg`, `ideal.svg`, `mastercard.svg`, `paypal.svg`, `pix.svg`, `visa-alt.svg`.

## snippets

Liquid kits. Noir has `snippets/cart-body.liquid`, `snippets/group-card.liquid`, `snippets/icon.liquid`, `snippets/product-card.liquid`, and `snippets/section-heading.liquid`. Section Liquid includes them by name.

## src layout files

| File | Kits | Role |
| - | - | - |
| `src/theme.tsx` | Glitch (React) | Layout. Default export. Renders the header group, the page, and the footer group. Imports `src/styles/theme.css`. |
| `src/styles/theme.css` | Glitch (React) | Global CSS, imported by `src/theme.tsx`. |
| `src/theme.css` | Noir, Orbit | Global CSS. Loaded when the kit has no `src/theme.tsx`. |
| `src/theme.ts` | Noir, Orbit | Global script on every page. |
| `src/components/*.tsx` | Glitch | Shared React modules. Hero imports `links.tsx` and `glitch-text.tsx`. The layout imports `cart-drawer.tsx`. |
| `src/lib/*.ts` | Noir, Orbit | Helpers the sections import. Noir: `commerce.ts`, `dom.ts`, `motion.ts`. Orbit: `cart.ts`, `dom.ts`, `icons.ts`, `motion.ts`, `section.ts`, `store.ts`. |

## Sections

One folder per section type, under `src/sections/<type>/`. The example on all three kits is `hero`.

| File | Runtime | Role |
| - | - | - |
| `schema.json` | All three | Name, settings, blocks, presets. Glitch's hero schema is `name` "Hero", with settings such as `heading` and `subheading`, a `button` block, and presets. See [Section schema](https://docs.joinmarkt.com/themes/section-schema.md). |
| `index.tsx` | React (Glitch) | Default export. Props are the section settings and blocks. |
| `index.liquid` | Liquid (Noir) | Markup. `settings` is this section. |
| `script.ts` | Liquid (Noir) | Optional. `hero/script.ts` exports `mount`. |
| `index.ts` | Vite (Orbit) | `hero/index.ts` exports `mount` and `update`. |

A section type is lowercase letters, digits, and dashes, and starts with a letter (`hero`, `featured-products`, `main-product`).

More section folders sit beside `hero` in each kit. They use the same filenames for that runtime. The home page `order` lists the ones that kit places on `/`.


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