Die Shopware Storefront: So funktioniert das Frontend

Die Shopware Storefront ist das, was deine Kunden sehen und erleben. Jede Produktseite, jeder Checkout-Schritt, jede Kategorie-Ansicht, alles, was im Browser landet, kommt aus der Storefront. Wer seinen Shopware-Shop wirklich verstehen will, muss wissen, wie dieses Frontend aufgebaut ist und welche Stellschrauben es gibt.

Was die Storefront genau ist

In Shopware 6 ist die Storefront eine eigenständige PHP-Anwendung, die auf dem Symfony-Framework aufbaut. Sie liegt technisch gesehen über der eigentlichen Commerce-Engine und ist klar von ihr getrennt. Das ist ein wichtiger Unterschied zu Shopware 5, wo Frontend und Backend viel stärker verzahnt waren.

Das bedeutet konkret: Die eigentliche Geschäftslogik, Preisberechnung, Warenkorb, Bestellprozess, sitzt im Shopware-Core. Die Storefront nimmt die Daten aus diesem Core entgegen und rendert daraus HTML-Seiten, die der Browser des Kunden darstellt.

Für das Rendering verwendet Shopware die Template-Engine Twig. Wer schon mit Symfony gearbeitet hat, kennt Twig. Für alle anderen: Twig-Templates sind HTML-Dateien mit eingebetteter Logik, also Schleifen, Bedingungen und Variablen. Sie steuern, in welcher Reihenfolge und in welchem Aussehen Inhalte ausgegeben werden.

Wie ein Seitenaufruf technisch abläuft

Wenn ein Kunde eine Produktseite aufruft, passiert im Hintergrund Folgendes:

1. Die Anfrage trifft den Webserver und landet im Shopware-Routing.
2. Ein Controller holt die nötigen Daten aus dem Core, zum Beispiel Produktinfos, Preise und Verfügbarkeit.
3. Diese Daten werden in ein Template-Context-Objekt gepackt.
4. Twig rendert das passende Template mit diesen Daten zu einer fertigen HTML-Seite.
5. Der Browser empfängt diese Seite und zeigt sie dem Kunden.

Dieser Ablauf passiert serverseitig. Das heißt: Die fertige HTML-Seite kommt vom Server, nicht erst per JavaScript im Browser zusammengebaut. Das ist für SEO ein echtes Plus, weil Google die Inhalte direkt im HTML vorfindet.

Zusätzlich gibt es clientseitiges JavaScript für interaktive Elemente wie das Warenkorb-Flyout, Bild-Galerien oder Formular-Validierungen. Shopware liefert dafür ein eigenes Plugin-System für JavaScript mit.

Das Theme-System und Twig

Das Aussehen der Storefront kommt aus dem Theme. Ein Shopware-Theme ist im Kern ein Bündel aus Twig-Templates, CSS und JavaScript. Du kannst ein Theme entweder im Backend-Theme-Manager anpassen (Farben, Fonts, Logo) oder tiefer eingreifen, indem du ein eigenes Child-Theme erstellst.

Der Mechanismus dahinter heißt Template-Vererbung. Jede Datei im Core-Template kann von einem Theme oder Plugin überschrieben werden, ohne dass der Original-Code angefasst wird. Das Prinzip: Du legst eine Datei mit demselben Pfad in deinem Theme ab, und Shopware verwendet automatisch deine Version. Technisch geschieht das über den Twig-sw_extends-Tag.

Das klingt sauber, hat aber eine Tücke in der Praxis: Wenn mehrere Plugins denselben Template-Bereich überschreiben wollen, kann es zu Konflikten kommen. Wir sehen das regelmäßig bei Projekten, wo sechs oder mehr Plugins aktiv sind. Sorgfältige Reihenfolge und manchmal ein eigenes Zusammenführungs-Template lösen das.

Mehr zu Themes und Twig-Templating findest du im Artikel Shopware Themes und Templating mit Twig erklärt.

Was du ohne Code anpassen kannst

Nicht jede Änderung braucht einen Entwickler. Im Theme-Manager des Backends kannst du:

• Primär- und Akzentfarben anpassen
• Fonts wechseln
• Logo und Favicon hinterlegen
• Abstände und einige Layout-Parameter tweaken

Für Seitenaufbau und Content-Blöcke gibt es die Erlebniswelten. Damit baust du Kategorieseiten, Landing Pages und die Startseite per Drag-and-drop zusammen, ohne Template-Dateien anzufassen. Shopware Erlebniswelten erklärt dieses System im Detail.

Was ohne Code nicht geht: Änderungen an der grundlegenden Seitenstruktur, eigene Checkout-Schritte, komplex angepasste Produktseiten-Layouts oder die Integration externer Dienste per JavaScript. Dafür braucht es entweder ein Plugin oder ein eigenes Theme.

