Inhaltsverzeichnis

Video
Was ist ein Child-Theme?
Vorbereitung
Child-Theme per Konsole erstellen
Dateien anpassen
Themes aus dem Shopware-Store erweitern
Ressourcen

Shopware 6: Child-Theme anlegen, einfach erklärt - Shopware 6 Tutorial

Im heutigen Tutorial zeige ich dir Schritt für Schritt, wie du in Shopware 6 ein Child-Theme anlegen kannst. Damit kannst du Änderungen an deinen Styles und am Template vornehmen, ohne die Original-Dateien zu verändern und damit bleibst du update-sicher.

Video

Was ist ein Child-Theme?

Ein Child-Theme ist, grob gesagt, das "Kind" eines "Eltern"-Themes (Child und Parent) - und erbt dessen Eigenschaften und Funktionalitäten.

Child-Themes kommen zum Einsatz, wenn du Änderungen am Aussehen, Layout und manchmal auch Funktionen deines Shops vornehmen möchtest, ohne dabei die Original-Theme-Dateien verändern zu müssen.

Das bietet verschiedene Vorteile.

Zum einen bleibt dein Theme updatesicher, dadurch dass die Originaldateien unangetastet bleiben.

Bei Updates ist es nicht nur so, dass deine Anpassungen in den meisten Fällen einfach überschrieben werden, sondern es kann auch zu internen Konflikten kommen (gerade wenn du Shopware-Dateien direkt bearbeitest).

Das gilt außerdem auch, wenn du ein Theme im Shopware-Store gekauft hast. Du solltest die Originaldateien möglichst unangetastet lassen.

Bei gekauften Themes hast du ja in der Regel 12 Monate kostenlosen Theme-Support – dieser greift natürlich nicht, wenn du die Originaldateien des Themes oder Plugins und oder der Basis Storefront angepasst hast.

Außerdem bleibt dein Code natürlich übersichtlicher, leichter zu warten und einfacher zu testen.

Der einzige Nachteil ist, dass du das Ganze natürlich aufsetzen und in Betrieb nehmen musst. Und ganz so einfach wie bei Shopware 5 ist es bei 6 zumindest noch nicht.

VIBE Fashion Theme für Shopware 6

SEO-ready Premium-Theme vom Orangebytes

Flexibel anpassbar
SEO-ready - optimierter Quellcode
12 Monate Plugin-Support inklusive
30 Tage kostenlos testen - ohne Risiko

Jetzt kostenlos testen

Vorbereitung

In unserem heutigen Beispiel zeige ich dir, wie du ein mithilfe eines Child-Themes Farbanpassungen per CSS vornehmen kannst, die über die Theme-Einstellungen hinaus gehen. Wir werden dabei zuerst das Standard Shopware Theme ableiten und im Anschluss schauen wir uns an, wie ihr das mit einem beliebigen Shopware-Theme machen könnt. Beispielsweise wenn du eins im Shopware-Store gekauft hast.

Für die Anpassungen nutzen wir folgende Tools:

FTP (z.B. Filezilla, WinSCP, Cyberduck, …)
SSH (Standardkonsole wie Eingabeaufforderung unter Windows)
Text-Editor (Visual Studio Code, Sublime Text, Atom, …)

Für die Verbindung per FTP oder SSH mit unserem Webserver oder Hosting benötigen wir natürlich auch entsprechende Zugangsdaten und Berechtigungen. Die bekommst du normalerweise bei deinem Hoster.

Und das wars auch schon und wir können direkt loslegen.

Child-Theme per Konsole erstellen

Bei Shopware 6 ist ein Theme technisch betrachtet ein Plugin. Der erste Schritt ist also die entsprechende Datei- und Ordner-Struktur anzulegen, die wir benötigen.

Das können wir entweder manuell machen, aber Shopware stellt uns da auch einen simplen Konsolenbefehl zur Verfügung, der uns einen Teil der Arbeit abnimmt und Fehler minimiert.

Zunächst müssen wir uns natürlich über die Konsole per SSH mit unserem Webserver verbinden.

ssh -p 22 user@host

Nun navigieren wir in unser Shop-Verzeichnis.

Jetzt können wir Shopware-Befehle ausführen. Die Shopware-CLI erreichst du, wenn du "bin/console" eingibst. Wenn du keinen Befehl spezifizierst, werden alle zur Verfügung stehenden Befehle aufgelistet.

Um ein neues Theme zu erstellen nutzen wir den Befehl "bin/console theme:create".

bin/console theme:create PrefixThemeName

Im nächsten Schritt müssen wir den Plugin-Namen angeben. Dieser setzt sich in der Regel aus einem (optionalen) Hersteller-Präfix und der Plugin-Bezeichnung in Camel-Case-Schreibweise zusammen. Camel-Case bedeutet keine Leerzeichnen, Trennzeichen, Umlaute oder Sonderzeichen, stattdessen werden Begriffe getrennt, indem man den Anfang jedes Wortes großschreibt.

