Anpassung und Theme-Einstellungen

Kingsbell trennt globale Theme-Einstellungen von lokalen Section-Entscheidungen. Verwenden Sie globale Einstellungen für Konsistenz und Section-Einstellungen für konkrete Inhalte und Kompositionen.

Marke

Konfigurieren Sie Hauptlogo, inverses Logo, Breite von 80px bis 320px und Favicon. Prüfen Sie beide Logos auf den tatsächlich verwendeten Hintergründen.

Farben

Die Standardpalette enthält Obsidian, Alabaster, Paper, Graphite, Outline, Champagne, White und Error. Sie wird auf semantische Rollen für Hintergrund, Oberfläche, Text, Rand, Akzent, Button und Fehler abgebildet.

Prüfen Sie nach Änderungen Kontrast, Fokus, Formularfehler, deaktivierte Zustände, Sale-Preise, Badges und Overlays.

Typografie

Einstellungen steuern Überschriften- und Textschrift, Skalen, Zeilenhöhe, Laufweite und Button-Großschreibung. Standard sind Playfair Display und Inter.

Testen Sie lange reale Titel und Übersetzungen besonders auf Mobilgeräten.

Layout und Bewegung

Lassen Sie die Unterstützung für prefers-reduced-motion aktiviert.

Buttons und Formulare

Konfigurierbar sind Höhe, horizontaler Abstand, Rand, Hover-Stil und Großschreibung der Buttons sowie unterstrichene oder umrandete Inputs und Fokusbreite.

Reduzieren Sie weder Touch-Ziele noch die Sichtbarkeit des Tastaturfokus.

Produktkarten

Steuern Sie Portrait-, Quadrat- oder adaptives Bildverhältnis, Ausrichtung, Hover, Währungscodes und Quick-Add-Stil. Änderungen wirken auf Kollektionen, Suche und Empfehlungen.

Flexible content

Flexible content unterstützt Blöcke für Überschrift, Text, Button, Bild, Statistik, Ressource, Spacer, Gruppe und App Blocks. Gruppen erlauben eine Verschachtelungsebene.

Geeignet ist die Section für Landingpages, Ressourcen, Services, Berichte und Mitgliederseiten.

Strukturierte Sections

• Specification table für Label-Wert-Paare.
• Tabbed content mit sequenzieller Darstellung ohne JavaScript.
• Reusable card grid mit manuellen Blöcken oder Metaobjects.

Verstecken Sie rechtliche, Sicherheits- oder Versandinformationen nicht ausschließlich in Tabs.

Seiten-Templates

page.flexible.json
page.specifications.json
page.content-library.json

Weisen Sie das Template einer Shopify-Seite zu und konfigurieren Sie es im Theme Editor.

Dynamische Quellen

Verbinden Sie Einstellungen mit Produkten, Kollektionen, Artikeln, Metafields oder Metaobjects, wenn Shopify dies unterstützt. Definieren Sie Fallbacks, testen Sie fehlende Daten und legen Sie keine internen Metafields offen.

Sichere Reihenfolge der Anpassung

1. Globale Theme-Einstellungen.
2. Section- und Block-Einstellungen.
3. JSON-Template-Komposition.
4. Gemeinsame Snippets oder Blöcke.
5. Neue Sections.
6. Globales CSS oder JavaScript nur für wirklich globale Anforderungen.

Nach größeren Änderungen speichern, neu laden und repräsentative Ressourcen, Mobilansicht, Tastatur, Reduced Motion, leere Zustände und Commerce-Abläufe testen.