Eigenes Shopware 5 Template (Theme) erstellen

Eigenes Shopware 5 Template (Theme) erstellen
Inhaltsverzeichnis

Viele Wege führen bekanntlicher Weise nach Rom, so gibt es auch in 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 Manager

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 . Shopware 5 bringt von Haus aus 2 Themes mit: Das Bare Theme, welches komplett nackt nur aus dem Template besteht und das Responsive Theme, welches die Style und Dateien sowie Grafiken enthält.

Shopware 5 Standard Themes Bare und Responsive
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 von Shopware auch vor aktiviert.

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 den 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 frei wä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 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 jetzt anschaut, wird sich nichts geändert haben, da euer Template vom Standard Shopware Theme abgleitet wird. Ihr könnt jetzt unter „Theme konfigurieren“ im Theme Manager Einstellungen wie Logos, Icons, Typografie, Farben und Frontend Einstellungen.

Jetzt 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 -Beiträgen erkläre ich euch, wie ihr euer eigenes Template jetzt verändert. Ich hoffe, ihr konntet problemlos euer eigenes Template in Shopware 5 erstellen.


Schreib mir deine Meinung

Ein gültiger Name ist erforderlich.

Kommentare

Kommentare sind nach Datum aufsteigend sortiert.

  1. Tom Grünbauer

    Hi,

    sehr gutes Tutorial, danke dafür schon mal. Gibts die oben erwähnten späteren Blogs zur Veränderung der Templates schon, bzw. wann sind diese geplant?

    LG Tom


    vor 4 Jahren
    • Maurice Neumann

      Hi, derzeit finde ich leider etwas weniger Zeit für den Blog, aber die erwähnten Beiträge werden definitiv noch erscheinen.


      vor 3 Jahren
  2. Axel Binder

    Wäre super, wenn du die Shopware Template Geschichte nochmals ausrollen kannst.
    Denke das ist grosser Bedarf, insbesondere eigene Anpassungen im Header, Footer, Artikel-Listing sowie in der Anzeige von weiteren Freitext-Feldern.

    Maurice, wir warten gespannt auf deine Artikel.


    vor 2 Jahren
Kurzübersicht
Lesezeit: 4 Minuten
Kategorie: E-Commerce
Reaktionen: 3 Kommentar(e)
Folge mir auf:
  1. Pinterest
  2. Instagram