Theme structure

These are the files in the Glitch, Noir, and Orbit trees. JSON is what Visual edits. Section code is what Code edits. src/platform/ is not in the folder.

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:

theme.json

{
  "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.

string

required

join-markt/v2.

string

required

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

string

required

Name shown for the theme.

string

required

1.0.0 on Glitch, Noir, and Orbit.

string

Optional. Join Markt on the kits.

string

Optional.

'react' | 'liquid' | 'vite'

Optional. Omitted means React. See Runtimes.

index.html

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

<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:

config/settings_schema.json

[
  {
    "name": "Colors",
    "settings": [
      { "type": "color", "id": "color_background", "label": "Page background", "default": "#07080a" },
      { "type": "color", "id": "color_primary", "label": "Primary", "default": "#c6ff3d" }
    ]
  }
]

config/settings_data.json

{
  "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.

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.
`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 /.

Start here

Build a theme

Builder

Storefront features

Help

Old Nunjucks themes

theme.json

index.html

tailwind.config.ts

LICENSE

config

groups

templates

public

snippets

src layout files

Sections

​theme.json

​index.html

​tailwind.config.ts

​LICENSE

​config

​groups

​templates

​public

​snippets

​src layout files

​Sections

theme.json

index.html

tailwind.config.ts

LICENSE

config

groups

templates

public

snippets

src layout files

Sections