Installation und lokale Entwicklung — kingsbell-Dokumentation

kingsbell-Dokumentation

Seite 2 von 9

Kingsbell verwendet Shopify CLI für Entwicklung, Validierung, Remote-Vorschau und Packaging. Arbeiten Sie in einem eigenen Development Store und nicht direkt in einem aktiven Shop.

Installation

bash

node --version
npm install --global @shopify/cli @shopify/theme
shopify version
git clone https://github.com/rokadhq/kingsbell.git
cd kingsbell

Node.js 20 oder neuer ist erforderlich.

Development Store verbinden

bash

npm run dev -- --store ihr-shop.myshopify.com

Shopify CLI fordert bei Bedarf die Anmeldung an und erstellt oder verwendet ein Development Theme. Trennen Sie Development, Staging und Produktion.

shopify.theme.toml.example enthält nur nicht geheime Beispiele. Committen Sie niemals Passwörter, Tokens, Cookies, Kundendaten oder App-Secrets.

Kernbefehle

bash

npm run dev -- --store ihr-shop.myshopify.com
npm run check
npm run package

dev startet Vorschau und Synchronisierung.
check führt Theme Check aus.
package erstellt ein installierbares Shopify-ZIP.

Entwicklungsablauf

Erstellen Sie für jede Änderung einen Branch.
Führen Sie Theme Check vor und nach der Änderung aus.
Testen Sie die betroffene Section im Theme Editor.
Speichern und laden Sie das Template erneut.
Prüfen Sie Desktop, Mobilgeräte und reine Tastaturbedienung.
Testen Sie leere, fehlerhafte, ausverkaufte, reduzierte und variantenreiche Zustände.

Runtime-Grenze

text

assets/
blocks/
config/
layout/
locales/
sections/
snippets/
templates/

.design, QA-Dokumente, Skripte und Companion-Verträge gehören nicht zur Storefront-Runtime. .shopifyignore schließt sie von Shopify-CLI-Operationen aus.

Sections und Templates

Neue Sections benötigen ein gültiges JSON-Schema, sinnvolle Defaults, Shopify-Routen und -Formulare, semantische Reihenfolge, sichtbaren Fokus und Reduced-Motion-Unterstützung.

Neue JSON-Templates müssen vorhandene Section-Typen korrekt referenzieren, ihre Reihenfolge festlegen, leere Container vermeiden und im Theme Editor geöffnet und gespeichert werden können.

Assets und JavaScript

Verwenden Sie von Shopify gehostete Medien mit Alt-Text, responsiven Größen und geprüften Ausschnitten.

JavaScript soll progressiv, möglichst verzögert und mit Section-Reloads kompatibel sein. Vermeiden Sie doppelte Listener und erhalten Sie einen brauchbaren Zustand ohne JavaScript.

Validierung und Packaging

bash

npm run check
npm run package

Der Phase-8-Workflow erzeugt Kingsbell-0.8.0.zip. Installieren Sie genau dieses Paket in einem sauberen Development Store, bevor es freigegeben wird.

Ein erfolgreiches Paket beweist nicht, dass Commerce, Konten, B2B, Performance oder Barrierefreiheit korrekt funktionieren.