Haben wir den Befehl ausgeführt, hat Shopware für unser Plugin einige Ordner und Dateien angelegt. Die schauen wir uns als Nächstes etwas genauer an.

Ordnerstruktur


 OrangebyteChildTheme
    src
       Resources
          app
             storefront
                dist
                   storefront
                      js
                         orangebyte-child-theme.js
                src
                   assets
                   scss
                      base.scss
                      overrides.scss
                   main.js
          theme.json
       OrangebyteChildTheme.php
    composer.json

Wir haben damit bereits ein funktionierendes Minimal-Setup und unser Child-Theme ist bereits installierbar und aktivierbar.

Wir sollten allerdings ein paar Dateien anpassen, damit alles reibungslos funktioniert und wir das gewünschte Ergebnis erzielen:

composer.json: Enthält grundlegende Plugin-Informationen und Definitionen
theme.json: Enthält grundlegende Theme-Informationen und Definitionen, unter anderem auch zur Ableitung von einem Eltern-Element

Wir sehen außerdem, dass Shopware uns ein "app"-Verzeichnis angelegt hat – hier können wir später beispielsweise Anpassungen und Erweiterungen an CSS und JavaScript vornehmen.

Zunächst sollten wir uns allerdings daran machen, die beiden Dateien anzupassen.

Dateien anpassen

Um Dateien zu bearbeiten, verbinden wir uns zunächst per FTP mit dem Webserver und begeben uns ins Root-Verzeichnis des Onlineshops.

Plugins findest du generell unter "custom/plugins". Dort befindet sich auch den Ordner für das Child-Theme-Plugin ("OrangebyteChildTheme"), was wir zuvor per Konsolenbefehl erzeugt haben.

composer.json-Datei bearbeiten

Öffnen wir das Plugin-Verzeichnis finden wir direkt die composer.json-Datei, die wir direkt anpassen möchten.

Im Folgenden findest du ein Beispiel, wie die angepasste Datei aussehen könnte.

{
  "name": "orangebyte/child-theme",
  "description": "Child-Theme",
  "type": "shopware-platform-plugin",
  "license": "MIT",
  "version": "0.0.1",
  "authors": [
    {
        "name": "Orangebytes"
    }
  ],
  "require": {
    "shopware/core": "*"
  },
  "autoload": {
    "psr-4": {
      "OrangebyteChildTheme\\": "src/"
    }
  },
  "extra": {
    "shopware-plugin-class": "OrangebyteChildTheme\\OrangebyteChildTheme",
    "label": {
      "de-DE": "Child-Theme",
      "en-GB": "Child-Theme"
    },
    "description": {
      "de-DE": "Child-Theme Plugin für die Erweiterung der Storefront",
      "en-GB": "Child theme plugin for storefront customizations"
    }
  }
}

Wichtig ist, dass du den Namen anpasst. Das ist technische Plugin-Name, aber anders als vorhin, nutzen wir hier nicht CamelCase, wie du siehst, sondern schreiben alles klein und nutzen zur Trennung der Begriffe zunächst einen Slash ("/") für den Herstellerpräfix und dann trennen wir mit Bindestrich ("-").

Im Vergleich zur von Shopware generierten Datei haben wir zusätzlich die Einträge "version", "authors", "require" und "description" hinzugefügt.

Für die Funktion besonders wichtig sind die beiden Einträge "shopware-plugin-class" und "autoload". Hier solltest du nur Änderungen vornehmen, wenn du genau weißt, was du tust. Für unser Beispiel können wir die Einträge so lassen, wie sie durch den Konsolenbefehl angelegt wurden.

Als nächstes machen wir uns daran, die theme.json-Datei anzupassen.

theme.json-Datei bearbeiten

Die theme.json-Datei findest du, ausgehend vom Stammverzeichnis unseres Plugins, unter "src/Resources/themen.json".

Die Datei ist eine für unser Theme sehr wichtige Basisdatei, weil wir hier die Ableitung und die Ladereihenfolge der einzelnen Theme-Bestandteile vornehmen können.

Für unser erstes Beispiel, die Ableitung des Standard Shopware Themes, kann ich die Datei im Grunde auch lassen wie sie ist. Ich würde dennoch empfehlen, den Block über Config-Inheritance zu ergänzen und optional Namen und Autor entsprechend anzupassen, sodass alles seine Richtigkeit hat.

{
  "name": "Child-Theme",
  "author": "Orangebytes",
  "views": [
     "@Storefront",
     "@Plugins",
     "@OrangebyteChildTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "app/storefront/dist/storefront/js/orangebyte-child-theme.js"
  ],
  "asset": [
    "@Storefront",
    "app/storefront/src/assets"
  ],
  "configInheritance": [
    "@Storefront"
  ]
}

Damit sind wir mit der theme.json-Datei auch schon fertig. Als nächstes können wir unser Child Theme im Admin-Bereich installieren und aktivieren – das findest du unter "Erweiterungen" > "Meine Erweiterungen" > Tab "Themes" und dann über den Link "App installieren." Anschließend kannst du dein Plugin mit Klick auf das Checkbox-Icon links aktivieren.

