Wie Themes funktionieren
Code bleibt in der Plattform, alles Visuelle ist Daten: das Modell hinter Theme-Paketen.
Themes orientieren sich an Shopify (Online Store 2.0), mit einem wichtigen Unterschied: Code wird nicht hochgeladen. Sections und Blöcke sind React-Komponenten im Repository (packages/block-registry, themes/default). Ein Theme-Paket enthält nur Daten.
| Shopify | Hier |
|---|---|
sections/*.liquid mit {% schema %} | React-Komponenten mit TypeScript-Schema (BlockDefinition) |
templates/*.json | gleiche JSON-Form (sections, order, block_order) |
sections/*-group.json | sections/header-group.json, sections/footer-group.json |
config/settings_data.json (Presets) | gleiche Datei, Stile mit Farben, Schemata, Typografie |
assets/ | Bilder und theme.css (bereinigt) |
| Dynamic Sources | Bindings: "{{ product.title }}" |
#Prinzipien
- Code bleibt in der Plattform. Neue Section-Typen kommen über das Repo (Review, Tests, Release). Pakete mit unbekannten Sections werden abgelehnt.
- Alles Visuelle ist Daten. Farben, Schemata, Schriften und Abstände werden zu CSS-Variablen; Theme-CSS hängt sich an stabile Attribute.
- Pakete werden geprüft, nie vertraut. JSON gegen die Schemata, Farben als Hex, Schriften aus einer Liste, CSS bereinigt, Größenlimits.
- Shopify-kompatibel, wo es nichts kostet – Ordner, JSON-Form und Binding-Syntax.
- Alles ist umkehrbar. Jedes Anwenden legt vorher eine Sicherung an.
#Lebenszyklus
themes/packages/<name>/ → python themes/packages/zip.py <name> → dist/<name>-<version>.zip
│ │
│ (oder Upload im Dashboard: Design → Themes) ▼
└───────────────────────────────────────────────▶ pnpm platform theme publish … --publish
│
Theme-Store in jedem Shop ◀─────────────┘
→ Bibliothek → Anwenden (mit Sicherung)Weiter mit dem Paketformat.
Zuletzt aktualisiert am 21. Oktober 2026