Shopware 5 Child Theme anlegen:
Schritt für Schritt Anleitung, Tutorial
In diesem Beitrag zeige ich dir Schritt für Schritt, wie du in Shopware 5 ein Child Theme anlegen kannst. Die Verwendung hat den großen Vorteil, dass du deine Anpassungen nicht direkt am Basis-Theme oder Plugin vornehmen und damit nicht riskieren musst, dass deine Änderungen bei Updates überschrieben werden oder du vielleicht sogar den Support durch den Plugin-Hersteller verlierst.
Video
Was ist ein Child Theme und wofür benötige ich es?
Möchtet ihr ein von euch verwendetes Theme anpassen, bietet es sich bei Shopware 5 in den meisten Fällen an, ein Child Theme dafür zu verwenden.
Ein Child Theme in Shopware 5 ist eine Ableitung eines bestehenden Themes, an dem Ihr die Basis nach euren Bedürfnissen anpassen oder erweitern könnt, ohne dabei zu riskieren, dass du die Update-Fähigkeit oder den gewährleisteten Support durch den Hersteller verlierst. Ableitung heißt, dass dein Theme alle Eigenschaften und Funktionen übernimmt, die dessen Basis bietet und sozusagen darauf aufbaut - es erweitert diese. Du kannst es also verwenden, um auf einem bestehenden Shopware 5 Theme aufbauend deine individuellen Anpassungen vorzunehmen.
In dieser Anleitung zeige ich euch Schritt für Schritt, wie ihr das in Shopware 5 macht und was es dabei zu beachten gibt.
SEO-ready Premium-Theme vom Orangebytes
Flexibel anpassbar
SEO-ready - optimierter Quellcode
12 Monate Plugin-Support inklusive
30 Tage kostenlos testen - ohne Risiko
Child Theme im Shopware 5 Backend anlegen
Ein Child Theme könnt ihr in Shopware 5 im Theme Manager anlegen. Dazu gehen wir ins Backend und navigieren über die Hauptnavigation zu "Einstellungen" > "Theme Manager".
Dort findet ihr eine Übersicht aller installierter Themes und habt außerdem weitere Möglichkeiten, wie dem Shop ein aktuelles Theme zuzuweisen, die Theme-Einstellungen zu bearbeiten oder eben auch ein Child Theme anzulegen.
Um das zu tun nutzen wir die Schaltfläche "Theme erstellen", am oberen Rand des Theme-Manager-Fensters. Um die Basis zu wählen, die wir erweitern möchten, nutzen wir das Dropdown "Ableiten von" und wählen unser Theme aus. Im Beispiel nutzen wir das Singature Theme.
Wichtig ist darauf zu achten, dass Ihr im Feld "Name" einen entsprechend sinnvollen Namen vergebt, der im Quellcode genutzt werden kann, sprich am besten ohne Sonder- oder Steuerzeichen, außer dem Underscore und dem Bindestrich. Der Name wird für den Benutzer nicht sichtbar, sondern nur im Code verwendet und bestimmt u.A. wie euer Ordner heist. Im Beispiel verwenden wir "OrangebyteSignatureChild". "Orangebyte" ist dabei unser Hersteller-Präfix, "Signature" das Theme und "Child" die Abwandlung. Ihr könnt das allerdings frei so wählen wie ihr das möchtet. Das Feld "Kurzbeschreibung" gibt den Namen an, der im Backend lesbar ist, wenn zum Beispiel ein Nutzer im Theme-Manager unterwegs ist. Hier sollte ein möglichst gut lesbarer und verständlicher Name verwendet werden. Den Inhalt der restlichen Feldern könnt ihr im Grunde nach Belieben wählen. Diese sind für diese Anleitung nicht weiter relevant.
Anschließend klicken wir auf "Speichern" und Shopware generiert für uns alle Ordner und Dateien die notwendig sind. Damit haben wir bereits ein funktionierendes Child Theme erstellt. Im nächsten Abschnitt zeige ich euch, wie ihr das Child Theme bearbeiten und anpassen könnt.
Child Theme bearbeiten, anpassen und erweitern
Um das Child Theme zu bearbeiten benötigen wir ein FTP-Programm. Ich verwende WinSCP, aber auch andere Tools wie Filezilla sind vollkommen in Ordnung.
Unser kürzlich angelegtes Child Theme befindet sich im Ordner "/themes/Frontend/[ChildThemeName]", ausgehend vom Hauptordner der Shopware-Installation. Shopware hat darin bereits alle für den Betrieb erforderlichen Dateien und eine Ordnerstruktur angelegt. Werden wir zunächst einen Blick auf die Theme.php-Datei.
Die Theme.php Datei: CSS-Dateien hinzufügen
In der Datei finden wir die allgemeine Definition unseres Child Themes. Daran könnten wir unter anderem die Angaben ändern, die wir zuvor im Backend getätigt haben, aber auch andere Operationen vornehmen, wie beispielsweise das Hinzufügen neuer CSS- oder JavaScript-Dateien.
Im heutigen Beispiel werden wir uns darauf konzentrieren, unser Child Theme eine neue CSS-Datei hinzuzufügen, in der wir die Styles unseres Themes verändern können. Wie man eigenes CSS hinzufügt, ist eine der am häufigsten gestellten Fragen, die uns erreichen.
Zunächst möchte ich an dieser Stelle kurz auf die Shopware-Dokumentation verweisen. Da steht im Grunde alles drin, was ihr wissen müsst und ihr könnt euch die entsprechenden Code-Passagen einfach in eure Theme.php kopieren und anpassen.
Zunächst legen wir unter "/frontend/_public/src/css" (vom Verzeichnis unseres Child Themes ausgehend) eine neue Datei an und nennen sie "child.css". Den Namen könnt ihr frei wählen, wie ihr möchtet. Lasst uns nun die Datei "child.css" in einem Text- oder Code-Editor unserer Wahl öffnen. Wir verwenden Visual Studio Code und fügen zum Testen folgenden Code hinzu, der die Hintergrundfarbe unseres Shops ändert.
body{
background-color: green;
}
Anschließend bewegen wir uns zurück ins Hauptverzeichnis unseres Child Themes und öffnen unsere Theme.php in einem Text- oder Code-Editor und fügen die folgende Textpassage ein.
protected $css = [
'src/css/child.css'
];
Den Ordner "_public" und die Route in euer Theme-Verzeichnis müsst ihr dabei nicht angeben. Nun weiß das System, dass die CSS-Datei existiert, geladen und kompiliert werden muss.
Nun geben wir zurück ins Backend, leeren den Cache und kompilieren unser Theme neu. Anschließend sollten alle CSS-Anpassungen auch im Frontend sichtbar sein.
Wenn euch dieser Beitrag gefallen hat, dann lasst uns gerne ein Like da und schaut euch unsere anderen Blog Beiträge an, in denen wir weitere nützliche Dinge in Bezug auf den Betrieb und die Anpassung von Shopware erklären.