InnoSpark Fancy Theme für Shopware 6.7

Ein Theme, das sich zurücknimmt

Die meisten Themes ersetzen die halbe Storefront und bezahlen dafür bei jedem Shopware-Update. Das InnoSpark Fancy Theme geht den umgekehrten Weg: Es überschreibt sechzehn Core-Templates statt zwei Dutzend. Startseite, Kategorieseiten, Produktdetail, Warenkorb, Checkout, Kundenkonto und Erlebniswelten werden ganz überwiegend über Stylesheets gestaltet – wenig angefasstes Template, wenig Update-Schuld.

Installation ohne Build-Schritt

Kein Node, kein npm, kein Vite. ZIP hochladen, aktivieren, einem Verkaufskanal zuweisen – fertig. Möglich wird das, weil das Theme kein eigenes JavaScript-Bundle mitbringt: Shopware übersetzt SCSS selbst, JavaScript aber nicht. Das wenige nötige Laufzeit-JS steht inline im HTML und spart zusätzlich einen Request auf dem kritischen Pfad.

Schlank, und zwar messbar

Rund 17 KB gzip eigenes CSS für den vollen Funktionsumfang. Abgeschaltete Funktionen erzeugen dabei gar kein CSS: Wer den mitlaufenden Header nicht braucht, lädt dessen Regeln auch nicht mit; wer den Dunkelmodus nicht freischaltet, ebenso wenig. Weitere Bausteine für kurze Ladezeiten:

• Feste Bildseitenverhältnisse gegen Layout-Sprünge beim Nachladen (Core Web Vital „CLS“)
• Abschnitte weit unterhalb des Sichtfelds werden vom Rendern ausgenommen – bewusst nie der erste, weil das den Largest Contentful Paint verzögern statt verbessern würde
• Optionaler Systemschrift-Modus: spart den kompletten Webfont-Download

120 Einstellungen statt Code-Anpassungen

Farben, Rundungen, Schatten, Seitenbreite, Spaltenzahl, Typografie, Header-Variante, Produktkachel, Produktseite, Footer, Animationen – alles über die Theme-Konfiguration in neun Tabs. Jeder Tab nennt in seiner Überschrift, was er enthält, und jeder Abschnitt führt seine Felder im Hilfetext auf; man sucht nicht, man liest. Farben und Größen werden in das gecachte Stylesheet einkompiliert und kosten zur Laufzeit nichts.

Dunkelmodus, der diesen Namen verdient

Kein umgedrehtes Hellbild, sondern ein eigener Satz aus sieben Farben: Seitengrund, zwei Flächenstufen, Text, Sekundärtext, Rahmen und ein aufgehellter Akzent. Der Grund dafür ist handfest – ein Akzent, der auf Weiß trägt, ist auf Schwarz meist zu dunkel, und Flächen brauchen dort drei eng beieinanderliegende Stufen statt zweier weit auseinanderliegender.

Drei Auslöser stehen zur Wahl: der Systemeinstellung folgen, einen Umschalter in der Kopfzeile anbieten, oder dauerhaft dunkel. Für Logos, die auf dunklem Grund verschwinden würden, gibt es ein zweites Logofeld – eingeblendet wird ohne Sprung, das helle Logo hält den Platz.

Farbvorlagen – für Hell und Dunkel getrennt

Drei fertige Farbbilder, jeweils in einer hellen und einer dunklen Fassung: Kühl & technisch, Warm & ruhig, Kontrast. Eine Vorlage setzt Akzent, Flächen, Text, Rahmen, Kopfzeile, Top-Bar, Kachel und Fußzeile in einem Zug.

Entscheidend ist dabei, wie sie das tut: Eine Vorlage schreibt keine eigenen Regeln, sondern belegt genau die Felder neu, die man auch von Hand belegen würde. Daraus folgt die Eigenschaft, auf die es ankommt – eine Vorlage kann nichts einstellen, was Sie nicht auch selbst einstellen könnten. Sie ist eine Abkürzung, keine zweite Schaltzentrale.

Verträgt sich mit dem, was schon läuft

Header und Produktkachel haben je einen Schalter Automatisch / Immer / Nie. In der Voreinstellung erkennt das Theme vorhandene Navigations- und Produktkachel-Erweiterungen und hält sich in genau diesem Bereich zurück – statt sein Design darüberzulegen und doppelte Rahmen, doppelte Sticky-Logik und widersprüchliche Hover-Effekte zu erzeugen.

Auch die Zahlungsknöpfe von PayPal sind berücksichtigt. Sie werden von PayPal in einem eigenen Rahmen gezeichnet, an den kein Stylesheet herankommt – das Theme gestaltet deshalb, was ihm gehört: Abstände, Kartenfelder und die vorab reservierte Höhe, damit die Seite beim Nachladen des Knopfes nicht springt.

Produktseite mit Wahlmöglichkeiten

• Beschreibung und Bewertungen als Reiter oder als Aufklappbereiche – bei letzteren stehen die Bewertungen oben und zugeklappt, die Beschreibung darunter und offen
• Mitlaufender Kaufbereich: Preis, Menge und Knopf bleiben beim Scrollen sichtbar
• Kaufleiste für das Handy, die einhakt, sobald der eigentliche Knopf aus dem Bild läuft – Position, Auslösepunkt und Höhe einstellbar
• Bewertungssterne wahlweise weit oben, Preisdarstellung, Variantenauswahl als Kreis oder Kachel

