Es wurde Zeit für einen ausführlichen Beitrag zum Thema Shopware 6 Childtheme. Nachfolgend findest du alle wichtigen Infos, damit du nicht länger woanders suchen musst.
Übersicht: Shopware Childtheme
- 1. Was ist ein Shopware Childtheme
- 2. Was heißt updatesicher
- 3. Themes sind jetzt Plugins
- 4. Plugins im Vergleich zu Apps
- 5. Childtheme vs viele kleine Plugins
- 6. Völlig unbeachtet: Pagespeed und SEO Vorteile
- 7. Keine Option mehr im Admin / Backend
- 8. Shopware Standard-Theme Childtheme erstellen
- 9. Ein Wort zum TechnischenThemeNamen
- 10. Shopware Premium-Theme Childtheme erstellen
- 11. Was muss man noch beachten
- 12. Pimp my composer.json Datei
- 13. theme.json Datei polieren
- 14. Shopware Childtheme aktivieren und zuordnen
- 15. Erste Anpassung mit Twig: Copyright Logo raus
- 16. Erste Anpassung mit SCSS
- 17. Erste Anpassung mit Javascript
- 18. Changelog Datei anlegen
- 19. Readme Datei anlegen
1. Was ist ein Shopware Childtheme
Ok es muss endlich ein Beitrag zum Thema Shopware 6 Childtheme anlegen her. Hier ist er. Einfach aus Prinzip, dass ich nicht noch einmal woanders gucken muss.
Ein Shopware Childtheme ist eine abgeleitete Version eines bestehenden (übergeordneten) Themes in Shopware, das dessen Eigenschaften und Funktionalitäten erbt. Das Childtheme ermöglicht es, individuelle Anpassungen am Design, Layout oder der Funktionalität des Shops vorzunehmen, ohne die Original-Theme-Dateien zu verändern.
Dadurch bleiben die eigenen Änderungen bei Updates des Parent-Themes erhalten und der Shop bleibt updatesicher. Das Childtheme bietet eine strukturierte und wartungsfreundliche Möglichkeit, den Shop flexibel nach eigenen Vorstellungen zu gestalten und ist besonders dann sinnvoll, wenn man regelmäßige oder tiefgreifende Anpassungen plant.
Geheimtipp: Spar dir den Rest des Beitrags und hol dir für ca. 5 € / Monat dieses Plugin um die Anpassungen im Admin Bereich zu machen, statt dich mit FTP, Terminal und Editoren rumzuschlagen: Custom Template Manager. Oder lies den Beitrag durch und spare in 10 Jahren 600 €.
2. Was heißt updatesicher
Updatesicher bedeutet im Zusammenhang mit einem Shopware Childtheme, dass individuelle Änderungen am Design oder Funktionen nicht verloren gehen, wenn das Parent-Theme oder Shopware selbst aktualisiert wird. Da die Anpassungen im Childtheme liegen und nicht direkt die Originaldateien des Parent-Themes verändert werden, bleiben diese Einstellungen und Programmierungen bei Updates bestehen.
So kann man problemlos neue Versionen und Sicherheitsupdates installieren, ohne dass eigene Anpassungen überschrieben oder entfernt werden. Dadurch spart man nicht nur Zeit, sondern minimiert auch den Wartungsaufwand und stellt die langfristige Funktionsfähigkeit des Shops sicher. Wer also Änderungen an seinem Standard-Theme oder auch an seinen gekauften Premium Themes vornimmt sollte davor grundsätzlich immer ein Childtheme anlegen.
3. Themes sind jetzt Plugins
Mit dem Wechsel von Shopware 5 zu Shopware 6 gab es eine grundlegende Veränderung im Theme-System: Während Themes in Shopware 5 eine eigene Erweiterungsart mit eigenem Ordner und eigenständiger Struktur waren, sind sie in Shopware 6 technisch gesehen nun ebenfalls Plugins. Das bedeutet, ein Theme wird genauso wie ein Plugin installiert, aktiviert und verwaltet. Im Unterschied zu früher integriert sich das Theme direkt in das neue Plugin-System und profitiert von dessen Vorteilen, wie einheitliche Verwaltung, leichtere Updates und die moderne Technologie-Basis.
Diese Umstellung macht die Entwicklung und Pflege von Themes deutlich flexibler und effektiver als im alten SW5-Ansatz, wo Themes und Plugins komplett getrennt waren und oft separat behandelt werden mussten. Für Neueinsteiger doe vorher nur Shopware 5 genutzt haben ist es anfangs eine kleine Umstellung aber man gewöhnt sich schnell daran. Man findet alle Plugins, Themes und Childthemes im Ordner:
/src/custom/pluginsEs ist also nicht mehr so, dass das Eltern- und Parenthese an unterschiedlichen Orten liegen. Die Familie darf in Shopware 6 zusammen ein einem Ordner leben.
4. Plugins im Vergleich zu Apps
Neben Plugins gibt es in Shopware 6 auch sogenannte Apps. Während Plugins direkt in das Shopware-System integriert werden und meist umfangreiche Logik oder tiefgreifende Änderungen am Shop vornehmen, sind Apps in erster Linie für eine flexible Anbindung von externen Services gedacht und laufen häufig unabhängig vom Shop-Server.
Apps und Plugins unterscheiden sich also hauptsächlich in ihrer technischen Umsetzung und ihrem Anwendungsbereich. In diesem Beitrag konzentrieren wir uns jedoch ausschließlich auf Plugins, da sie die Grundlage für die meisten Erweiterungen und individuellen Anpassungen im Shop bilden.
- Apps sind cloud-fähig, Plugins nur im Self-Hosting.
- Erweiterungen im Plugin Store: Apps empfohlen.
Kurz gesagt: Dieser Beitrag ist für dich, wenn du ein Childtheme nichts als App sondern als „normales“ Plugin anlegen willst.
5. Childtheme vs viele kleine Plugins
Erweiterungen am Theme bringen gegenüber einzelnen Plugins zur Anpassung des Frontends mehrere Vorteile: Durch die Integration aller Anpassungen in einem oder wenigen Themes bleibt die Shop-Struktur übersichtlich und wartungsfreundlich. Viele Plugins, speziell wenn sie nur kleine Einzelanpassungen vornehmen, erhöhen die Komplexität und potenziellen Fehlerquellen im Shop, da jedes Plugin separat gewartet werden muss und zu Konflikten mit anderen Erweiterungen oder Updates führen kann.
Ein Theme kann dagegen das Design und Frontend-Funktionalität ganzheitlich steuern, sodass alles konsistent und ohne redundante Funktionalität bleibt. Fehlerquellen werden minimiert, die Performance verbessert sich oft und die Aktualisierung des Shops wird einfacher, weil weniger Fremdcode beteiligt ist, der bei Updates Probleme bereiten könnte. Anpassungen am Theme sind also die nachhaltigere und professionellere Lösung für individuelle Shop-Designs und Funktionen.
- Mache kleine Frontend Anpassungen sofern möglich immer innerhalb eines Childthemes anstatt auf viele kleine Plugins zu setzen.
- Konsistentes Design und weniger Fehlerquellen.
6. Völlig unbeachtet: Pagespeed und SEO Vorteile
Woran die wenigsten bei der Nutzung von Childthemes denken sind die beiden Themen Pagespeed und SEO. Jeder weiß, dass Pagespeed die Wichtigkeit von Keywords überboten hat und zu den Hauptgründen von Abwertungen bei Google gehört. Heißt: Pagespeed-Optimierung = SEO.
Denn wie wir im letzen Punkt gelernt haben trägt ein Childtheme dazu bei, dass der Shop schlanker und effizienter bleibt, weil unnötige oder mehrfach vorhandene Frontend-Code-Anpassungen vermieden werden. Werden Anpassungen direkt ins Theme integriert statt über viele einzelne Plugins, reduziert dies die Anzahl der notwendigen Ressourcen (wie CSS und JavaScript-Dateien), was die Ladezeit des Shops beschleunigt.
Eine geringe Ladezeit führt zu einer niedrigeren Absprungrate und verbessert die User Experience deutlich – Google bewertet genau diese Kriterien als wichtige Rankingfaktoren für SEO. Ein schneller Shop wird bevorzugt gewertet und erhält somit bessere Platzierungen in den Suchergebnissen. Weniger Plugins bedeuten außerdem weniger potenzielle Fehlerquellen, weniger unnötiger Quellcode und damit eine sauberere, für Suchmaschinen besser auswertbare Website-Struktur. Das minimiert technische Risiken und sorgt für langfristig bessere Sichtbarkeit und Conversion Rates.
Kurz gesagt: Childthemes steigern Pagespeed, senken Fehlerquellen und sorgt für bessere Absprungraten und damit vollautomatisch auch für mehr Umsatz.
7. Keine Option mehr im Admin / Backend
In Shopware 5 konntest du Childthemes einfach direkt im Backend über den Theme Manager anlegen oder manuell im Dateisystem erstellen, und die Ableitung war etwas anfängerfreundlicherr: Die Vererbung und Anpassung eines Eltern-Themes erfolgte mit wenigen Klicks und einer übersichtlichen Struktur. In Shopware 6 ist das Anlegen eines Childthemes technischer geworden und erfordert zwingend den Einsatz der Konsole. Aber ist, wenn man es einmal gemacht hat, trotzdem relativ einfach.
8. Shopware Standard-Theme Childtheme erstellen
Ok genug gesülzt, kommen wir zum Haupt-Thema des Tages: Der Erstellung eines Child-Themes. Hierbei gehen wir mal vom Standard-Theme (Storefront) aus und leiten es ab. Ich arbeite dabei auf einer lokalen Shopware Installation mit Dockware.Ich bewege mich im Terminal / der Konsole in den Shopware Ordner und führe dort folgenden Befehl aus:
bin/console theme:create
In der nächsten Millisekunde werden ich nach dem Theme-Namen gefragt. Hierbei ist folgendes zu beachten, dass der Theme-Name eindeutig und möglichst kurz gewählt wird, keine Leer- oder Sonderzeichen enthält und vorzugsweise in CamelCase geschrieben wird, damit es später zu keinen Problemen bei der Verwaltung und Verwendung des Themes kommt.
Shopware-Childtheme – ThemeName
Ich mache es einprägsam und nenne das Theme StorefrontChildTheme in CamelCase. Das hat nichts mit Kleidung oder Tabak zu tun. CamelCase bedeutet, dass alles zusammengeschrieben wird und der erste Buchstabe eines Worts immer groß geschrieben wird, , damit es später zu keinen Problemen bei der Verwaltung und Verwendung des Themes kommt. .
Ich kriege folgende Bestätigung:
Creating theme structure under /var/www/html/custom/plugins/StorefrontChildThemeAußerdem sehe ich jetzt im Plugins Ordner den neuen (Theme)-Plugin Ordner StorefrontChildTheme.
Shopware-Childtheme – Ordner
Damit ist das neue Theme auch bereits schon bereit und kann verwendet werden.
9. Ein Wort zum TechnischenThemeNamen
Wer Themes oder Plugins generell für den Store erstellt, verwendet in der Regel im (technischen) Namen des Plugins noch ein Präfix. Bei Shopware Plugins ist das zum Beispiel „Swag“, was für Shopware AG steht. Bei unseren Plugins hingegen fangen die Namen immer mit „Great“ an.
Das Präfix sorgt für eine eindeutige Zuordnung und verhindert Namenskonflikte, speziell wenn mehrere Entwickler oder Agenturen im selben Projekt arbeiten. Es schafft außerdem Übersichtlichkeit und erleichtert die technische Wartung, weil auf den ersten Blick erkennbar ist, von wem die Erweiterung stammt. Im Normalfall würde ich das Theme also entsprechend nennen: GreatStorefrontChildTheme. Mit dieser Struktur bleibt der Store langfristig sauber und die Erweiterungen sind einfacher zu verwalten oder zu aktualisieren.
Falls du planst, mehrere Plugins zu erstellen, solltest du dir ein einheitliches Präfix überlegen und dieses konsequent für alle deine Plugins und Themes verwenden – so wie es auch professionelle Agenturen handhaben. Das erleichtert die Zuordnung und sorgt für Übersichtlichkeit in deinem Projekt. Außerdem denken die anderen Agenturen dann, dass du auch ein Profi bist und sehen jedes Mal Schleichwerbung wenn Sie sich per FTP in einen Shop einloggen und in den Plugins Ordner gucken.
10. Shopware Premium-Theme Childtheme erstellen
Kurze Erklärung: Mit Premium Themes meine ich grundsätzlich alle (!) anderen Themes außer dem Storefront Theme. Es muss also weder teuer sein, noch gut aussehen. Hauptsache es hört nicht auf den Namen Storefront.
Hintergrund: Sobald man ein Theme anlegt, wird bei der Erstellung das Storefront Theme automatisch schon zugeordnet, weil irgendein ein Theme muss ja einfach abgeleitet werden. Wie gehe ich also vor, wenn nicht das Storefront sondern ein anderes Theme, beispielsweise aus dem Shopware Store, abgeleitet werden soll? Der erste Schritt ist identisch. Wir legen genau so wie in dem anderen Schritt ein Plugin an. Hier noch einmal die Zeile, damit hier keiner einen Finger krumm machen muss:
bin/console theme:createWählt einen Camel case Namen wenn ihr danach gefragt werdet, sagen wir mal: GreatCamelStore. Aber wehe du benutzt unsere Präfix! Hast du dir schon ein cooles eigenes Präfix überlegt? Nutze dein Präfix und dann am besten die Domain des Stores, wo das Theme eingesetzt werden soll. Für den Sprit-Schleuder Store nutzen wir z.B.: GreatSpritSchleuder. Aber das ist eigentlich geheim.
Also weiter geht’s.
Wir gehen jetzt mal davon aus, dass ihr unser hauseigenes Theme mit den Namen DreamTheme ableiten wollt. Dafür öffnen wir im Order des neuen Plugins die Datei: src/Resources/theme.json. Hier schauen wir uns den Bereich Views genauer an, wo nun 3 Einträge zu sehen sind:
"views": [
"@Storefront",
"@Plugins",
"@StorefrontChildTheme"
],
Was jetzt noch reingehört ist der Name des Eltern-Themes. Wird das DreamTheme genutzt sähe es also so aus:
"views": [
"@Storefront",
"@GreatDreamThemeSW6",
"@Plugins",
"@StorefrontChildTheme"
],
Das Frontend wird nun in der Reihenfolge aufgebaut, wie die Liste strukturiert ist.
Und wer sich jetzt fragt, woher man den Namen des anderen Themes bekommt: Es ist der Ordnername des anderen Plugins / Themes. Der Technische Name über den wir oben schon einiges erfahren haben wird nicht nur im Code, sondern eben auch als Name des Plugins verwendet.
11. Was muss man noch beachten
Der Ordnername des Elternthemes ist dann auch der technische Name, den ihr für die Ableitung braucht. Also vorher Präfix und einheitliche Benennung festlegen!
12. Pimp my composer.json Datei
An sich passt jetzt schon alles aber Platz für kleine Optimierungen ist noch da. Also geht’s los. Wir passen 2 Dateien noch was an. Als erstes steht die composer.json Datei an. Wo du liegt weiß ich nicht und verrate ich auch nicht.
Aber die sieht so aus:
{
"name": "swag/theme-skeleton",
"description": "Theme skeleton plugin",
"type": "shopware-platform-plugin",
"license": "MIT",
"autoload": {
"psr-4": {
"StorefrontChildTheme\\\\": "src/"
}
},
"extra": {
"shopware-plugin-class": "StorefrontChildTheme\\\\StorefrontChildTheme",
"label": {
"de-DE": "Theme StorefrontChildTheme plugin",
"en-GB": "Theme StorefrontChildTheme plugin"
}
}
}
Nach einer kleinen Optimierung würde die aber dann so aussehen:
{
"name": "great/storefront-child-theme",
"description": "Storefront Child Theme",
"type": "shopware-platform-plugin",
"license": "MIT",
"version": "0.0.1",
"authors": [
{
"name": "great2gether"
}
],
"require": {
"shopware/core": "6.6",
"great/dreamtheme": "*"
},
"autoload": {
"psr-4": {
"StorefrontChildTheme\\\\": "src/"
}
},
"extra": {
"shopware-plugin-class": "StorefrontChildTheme\\\\StorefrontChildTheme",
"label": {
"de-DE": "Storefront Kinder-Theme",
"en-GB": "Storefront Child-Theme"
},
"plugin-icon": "plugin.png",
"copyright": "(c) by great2gether",
"description": {
"de-DE": "Child-Theme abgeleitet vom Storefront Theme",
"en-GB": "Child theme plugin from the storefront theme"
}
}
}Anpassungen:
- name: a) Eigenes Präfix verwendet (aber klein geschrieben), b) Platzhalter Namen ausgetauscht
- description: a) Standard Beschreibung ersetzt
- license: Mit der MIT Lizenz markiert ihr das Plugin als kostenlos, soll es im Shopware Store angeboten werden nutzt ihr statt MIT die Lizenz „proprietary“
- authors > name: Shopware raus deinen (Agentur-) Namen rein, bei Bedarf.
- label > Standard austauschen
- require: a) Wir haben Shopware 6 als Mindestversion festgelgt. b) Mit der require Zeile dadrunter haben wir das Plugin zudem gezwungen sich nur installieren zu lassen, wenn das Elterntheme überhaupt installiert ist. Braucht man nicht, kann aber Fehler vermeiden also rein damit. Den Namen findet man in der composer.json Datei des Themes von dem wir ableiten wollen. Vorne steht das Präfix und dahinter der Name, wie in der 2. Zeile unserer BBispieldatei. WICHTIG: Wer vom Storefront Theme ableitet braucht diese Zeile nicht.
- plugin-icon: Es wird ein Icon eingebunden, die dazugehörige Datei wird auf der obersten Ebene unsere PLugin-Ordners abgelegt. Die Bilddatei sollte 40x40px haben und könnte z.B. das Logo / Icon der Seite sein. Das Icon wird später in der PLugin Liste angezeigt werden.
- copyright: selbsterklärend
- description: sieht cool aus im Admin Bereich und ist Pflicht für kommerzielle Plugins
So das war’s die src/custom/plugins/StorefrontChildTheme/composer.json Datei wurde offiziell gepimpt.
13. theme.json Datei polieren
Lappen und Politur bereit? Dann kann’s losgehen. Autragen, polieren. Auftragen, polieren. Auftragen, polieren.
Aktuell sieht es jetzt bei uns ungefähr so aus:
{
"name": "StorefrontChildTheme",
"author": "Shopware AG",
"views": [
"@Storefront",
"@Plugins",
"@StorefrontChildTheme"
],
"style": [
"app/storefront/src/scss/overrides.scss",
"@Storefront",
"app/storefront/src/scss/base.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/storefront-child-theme/storefront-child-theme.js"
],
"asset": [
"@Storefront",
"app/storefront/src/assets"
]
}Entferne Shopware AG und trage deinen alten Counter Strike Spieler Namen ein. Wenn du zusätzlich noch die Einstellungen (also das was man im Admin Bereich einstellt) des Standard Themes übernehmen willst kannst du vor der letzen Klammer noch das hier einbinden:
"configInheritance": [
"@Storefront"
]
Vergiss aber nicht hinter der zweitletzten Klammer, bzw. hinter der letzen eckigen klammer, vorher ein Komma zu setzen. Wolltest du keine 10 Millionen Einstellungen im Storefront gemacht haben, die du unbedingt noch übernehmen willst kannst es aber aber getrost weglassen, wie einen Kropf.
So muss es aussehen:
{
"name": "StorefrontChildTheme",
"author": "great2gether",
"views": [
"@Storefront",
"@Plugins",
"@StorefrontChildTheme"
],
"style": [
"app/storefront/src/scss/overrides.scss",
"@Storefront",
"app/storefront/src/scss/base.scss"
],
"script": [
"@Storefront",
"app/storefront/dist/storefront/js/storefront-child-theme/storefront-child-theme.js"
],
"asset": [
"@Storefront",
"app/storefront/src/assets"
],
"configInheritance": [
"@Storefront"
]
}So jetzt habt ihr ein vollendet veredeltes, 1a, tip top, erste Sahne Premium Childtheme. Wahlweise vom Storefront oder einem anderem Theme abgeleitet. Glückwunsch.
Haut noch kurz das hier in die Konsole ohne darüber nachzudenken was es überhaupt macht:
bin/console theme:refresh
bin/console theme:compile
bin/console cache:clearFalls du neue Javascript Dateien eingebunden / erweitert hast, kannst du noch das hier mitnehmen:
./bin/build-storefront.shMehr dazu in den Shopware Developer Docs:
https://developer.shopware.com/docs/guides/plugins/plugins/storefront/override-existing-javascript.html
14. Shopware Childtheme aktivieren und zuordnen
Was aktiviert werden will, darf vorher noch installiert werden. Geht dafür in den Bereich Erweiterungen > und dann auf den Themes Reiter, also genau hier:
Shopware-Childtheme – Plugin-Liste
Von hier aus kann das Theme nun installiert und aktiviert werden. Easy Peasy. Um noch zu prüfen ob es funktioniert muss es einem Verkaufskanal zugeordnet werden, dann kannst du gucken.
Aktives Theme
Erst gehst du hier hin (s. oben) – dann wählst du hier aus:
Auswahl
Speichern. Fertig. Wie Trappatoni. Wenn sich nichts geändert hat, hast du es erfolgreich geändert.
15. Erste Anpassung mit Twig: Copyright Logo raus
Es gibt grundsätzlich 2 unterschiedliche Sachen die wir im Childtheme treiben können. Mit Twig Sachen ergänzen oder verschwinden lassen oder mit SCSS Farben, Rahmen, Abstände und solche Sachen anzupassen. Javascript und Co, kann man natürlich auch einbinden, aber das ist nur für die ganz Krassen.
Wir fange mit einer lockeren Fingerübung an und entfernen mal das Shopware Logo aus unserem Footer. Das ist ganz unten und sieht in einem professionellen Shop schlicht unprofessionell aus.
Shopware Copyright-Logo
Hierfür müssen wir wissen in welcher Datei im Elterntheme (also dem Storefront Theme) das Logo zu finden ist. Ich verrate es euch kurz:
src/vendor/shopware/storefront/Resources/views/storefront/layout/footer/footer.html.twigda findet ihr diesen Block:
{% block layout_footer_copyright %}{% endblock %}
Da steckt der Copyright Text und das Logo drin.
Um es im eigenen Childtheme auszublenden, legst du dieselbe Ordnerstruktur im Childtheme an:
/plugins/ThemName/src/Resources/views/storefront/layout/footer/footer.html.twigund überschreibst dort die Datei logo.html.twig mit folgendem Inhalt:
{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}
{% block layout_footer_copyright %} {% endblock %}
Mit der ersten Zeile legt ihr fest welche Datei überschrieben werden soll und unten fügt ihr den Block ein, der überschrieben wird. Der Block geht auf uns zu, der Inhalt ist leer. Ladet die Datei hoch, leert den Cache und das Logo und der Copyright Text sind weg.
Und hier liegt die Datei, wie gesagt:
Footer-Datei
So klappt es und euer Shop sieht direkt extrem professionell aus. Glückwunsch zu deiner ersten Template Anpassung mit Twig.
16. Erste Anpassung mit SCSS
Eine erste einfache Anpassung im Childheme wäre zum Beispiel einfach mal die ganze Seite auszublenden, was zu weniger Warenkorbabbrüchen führen würde. Da alle Elemente ausgeblendet werden wird auch euer Pagespeed von dieser simplen Anpassung profitieren. ;)
Ihr sucht und findet die Datei: base.scss
Da schreibt ihr rein:
body {display: none}
Jetzt kommt der Unterschied, zu Anpassungen an und mit Twig Dateien:
Während ihr bei Twig Dateien nach der Anpassung den Cache löschen müsst (entweder im Admin Bereich was kompliziert ist, oder im Terminal, was cooler ist) bedarf einer nach einer Anpassung an den SCSS Dateien einer Neukompilierung des Themes.
Im Admin gibt es zwar keinen Button, der ausschließlich das macht, aber wenn man in den Bereich Inhalte > Themes > auf dein Theme gehst und auf den Speichern Button klickst passiert genau das. Zum einen werden hierbei etwaig geänderte Einstellungen am Theme gespeichert, und zum anderen eben das Theme kompiliert, was ein paar Sekunden dauern kann. Wenn es schnell gehtrist du eventuell an der falschen Stelle, nämlich bei der Theme Zuordnung.
Möchtest du das Theme über die Konsole kompilieren, was ich empfehle, machst du das am besten in Kombination mit dem Cache löschen, so:
bin/console theme:refresh
bin/console theme:compile
bin/console cache:clear
Lade die Seite neu, notfalls 2x. Ist der gesamte Inhalt verschwunden? Sehr gut, dann bist du jetzt schon fast ein professioneller Shopware 6 Childtheme-Designer. Weiter so und viel Erfolg.
17. Erste Anpassung mit Javascript
Um Anpassungen an den originalen JavaScript-Einstellungen aus dem Storefront-Theme vorzunehmen, müssen wir – ähnlich wie bei den Twig-Dateien – als Erstes die anzupassende Datei im Core finden. In unserem Beispiel wollen wir die Verzögerung beim Öffnen des Flyout-Menüs („Debounce Time“) ändern.
Unser Ziel: Die Verzögerung beim Öffnen des Flyout-Menüs deutlich erhöhen.
Unsere Datei im Core:
flyout-menu.plugin.js
Und der Pfad:
src/vendor/shopware/storefront/Resources/app/storefront/src/plugin/main-menu/flyout-menu.plugin.js
Um diese Datei zu überschreiben, legen wir sie im eigenen Theme-Plugin mit exakt gleicher Verzeichnisstruktur an:
src/custom/plugins/GreatDreamThemeSW6/src/Resources/app/storefront/src/plugin/main-menu/flyout-menu.plugin.js
Der technische Name deines Themes (hier „GreatDreamThemeSW6“) muss natürlich angepasst werden.
Inhalt der neuen Datei (JavaScript):
import CoreFlyoutMenuPlugin from 'src/plugin/main-menu/flyout-menu.plugin';
export default class FlyoutMenuPlugin extends CoreFlyoutMenuPlugin {
static get options() {
return {
...super.options,
debounceTime: 600 // Beispielwert: 600 ms Verzögerung
};
}
init() {
console.log('Custom FlyoutMenuPlugin geladen', this.options);
super.init();
}
}
Registrierung des Overrides in der main.js:
const PluginManager = window.PluginManager;
PluginManager.override('FlyoutMenu', () => import('./plugin/main-menu/flyout-menu.plugin'), '[data-flyout-menu]');
console.log('FlyoutMenuPlugin Override aktiv!');
Wenn sich nichts ändert, hilft es oft:
- Den
dist-Ordner im Theme löschen:
rm -rf custom/plugins/GreatDreamThemeSW6/src/Resources/app/storefront/dist - Cache leeren:
./bin/console cache:clear - Theme neu kompilieren:
./bin/console theme:compile - Storefront Assets neu bauen:
npm --prefix custom/plugins/GreatDreamThemeSW6/src/Resources/app/storefront run dev
oder eigenes Build-Skript wie
./bin/build-storefront.sh - Browser-Cache hart leeren (meist Strg+F5).
FAQ & Troubleshooting:
- Erweiterung wird nicht wirksam? Verzeichnisstruktur, Builds und Theme-Aktivierung prüfen!
- Async-Import Pflicht seit Shopware 6.6: Override IMMER mit
() => import(...)! - Nur ein Override pro Plugin-Name – Dopplungen vermeiden.
Zusatz-Tipp:
Wenn du die Verzögerung dynamisch über das Backend steuern möchtest, definiere den Wert in der theme.json deines Themes und übergib ihn via Twig/JS (z. B. window.themeConfig).
Mit diesen Schritten bist du für Updates und individuelle Anpassungen an Shopware-Storefront-JavaScript bestens gerüstet!
18. Changelog Datei anlegen
Es empfiehlt sich, für jedes Shopware Childtheme eine eigene CHANGELOG.md-Datei im Projekt anzulegen. Darin dokumentierst du alle Änderungen, Updates und Anpassungen am Theme verständlich und chronologisch. So behalten nicht nur du, sondern auch andere Entwickler und Nutzer jederzeit den Überblick, welche Version welche Features, Bugfixes oder Optimierungen enthält.
Ein gepflegter Changelog erleichtert nachhaltige Wartung, hilft bei Fehleranalysen und sorgt für Transparenz – besonders bei Teamarbeit, Support-Fällen oder der Veröffentlichung im Shopware Store. Zudem ist er bei professionellen Softwareprojekten längst Standard und vermittelt Zuverlässigkeit und Professionalität.
Die CHANGELOG.md wird idealerweise im Markdown-Format geschrieben, da sich dieses einfach lesen und vielseitig nutzen lässt. Markdown bietet zudem eine klare und übersichtliche Struktur, mit der du verschiedene Versionen, Listen und Hinweise schnell darstellst. So bleibt der Changelog nicht nur für dich, sondern auch für andere Teammitglieder und Nutzer verständlich und direkt nutzbar – egal ob im Editor, auf GitHub oder im Shopware Store.
## [1.0.1] - 2025-08-18
### Geändert
- SCSS-Fehler im Footer behoben
- Kompatibilität mit Shopware 6.7 verbessert
## [1.0.0] – 2025-07-01
### Hinzugefügt
- Erstes Release des Childthemes mit individuellen Farben und Startseiten-LayoutDurch die Nutzung von Markdown kannst du Updates, Bugfixes und neue Features übersichtlich und sauber dokumentieren. Wenn du es richtig professionell machen willst legst du sowohl eine CHANGELOG.md und eine CHANGELOG_de-DE.md an und dokumentierst deine Anpassungen auf deutsch und englisch.
Eine Changelog Datei ist besonders empfehlenswert wenn du planst mehr als 2, 3 kleine Anpassungen zu machen und insbesondere wenn du das Theme im Store verkaufen möchtest. Die CHANGELOG.md datei legen wir in der Regel auf der obersten Ebene des Childtheme-Plugin-Ordners an.
19. Readme Datei anlegen
Zusätzlich zur CHANGELOG.md-Datei sollte jede Theme- oder Plugin-Entwicklung unbedingt eine eigene LIESMICH.md bzw. README.md beinhalten. In dieser Datei gibst du eine kompakte Übersicht über das Projekt: Was macht das Childtheme, welche Features sind enthalten, wie kann das Theme installiert und konfiguriert werden und welche Voraussetzungen sind nötig. Die README hilft dir und anderen Entwicklern, das Projekt schnell zu verstehen und richtig einzusetzen. Sie ist außerdem der erste Anlaufpunkt für Nutzer und Support – und mittlerweile ein professioneller Standard bei jeder Softwareveröffentlichung. Mit klaren Hinweisen, Installationsanleitungen und ggf. Screenshots oder Links steigerst du die Nutzerfreundlichkeit erheblich.
Weiterführende Links:
Shopware Docs – Änderungen am Theme vornehmen:
https://docs.shopware.com/de/shopware-6-de/tutorials-und-faq/aenderungen-am-template-vornehmen
Shopware Developer Docs:
https://developer.shopware.com/docs/guides/plugins/themes/differences-plugins-and-apps-vs-themes.html
Wenn dieser Beitrag hilfreich war, oder du mindestens einmal laut lachen musstest lass ein Kommentar da, abonnier unseren YouTube Channel, folge uns auf Instagram und bestell unser Shopware 6 Praxisbuch vor.
