Kingsbell ist ein Online-Store-2.0-Theme auf Basis von Shopify Liquid, JSON-Templates, Sections, Blöcken, Assets, Einstellungen, Routen und Formularen. Ein separates Frontend-Framework ist nicht erforderlich.
Runtime-Verzeichnisse
assets/ CSS, JavaScript und Storefront-Assets
blocks/ Wiederverwendbare Theme-Blöcke
config/ Globale Schemas und Einstellungen
layout/ Dokument-Layouts
locales/ Storefront- und Editor-Übersetzungen
sections/ Konfigurierbare Sections
snippets/ Wiederverwendbare Liquid-Einheiten
templates/ JSON- und Liquid-Templates.design, Dokumentation, QA-Skripte und Companion-Verträge liegen außerhalb der Runtime.
Architektur-Ebenen
- Foundation — Tokens, Schriften, Basisstile, Metadaten, Icons und zugängliche Primitive.
- Commerce Engine — Produkte, Varianten, Formulare, Warenkorb, Filter, Suche und Preise.
- Template-System — Standard-, Editorial-, Archiv-, Commission- und Private-Kompositionen.
- Content-System — Blogs, Artikel, Galerien, Zitate, Interviews, Notizen und Karten.
- Companion-Grenze — Mitglieder-Darstellung und separate Autorisierungsspezifikation.
Duplizieren Sie keine Warenkorb-Logik in visuellen Sections und behandeln Sie Liquid-Bedingungen nicht als Server-Autorisierung.
Visuelles System
Kingsbell verwendet standardmäßig Obsidian und Alabaster, einen zurückhaltenden Champagne-Akzent, Playfair Display für Überschriften, Inter für Interface und Fließtext, scharfe Geometrie, großzügigen Leerraum, ein 12-Spalten-Raster und produktorientierte Fotografie.
Farben
| Token | Standard |
|---|---|
| Obsidian | #0A0A0A |
| Alabaster | #F9F8F6 |
| Paper | #FFFFFF |
| Graphite | #5F5E5E |
| Outline | #D8D5D2 |
| Champagne | #C5A059 |
| Error | #BA1A1A |
Komponenten sollen semantische Rollen für Hintergrund, Oberfläche, Text, Rand, Akzent und Fehler verwenden.
Typografie und Layout
Globale Einstellungen steuern Schriftfamilien, Skalen, Zeilenhöhe, Laufweite, Seitenbreite, Lesebreite, Ränder, Gutter, Section-Abstand und Ecken.
Standardwerte sind 1440px Seitenbreite, 780px Lesebreite, 32px Gutter und 120px Section-Abstand.
Erhalten Sie die semantische Überschriftenhierarchie unabhängig von der visuellen Größe.
Theme-Blöcke
Wiederverwendbare Blöcke umfassen Überschrift, Text, Button, Bild, Statistik, Ressourcenkarte, Spacer und Gruppe. Flexible content unterstützt außerdem App Blocks.
Gruppen erlauben eine Verschachtelungsebene, damit der Theme Editor verständlich bleibt.
Progressive Enhancement und Barrierefreiheit
Wesentliche Inhalte bleiben ohne JavaScript verfügbar. Tabs sind als aufeinanderfolgende Panels lesbar, Reading Progress ist optional und Animationen respektieren Reduced Motion.
Die Foundation enthält Skip-Link, sichtbaren Fokus, fokussierbaren Hauptinhalt, semantische Controls, Alt-Text-Handhabung und Tastaturnavigation.
Theme-Editor-Lifecycle
Shopify kann Sections unabhängig neu laden. JavaScript muss Load, Unload, Block-Auswahl und wiederholte Initialisierung ohne doppelte Listener unterstützen.
.design ist ausschließlich visuelle Referenz und keine Produktionsabhängigkeit.