Geschichte · Base Theme
Einen Shopware-Shop erkennt man auf den ersten Blick. Genau dafür gibt es dieses Theme.
Kein Skin für einen Shop — ein Fundament für die nächsten zehn. Standardmäßig monochrom, Farbe nur dort, wo sie etwas bedeutet, und ein Dark Mode ohne Build-Schritt.
Der Laden und die Menschen in dieser Geschichte sind ein Beispiel, keine Kundschaft. Die Software ist echt; das Problem ist eines, wegen dessen uns Händler mit mehr als einer Adresse immer wieder anrufen.
Das Erkennungsmerkmal
Das Standard-Theme hat ein Gesicht, und Kunden kennen es.
Am Standard-Theme ist nichts falsch. Es ist vollständig, gepflegt und vernünftig. Es ist aber auch wiedererkennbar — und ein Shop, der nach Plattform aussieht statt nach Marke, hat seinen ersten Eindruck verbraucht, bevor jemand ein Wort gelesen hat.
Üblicherweise wird das mit einem Stapel Selektor-Overrides gegen Bootstrap gelöst. Das hält, bis das nächste Core-Update etwas darunter verschiebt.
Was es stattdessen ist
Eine Token-Ebene, und Bootstrap zeigt darauf.
Jede visuelle Entscheidung — Farbe, Typo-Skala, Abstände, Bedienhöhen, Radien, Elevation, Motion — löst sich in einem Token auf. Bootstraps eigene Variablen und `--bs-*`-Custom-Properties zeigen auf diese Tokens, statt Selektor für Selektor überschrieben zu werden.
Eine Marke ändert also Werte, keine Komponenten. Das Theme bleibt aktualisierbar, weil es sich nicht mit dem Framework darunter streitet.
- --color-text-primary
- #1a1a1a
- #f6f6f6
- --color-bg-base
- #ffffff
- #0b0b0b
- --color-surface
- #ffffff
- #121212
- --color-border
- #e3e3e3
- #282828
- --color-action
- #000000
- #ffffff
Die Werte, die das Theme ausliefert, aus seiner eigenen Palette gelesen. Ein Satz Namen; der Modus bestimmt die Werte.
Was Händler anfassen
Layout, ohne ein Stylesheet zu öffnen.
Containerbreite und maximale Inhaltsbreite. Abschnittsabstände. Sticky Header, Topbar, Breadcrumb. Navigationsstil. Footer-Spalten. Normale Shopware-Theme-Einstellungen, genau dort, wo Händler sie ohnehin suchen.
Das sind keine kosmetischen Schalter obendrauf: Sie steuern echtes Markup im Twig. Topbar aus heißt, es wird keine Topbar ausgeliefert — nicht, dass eine per CSS versteckt wird.
Und die Bauteile
Eckenradius, Kartenstil, Produkte pro Reihe.
Stil der Primärschaltfläche, Kartenbehandlung, Seitenverhältnis der Produktbilder und Rasterspalten, getrennt für Desktop, Tablet und Mobil — weil drei nebeneinander am Laptop richtig und am Telefon falsch ist.
Das letzte Kästchen in diesem Bereich ist das Thema der nächsten Szene.
Der Umschalter
Dark Mode, ohne Build-Schritt.
Ein Mond neben Konto- und Warenkorb-Symbol, auf jeder Breakpoint-Stufe. Die Auswahl bleibt im Browser des Besuchers, und die gesamte Palette wird über ein Attribut am html-Element neu bewertet. Dieselben Token-Namen, andere Werte.
Umgesetzt ist es inline — ein winziges No-Flash-Skript im Head, damit Dark-Mode-Besucher nie weiß aufblitzen sehen, plus ein kleines Verdrahtungs-Skript. Kein Webpack, keine Asset-Pipeline. Schaltet man die Einstellung ab, werden Markup und Skripte gar nicht erst ausgeliefert.
Shopware backt manche Farben beim Kompilieren ein; diese Elemente zeigen wieder auf die Tokens, damit sie mitwechseln statt dunkel auf dunkel stehen zu bleiben.
Hell
Dunkel
Wo die Farbe geblieben ist
Farbton ist der Bedeutung vorbehalten.
Die Oberfläche ist neutral: Hierarchie entsteht aus Tonwert, Typografie, Abständen und Haarlinien. Wenn also etwas farbig ist, trägt es Information — Erfolg, Warnung, Gefahr, Hinweis und die Bewertungssterne.
Zählen Sie auf einer Listenseite die farbigen Dinge. Die Sterne, sonst nichts. Das ist Absicht — und der Grund, warum eine Statusmeldung als Status gelesen wird und nicht als weitere Dekoration.
Die Seite, die verkauft
Breadcrumb, Titel, Inhalt — in dieser Reihenfolge.
Ein gedämpfter Pfad mit der aktuellen Seite in Tinte, zwölf Pixel bis zum halbfetten Titel, acht bis zu einer optionalen Beschreibung, dann der Inhalt. Auf dem Telefon klappt der Pfad zusammen, statt umzubrechen. Auf Produktseiten ist das Produkt die aktuelle Station.
Staffelpreise lesen sich als Tabelle, weil sie eine sind. Galerie, Mengenfeld und Warenkorb-Button stammen aus denselben Bedienhöhen und Radien wie der Rest des Shops.
Hell
Dunkel
Was die Redaktion gebaut hat
Erlebniswelten funktionieren weiter.
Jeder Core-CMS-Block ist auf dem Designsystem gestaltet: Text- und Lead-Typografie, gerundete Bilder, Slider und Galerien, Bild-Text-Karten, Produktboxen gleicher Höhe, ein Abdunkler mit heller Schrift bei Text-auf-Bild und eine gestaltete Consent-Karte für eingebettete Videos.
Was die Redaktion in der Administration eingestellt hat, gilt weiterhin. Das Theme gestaltet die Blöcke; es nimmt demjenigen, der das Layout gebaut hat, nichts weg.
Woher wir das wissen
Hell und dunkel, Desktop und Telefon, geprüft.
Eine Playwright-Suite deckt den Storefront in beiden Farbschemata und beiden Größen ab, inklusive WCAG-AA-Textkontrast. Formularrahmen liegen bei 3:1, Fokus ist ein sichtbarer Ring statt einer entfernten Outline, und Links im Fließtext behalten ihre Unterstreichung, weil sie die Textfarbe teilen.
Die Plugin-Skins haben einen eigenen Test, der sich selbst überspringt, wenn das Plugin im geprüften Shop nicht installiert ist.
Hell
Dunkel
Zwei Seiten desselben Shops
Für die, die einkaufen
- Ein Shop, der nach der Marke aussieht und nicht nach der Plattform darunter.
- Ein Dark Mode, der wirklich dunkel ist — auch dort, wo der Core Farben einbackt.
- Text mit AA-Kontrast, sichtbarer Fokus und Trefferflächen in Daumengröße.
- Kein weißes Aufblitzen beim Laden, wenn jemand nachts stöbert.
Für die, die es pflegen
- Markenanpassungen sind Token-Werte und Theme-Einstellungen, keine Komponenten-Eingriffe.
- Bootstrap wird umgelenkt statt bekämpft — Core-Updates bleiben überstehbar.
- Ein Fundament über Projekte hinweg statt eines eigenen Skins je Kunde.
- Apache-2.0 und auf Packagist — forken, lesen, keine Lizenzdiskussion.
Klare Antworten
Was das nicht ist
Die ehrlichen Kanten, auch die, die für eine Filialkette am meisten zählen. Ein Plugin, das alles verspricht, ist ein Plugin, von dem man es später erfährt.
- Nur Shopware 6.7
- Es braucht `shopware/core` und `shopware/storefront` in ~6.7.0. Einen 6.6-Zweig gibt es nicht.
- Ein Fundament, kein fertiger Shop
- Es liefert eine stimmige Grundlage, auf der eine Marke entstehen kann. Es trifft keine Designentscheidungen für Ihre Marke und bringt keine maßgeschneiderten Layouts mit.
- Plugin-Skins sind optional und einseitig
- Das Theme gestaltet die Storefront-Oberfläche unserer Plugins und hängt von keinem ab. Installieren Sie ein Plugin, das es nicht kennt, greift nichts — so gewollt, heißt aber: Ein Fremd-Plugin sieht womöglich weiter nach sich selbst aus.
- Der Core backt weiterhin Farben ein
- Der Dark Mode lenkt die Core-Elemente um, die wir gefunden haben. Taucht nach einem Update ein neues dunkel-auf-dunkel auf, muss es ergänzt werden — es ist eine Liste, keine Regel, die alles einfängt.
- Einstellungen brauchen ein Recompile
- Nach geänderten Theme-Einstellungen oder einem Update muss das Theme neu kompiliert werden. Shopware-Standard, aber besser gesagt, bevor sich jemand wundert, dass nichts passiert.
Installieren
Kostenlos, und vier Befehle entfernt.
Das Theme liegt unter Apache-2.0 auf Packagist. Kein Lizenzschlüssel, kein Konto, keine Gebühr — installieren wie alles andere auch.
$ composer require kommandhub/base-theme-sw
$ bin/console plugin:refresh
$ bin/console plugin:install --activate KmhBaseTheme
$ bin/console theme:change --all KmhBaseThemeComposer, danach das Theme einem Verkaufskanal zuweisen.
Oder die Release-ZIP von GitHub laden und unter Erweiterungen → Meine Erweiterungen hochladen.
- Version
- 1.0.0
- Lizenz
- Apache-2.0
- Voraussetzungen
- Shopware 6.7, PHP 8.2+
- Preis
- Kostenlos
Bevor Sie fragen
Die Fragen, die Händler zuerst stellen
Ist dieses Shopware-Theme wirklich kostenlos?
Ja. Es liegt unter Apache-2.0 auf Packagist, der Quellcode ist öffentlich auf GitHub. Kein Lizenzschlüssel, kein Abo, keine Bezahlstufe — kommerziell nutzbar, forkbar, und Kundenprojekte dürfen darauf laufen.
Unterstützt es Dark Mode?
Ja, und ohne Build-Schritt. Ein Schalter sitzt neben Konto- und Warenkorb-Symbol auf jeder Breakpoint-Stufe, die Auswahl bleibt im Browser des Besuchers, und die gesamte Palette wird über ein Attribut am html-Element neu bewertet. Ein kleines No-Flash-Skript im Head sorgt dafür, dass Dark-Mode-Besucher nie weiß aufblitzen sehen. Schaltet man die Einstellung ab, werden weder Markup noch Skripte ausgeliefert.
Mit welchen Shopware-Versionen funktioniert es?
Shopware 6.7 und PHP 8.2 oder neuer. Einen 6.6-Zweig gibt es nicht — wer auf 6.6 ist, aktualisiert zuerst.
Kann ich Farben und Layout ohne SCSS ändern?
Ja. Containerbreite, maximale Inhaltsbreite, Abschnittsabstände, Sticky Header, Topbar, Breadcrumb, Navigationsstil und Footer-Spalten sind Theme-Einstellungen, ebenso Eckenradius, Button-Stil, Kartenstil, Bildverhältnis und Rasterspalten je Breakpoint. Tiefere Änderungen sind Token-Werte statt Eingriffe in Komponenten.
Ist es ein fertiges Shop-Design?
Nein, und das mit Absicht. Es ist ein Fundament, auf dem eine Marke entstehen kann — eine stimmige Grundlage über Projekte hinweg statt eines maßgeschneiderten Skins für einen Shop. Es bringt keine eigenen Layouts mit und trifft keine Designentscheidungen für Ihre Marke.
Apache-2.0, auf Packagist — und es läuft auf den Screenshots oben.
Jeder Screenshot auf dieser Seite stammt aus unserem eigenen Demo-Shop, aufgenommen im laufenden Betrieb. Das Theme ist Open Source — lesen, forken oder installieren und weitermachen. Wenn es auf eine Marke zugeschnitten werden soll, reden wir.