Bausteine für Erlebniswelten

Shopwares Texteditor lässt Layout-CSS nicht durch – ein Dreispalter, den man als style="display:grid" hineinschreibt, kommt als Liste untereinander wieder heraus. Klassen überstehen die Prüfung dagegen. Das Theme bringt deshalb fertige Klassen mit, die im Feld „CSS-Klasse“ von Sektionen und Blöcken eingetragen werden: mehrspaltiger Text, Karten, Personenraster, Textkasten auf einem Bildhintergrund, Bild-Text-Blöcke mit wechselnder Seite.

Der Inhalt bleibt damit im CMS, die Gestaltung im Theme – und lässt sich später ändern, ohne dass jemand den Text anfassen muss.

Vier Schriftmodi – alle ohne Google Fonts

• Theme-Schrift – die in Shopware eingestellte Schrift
• Systemschriften – kein Download, kein Textflackern, schnellstmöglich
• Serifen-Überschriften – redaktioneller Look aus vorhandenen Systemschriften
• Mitgelieferte Schriften – Playfair Display und Rubik als Variable Font, zusammen rund 73 KB für alle Schriftschnitte

Alle Schriften werden vom eigenen Server ausgeliefert. Ein Einbinden über Google Fonts überträgt die IP-Adresse jedes Besuchers in die USA und ist in Deutschland abmahnfähig (LG München I, 3 O 17493/20). Beide mitgelieferten Schriften stehen unter der SIL Open Font License; die Lizenztexte liegen dem Paket bei.

Barrierefreiheit von Anfang an

Sichtbare Fokusringe über :focus-visible, Mindest-Trefferflächen von 44×44 Pixeln – auch für Formularfelder, nicht nur für Knöpfe –, Unterstützung für die Systemeinstellung „Bewegung reduzieren“ und für den Windows-Kontrastmodus, Fehlermeldungen mit einem farbunabhängigen Merkmal. Bestellstatus und ähnliche Markierungen tragen ihre Aussage immer zusätzlich im Text; eine reine Farbmarkierung wäre für Nutzer mit Farbsehschwäche wertlos. Shopwares eigene Sprungmarken werden gestaltet statt nachgebaut – ein zweiter Sprunglink wäre für Tastaturnutzer ein zusätzliches Hindernis.

Hinweis: Das Theme schafft die technische Grundlage. Ob ein Shop insgesamt WCAG 2.1 AA erreicht, hängt zusätzlich an gepflegten Alternativtexten, der gewählten Farbkombination und installierten Erweiterungen.

Druckansicht inklusive

Bestellbestätigungen und Datenblätter drucken sauber: Navigation und Footer entfallen, Registerkarten sind aufgeklappt, Umbrüche sind kontrolliert. Ein Detail, das erst auffällt, wenn ein Kunde einen Ausdruck seiner Bestellung braucht.

Mehrere Shops, ein Theme

Über Kind-Themes lässt sich pro Verkaufskanal ein eigenes Design aufbauen – eigene Farben, Schriften, Layouts – ohne das Theme mehrfach zu installieren. Was in allen Shops gleich sein soll, wird einmal im Eltern-Theme gepflegt.

Design-Vorschau statt Rätselraten

Farbe ändern, speichern, Theme neu bauen, Seite neu laden – und dann sieht man, dass der Ton doch nicht passt. Das Theme bringt dafür ein zuschaltbares Bedienfeld mit, das Farben, Rundungen, Abstände, Spaltenzahl und sämtliche Kachel- und Typografie-Varianten sofort umschaltet: an der echten Seite, mit echten Produkten, ohne Speichern und ohne Neukompilieren. Am Ende listet es die geänderten Werte zum Übertragen auf.

Möglich ist das, weil die Gestaltung ohnehin über CSS-Variablen und Attribute läuft – 92 der 120 Felder lassen sich auf diesem Weg live schalten. Das Bedienfeld erscheint nur, wenn es freigeschaltet und ein Adressparameter gesetzt ist; Kunden bekommen es nie zu sehen.

Lizenz für zwei Installationen

Eine Lizenz berechtigt zur Nutzung in bis zu zwei Shopware-Installationen — etwa Produktiv- und Testsystem oder zwei eigene Shops. Für weitere Installationen wird eine weitere Lizenz benötigt.

Das Nutzungsrecht ist zeitlich unbefristet. Aktualisierungen gehören für zwölf Monate ab Bereitstellung dazu; danach bleibt das Theme uneingeschränkt nutzbar, es entfällt lediglich der Anspruch auf weitere Aktualisierungen. Einzelheiten stehen im Endnutzer-Lizenzvertrag.

Technische Angaben

• Shopware 6.7 (entwickelt und geprüft gegen 6.7.11)
• Rund 17 KB gzip eigenes CSS im vollen Ausbau
• Kein JavaScript-Bundle, kein Node-Build
• 120 Konfigurationsfelder in 9 Tabs
• 16 überschriebene Core-Templates
• Dunkelmodus mit eigenem Farbsatz, drei Auslöser
• Lizenz für bis zu zwei Shopware-Installationen
• Kein Kopierschutz, keine Aktivierung, keine Online-Prüfung — das Theme läuft nach dem Entpacken ohne Verbindung zu uns
• Oberfläche und Texte auf Deutsch und Englisch