Nun sollte das Child-Theme dem System zur Verfügung stehen. Um das zu prüfen, können wir es einem Verkaufskanal zuweisen. "Verkaufskanal" > "Theme" > "Theme ändern" > "Child-Theme" auswählen und speichern.

Nun haben wir ein funktionierendes Child-Theme, das installiert und aktiv ist. Allerdings enthält es noch keine Anpassungen, daher sieht man natürlich noch keine Änderungen. Und das möchten wir im nächsten Schritt machen.

Anpassungen per SCSS

Möchten wir nun Anpassungen per CSS, bzw. SCSS, vornehmen, finden wir unter "src/Resources/app/storefront/src/scss" die Datei "base.scss".

Das ist die Einstiegsdatei, die für unser Child-Theme geladen wird und die wir vorhin ja bereits in der theme.json in der Ladesequenz der Styles gesehen haben.

Bei komplexeren Child-Themes macht es Sinn, die Anpassungen auf mehrere SCSS-Dateien aufzuteilen. In der "base.scss" würde man dann die anderen Dateien in sinnvoller Reihenfolge laden.

Bei simpleren Projekten oder kleineren Anpassungen kannst du deine Änderungen aber auch direkt in die "base.scss" hineinschreiben.

Damit deine Änderungen nun greifen, muss das Theme kompiliert werden. Das geht über die Konsole mit folgendem Befehl.

bin/console theme:compile

Anschließend sollten deine Anpassungen im Frontend sichtbar sein.

Themes aus dem Shopware-Store erweitern

Möchtest du nicht das Standard Shopware Theme, sondern ein beliebiges Theme erweitern (beispielsweise eins aus dem Shopware Store), dann müssen die composer.json und theme.json geringfügig angepasst werden.

composer.json im Stammverzeichnis des Plugins

{
  "name": "orangebyte/child-theme",
  "description": "Child-Theme",
  "type": "shopware-platform-plugin",
  "license": "MIT",
  "version": "0.0.1",
  "authors": [
    {
        "name": "Orangebytes"
    }
  ],
  "require": {
    "shopware/core": "*",
    "orangebyte/signature6": "*"
  },
  "autoload": {
    "psr-4": {
      "OrangebyteChildTheme\\": "src/"
    }
  },
  "extra": {
    "shopware-plugin-class": "OrangebyteChildTheme\\OrangebyteChildTheme",
    "label": {
      "de-DE": "Child-Theme",
      "en-GB": "Child-Theme"
    },
    "description": {
      "de-DE": "Child-Theme Plugin für die Erweiterung der Storefront",
      "en-GB": "Child theme plugin for storefront customizations"
    }
  }
}

In der composer.json-Datei habe ich einen "require"-Eintrag ergänzt, um das Plugin, dass das Theme enthält, das wir für die Vererbung verwenden möchten als Abhängigkeit vorauszusetzen. Den Namen findest du in der jeweiligen composer.json-Datei des entsprechenden Plugins.

Ansonsten kann die Datei bleiben, wie sie ist.

theme.json unter "src/Resources/theme.json"

{
  "name": "Child-Theme",
  "author": "Orangebytes",
  "views": [
     "@Storefront",
     "@OrangebyteSignature6",
     "@Plugins",
     "@OrangebyteChildTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@Storefront",
    "@OrangebyteSignature6",
    "app/storefront/src/scss/base.scss"
  ],
  "script": [
    "@Storefront",
    "@OrangebyteSignature6",
    "app/storefront/dist/storefront/js/orangebyte-child-theme.js"
  ],
  "asset": [
    "@Storefront",
    "@OrangebyteSignature6",
    "app/storefront/src/assets"
  ],
  "configInheritance": [
    "@Storefront",
    "@OrangebyteSignature6"
  ]
}

In der theme.json-Datei möchten wir nun das neue Theme, das als Basis verwendet werden soll, in unsere Ladesequenzen einfügen. Das machen wir mit einem Ausdruck, der aus einem "@" und dem technischen Plugin-Namen besteht.

Wir fügen das entsprechende Parent-Theme jeweils nach dem Laden der Storefront ein ("@Storefront"), einschließlich beim Eintrag für die Config-Inheritance.

Damit unsere Änderungen funktionieren, empfehle ich folgende 3 Konsolenbefehle in der Reihenfolge einzugeben.

bin/console theme:refresh
bin/console theme:compile
bin/console cache:clear

Mit "theme:refresh" werden Theme-Daten neu geladen und neu generiert – das ist wichtig, damit unsere Vererbung der Theme-Konfiguration funktioniert und wir im Admin-Bereich alle Einstellungen des Basis-Themes in unserem Child-Theme nutzen können. "theme:compile" kompiliert unser Theme und mit "cache:clear" können wir unseren Cache leeren.

Sämtliche Anpassungen sollten nun im Frontend sichtbar sein. Und damit sind wir auch am Ende des heutigen Beitrags.

Im Folgenden findest du noch weiterführende Ressourcen und Downloadmöglichkeiten für die gezeigten Beispiele.