Plugins und die Storefront

Plugins können in die Storefront eingreifen, ohne den Core zu ändern. Die wichtigsten Wege:

• Template-Überschreibung: Ein Plugin legt eigene Twig-Dateien ab und erweitert oder ersetzt damit Teile des Standard-Layouts.
• JavaScript-Plugin: Für clientseitige Interaktionen nutzt ein Storefront-Plugin das Shopware-JS-Plugin-System, das auf dem Plugin-Base-Class-Konzept von Shopware aufbaut.
• SCSS/CSS: Plugins können eigene Stylesheets mitliefern, die beim Build-Prozess zusammengeführt werden.

Das Plugin-System der Storefront ist einer der Gründe, warum Shopware so flexibel erweiterbar ist. Gleichzeitig ist es der häufigste Grund, warum Shops nach vielen Plugin-Installationen langsam oder unübersichtlich werden. Jedes Plugin, das in die Storefront eingreift, verlängert potenziell die Renderzeit und erhöht die Konfliktgefahr.

Einen Überblick über das Plugin-System insgesamt bietet der Artikel Shopware Plugins: Wie das Erweiterungssystem funktioniert.

Storefront oder Headless: Was passt zu dir?

Seit Shopware 6 gibt es eine echte Alternative zur klassischen Storefront: den Headless-Ansatz. Dabei liefert Shopware nur noch die Daten über die Store API aus, und ein eigenes Frontend, zum Beispiel mit Next.js oder einem anderen JavaScript-Framework, übernimmt das Rendering.

Das bietet maximale Flexibilität für das Frontend-Design und theoretisch bessere Performance mit modernen Rendering-Ansätzen. Der Preis ist deutlich höher: Entwicklungsaufwand, laufende Pflege des separaten Frontends und die Notwendigkeit eines Teams, das beides beherrscht.

Für die meisten mittelständischen Händler ist die klassische Storefront die richtige Wahl. Sie ist schnell, SEO-freundlich, gut wartbar und hat ein starkes Ökosystem aus Themes und Plugins. Den Headless-Weg gehst du, wenn du sehr individuelle UX-Anforderungen hast oder ein Frontend-Team mitbringst. Mehr dazu im Artikel Shopware Headless: Composable Frontends und Store API.

Häufige Fragen

Kann ich das Design meiner Storefront komplett selbst gestalten?

Grundsätzlich ja, aber der Aufwand hängt davon ab, wie weit du vom Standard abweichen willst. Farben, Fonts und viele Layout-Einstellungen sind ohne Code machbar. Ein individuelles Design mit eigenem Seitenaufbau, speziellen Produktseiten-Layouts oder angepasstem Checkout erfordert ein eigenes Child-Theme und damit Entwicklungsarbeit.

Was kostet ein angepasstes Shopware-Theme?

Das lässt sich nicht pauschal sagen, weil es stark vom Umfang abhängt. Ein einfaches Child-Theme mit Farb- und Logo-Anpassungen ist in wenigen Stunden erledigt. Ein vollständig eigenes Design mit individuellem Seitenaufbau, eigenen Komponenten und mobile-optimierten Layouts liegt je nach Komplexität im Bereich einiger Tausend bis zu mehreren Zehntausend Euro. Eine ehrliche Einschätzung bekommst du immer erst nach einer konkreten Anforderungsanalyse.

Funktioniert die Shopware Storefront gut auf Mobilgeräten?

Die Standard-Storefront ist von Haus aus responsive und mobiloptimiert. Probleme entstehen meistens durch Plugins oder Custom-Code, der nicht konsequent für alle Bildschirmgrößen entwickelt wurde. Wer viele Drittanbieter-Plugins einsetzt, sollte das mobile Verhalten regelmäßig testen, vor allem nach Updates.

Wie wirkt sich die Storefront auf mein Google-Ranking aus?

Sehr direkt. Die Storefront rendert HTML serverseitig, was Google gut lesen kann. Problematisch werden Core Web Vitals, wenn zu viele Skripte geladen werden, Bilder nicht optimiert sind oder das Hosting nicht passt. Eine sauber konfigurierte Shopware-Storefront kann sehr gute Lighthouse-Werte erreichen, aber das passiert nicht von allein.

Nächste Schritte

Wenn du wissen willst, wie deine Storefront aktuell aufgestellt ist, ob technische Schulden schlummern oder wo Performance-Potenzial liegt, schau dir unsere Shopware-Betreuung und Wartung an. Wir schauen uns deinen Shop konkret an und sagen dir, wo wir ansetzen würden.