Themen:

Eigenes Shopware 5 Template (Theme) erstellen

Viele Wege führen bekanntlicher Weise nach Rom, so gibt es auch in Shopware 5 verschiedene Wege, ein eigenes Template zu erstellen. Ich erkläre euch hier die einfachste Methode, indem wir uns durch das Backend von Shopware klicken.

Der Weg zum Shopware 5 Theme Manger

Shopware 5 Theme Manager
Backend: Einstellungen > Theme Manager

Loggt euch in das Backend von Shopware ein und klickt über Einstellungen auf den Theme Manager. Im Theme Manager befinden sich alle vorhandene Themes. Shopware 5 bringt von Haus aus 2 Themes mit: Das Bare Theme, welches komplett nackt nur aus dem Template Code besteht und das Responsive Theme, welches die Style und JavaScript Dateien sowie Grafiken enthält.

Shopware 5 Standard Themes Bare und Responsive
Standard Themes: Bare und Responsive Theme

Shopware 5 Standard Themes

Das Bare Theme besitzt die Grundstruktur aller Themes. Selbst das Responsive Theme basiert auf dem Bare Theme. Zum Test könnt ihr dies einfach mal aktivieren und ihr bekommt nur die reine Ausgabe ohne Stylesheet, Grafiken oder Javascript.

Das Responsive Theme (ansprechbare Theme) basiert wie gesagt auf dem Bare Theme (es ist abgeleitet vom Bare Theme), jedoch fügt es die optischen Stylesheets und Grafiken hinzu (damit es gut aussieht und strukturiert ist) und macht es durch Javascript dynamischer (z.B auf allen Endgeräten). Dieses Theme ist bei der ersten Installation von Shopware auch voraktiviert.

Die beiden Themes sind in der Ordnerstruktur eures Servers unter der Shopware 5 Installation bei themes/frontend zu finden.

Das eigene Shopware 5 Template (Theme) erstellen

An den beiden Standard Themes Bare und Responsive von Shopware solltet ihr keine Änderungen machen, da diese gegebenenfalls bei einem Shopware Update überschrieben werden. Es wäre doch schade, wenn eure Veränderung auf einmal weg wäre – deswegen erstellen wir uns für unsere eigenen Veränderungen ein eigenes Theme, welches vom Responsive Theme ableiten soll und somit gleichzeitig auch vom Bare Theme ableitet.

Klickt einfach oben im Theme Manager oben auf dem Button „Theme erstellen“ und füllt die erforderlichen Felder aus. Wie erwähnt wird vom Theme: Responsive abgeleitet, somit haben wir alles grundlegendes für unser eigenes Theme schon mit am Board. Der Name kann frei gewählt werden, sollte jedoch keine Leerzeichen beinhalten. Die Kurzbeschreibung ist der lesbare Name, der im Theme Manager angezeigt wird. Bei der Beschreibung könnt ihr den Zweck des Themes oder andere Hinweise beschreiben. Der Autor solltet natürlich ihr sein. Die Lizenz ist auch freiwählbar, gängig ist hier die Open Source MIT-Lizenz.

Eigenes Theme erstellen
Eigenes Theme anlegen

Nun sollte in der Ordnerstruktur der Shopware Installation unter themes/frontend der Ordner MeinTheme mit allen erforderlichen Dateien erstellt worden sein. Im Theme Manager findet ihr nun den Eintrag „Mein Theme“.

Eigenes Template Theme in Shopware 5 zuweisen
Eigenes Template unter Theme zuweisen

Damit eurer eigenes Template auch aktiv ist, müsst ihr euer Theme nun noch in Shopware 5 zuweisen. Klickt dazu einfach auf den Button „Theme zuweisen“ an der rechten Leiste im Theme Manager. Beim klick auf den Button wird sich ein Fenster mit der Theme Kompilierung öffnen. Beim kompilieren, werden die Less Dateien angewendet (Less Dateien sind CSS Dateien mit mehr Funktionen). Klickt einfach auf den Button „Themes kompilieren“ und euer eigenes Template ist aktiv.

Shopware Theme kompilieren
Theme Kompilierung

Wenn ihr euch euren Shop nun anschaut, wird sich nichts geändert haben, da euer Template vom Standard Shopware Theme abgleitet wird. Ihr könnt nun unter „Theme konfigurieren“ im Theme Manager Einstellungen wie Logos, Icons, Typografie, Farben und Frontend Einstellungen.

Nun habt ihr euer eigenes Template in Shopware 5 aktiv und könnt unter der Shopware Installation bei themes/frontend/MeinTheme/ Veränderungen machen, welche auch nach einem Shopware Update bestehen bleiben.

In späteren Blog Beiträgen erkläre ich euch, wie ihr euer eigenes Template nun verändert. Ich hoffe ihr konntet nun Problemlos euer eigenes Template in Shopware 5 erstellen.



Schreib mit deine Meinung

Pflichtfelder sind mit einem * markiert.

Oben