Prüfen und ausliefern

Die drei Prüfbefehle

php artisan theme:doctor mein-theme

Liest das Theme: Kaufweg, Pflicht-Hooks, requires, Seeds, Block-Overrides (lesen sie ihre Optionen, lesen sie erfundene?), feste Farben im CSS, Einstellungen ohne Wirkung, Pflichtblöcke in der Kasse. Ergebnis Grün, Gelb (läuft, aber unvollständig) oder Rot (nicht ausliefern).

php artisan theme:smoke

Ruft Startseite, Produkt, Kategorie und Suche wirklich auf und misst den Inhaltsbereich. Der Doctor liest nur Dateien und sieht nicht, ob eine Seite leer rendert. Verlangt, dass das Theme aktiv ist.

php artisan builder:doctor

Meldet Block-Optionen, die keine Darstellung auswertet.

Dazu von Hand, weil kein Befehl es kann: einen Artikel wirklich in den Warenkorb legen und die Startseite auf Handybreite ansehen.

Lesbarkeit und Tempo

Ein Theme kann den schnellsten Shop langsam und schwer lesbar machen, ohne dass es im Entwurf auffällt. Im Oktober 2026 lief jedes mitgelieferte Theme durch PageSpeed Insights. Fünf von sechs hatten mindestens einen der folgenden Fehler, jeder davon war in Minuten behoben. Diese Punkte sind Pflicht:

Regel	Warum
Schriften nur lokal: Familie in den Tokens `font-heading`/`font-body` nennen, nie Google per `<link>` oder `@import`	Die IP jedes Besuchers ginge an Google; ein `@import` ließ die Seite 750 ms warten
Im Kopf: `<title>`, `@stack('head_vorab')`, `local_font_head()`, dann das Stylesheet	Startbild und Schriften werden sonst erst nach dem Stylesheet entdeckt
Theme-Skripte mit `defer`	Eines ohne hielt das erste Zeichnen 450 ms auf
Startbild über den Bildbaustein `_img`, nie als `background:url()`	Sonst lädt das Handy das Original, und nichts wird vorab angekündigt
Schrift mindestens 4,5 : 1 zum Grund, auch `color-text-muted` auf `color-surface`	„inkl. MwSt.“ und Grundpreise stehen in dieser Farbe
Zu helle Akzentfarbe als Schrift abdunkeln: `--color-accent-text: color-mix(in srgb, var(--color-accent) 72%, #000)`	Die Marke bleibt, eine eigene Farbe aus „Theme anpassen“ zieht mit
Abstufung über Farbe, nicht über `opacity`	Durchsichtige kleine Schrift fiel in drei Themes unter 4,5 : 1
Überschriften ohne Sprung (h2 → h3, keine h4 unter h2)	Vorlesehilfen springen über die Gliederung
Links aus Symbol oder Bild bekommen `aria-label`	Sonst heißen sie für Vorlesehilfen nur „Link“
Tippflächen mindestens 24 × 24 px	Kleine Slider-Punkte trifft man auf dem Handy sonst nicht

theme:doctor meldet die ersten sechs Punkte von selbst (Gelb). Den Rest sieht nur eine Messung: PageSpeed auf einem Shop mit dem Theme, Ansicht Mobil, Ziel 90 oder mehr in allen vier Werten. Ein neues Theme aus php artisan theme:new bringt Kopf-Reihenfolge, Schriftfarbe für den Akzent und einen ausreichend dunklen gedämpften Text schon mit.

Im Adminbereich zeigt Themes → Abnahmebericht dieselben Ergebnisse im Klartext. Ein rotes Theme lässt sich nur mit Trotzdem aktivieren einschalten.

Ausliefern

Den Theme-Ordner als ZIP packen — theme.json liegt in der obersten Ebene des Ordners.
Im Ziel-Shop: Themes → Installieren → ZIP hochladen.
Ein hochgeladenes Theme ist zunächst nicht vertrauenswürdig: Es lässt sich weder aktivieren noch in der Vorschau ansehen, bis es auf seiner Kachel mit vertrauen freigegeben ist — auch seine Vorlagen sind ausführbarer Code.
Abnahmebericht ansehen, Vorschau, Aktivieren.

Eine neue Version desselben Themes wird genauso installiert; Inhalte im Builder bleiben erhalten.

Typische Fallen beim Stylen

Die Theme-Dateien werden kopiert. public/themes/{slug} ist eine Kopie. Nach CSS-Änderungen neu veröffentlichen (Schritt 5).

Blöcke bringen eigenes CSS mit. Es steht nach dem Theme-Stylesheet und gewinnt bei gleicher Spezifität. Abhilfe: Elementnamen davor (nav.mein-nav statt .mein-nav). Schreibt der Block einen Inline-Style, ist !important der einzige Weg — mit Kommentar, warum.

min-width: 0 lückenlos. Spalte → Hülle des Blocks → Block: Fehlt ein Glied, wächst es auf die Breite seines Inhalts und läuft aus der Spalte.

Ein zu breiter Block zoomt die ganze Seite heraus. Spaltenzahlen sind eine Obergrenze:

grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
@media (max-width: 820px) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

Mobil ist eine eigene Komposition. Die Kopfzeile auf dem Handy zweizeilig (oben Menü, Logo, Symbole; darunter die Suche), Mega-Menüs eine Ebene nach der anderen. Ein Menü, ein Verhalten — nicht Schublade oben und Akkordeon unten.

Die Kopfzeile darf nicht von der Schriftbreite abhängen. Wird die Navigation mit der richtigen Schrift schon zweizeilig, springt sie beim Schrifttausch immer.

Kein Rechnen beim Laden. Skripte, die mehr als ein paar Millisekunden brauchen, starten erst bei Bedarf (Sichtkontakt, erste Berührung).

In der Builder-Vorschau laufen Einblende-Animationen nicht — Theme-JavaScript darf sich nicht darauf verlassen.