Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst

Alexander Wolf 12. August 2015 68

Schauen wir uns die Shopware 5 Theme / Template Entwicklung genauer an. Zuerst die Theme Struktur und den Aufbau, danach was wir beachten müssen. Und zum Schluss legen wir unser erstes eigenes Theme an und passen es mit LESS nach unseren Wünschen an.

Shopware Theme erstellen - Voraussetzung

Wir brauchen einen funktionierenden Shopware Shop für dieses Vorhaben. Entweder habt ihr schon einen Server (gemietet, gekauft oder geklaut) mit einer frischen Shopware 5 Installation. Oder (viel besser) ihr habt MAMP (oder WAMP) runtergeladen wie im Beitrag "4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst" installiert und arbeitet erstmal lokal an eurem (coolen) Theme. 

Das fertige Theme wird es kostenlos im Shopware Store geben, also falls ihr es einfach nur haben wollt ohne es selbst zu schreiben, könnt ihr es hier runterladen.

Fangen wir erst einmal mit der Theorie an. Wir machen nachher auch was praktisches, versprochen! Ihr könnt auch die Theorie überspringen (wer ließt schon die Anleitungen?).

Shopware 5 Template Struktur (Themeaufbau / Vererbung)

Die Shopware AG war so lieb und hat für Shopware 5 schon einmal zwei Themes bereit gestellt. Ein komplett nacktes, das Bare Theme und ein extrem cooles, das Responsive Theme.

Das Bare Theme ist sozusagen der Ursprung aller Themes. Hier sind alle wichtigen Dateien drin die als Grundlage für jedes Theme agieren. Sogar das Responsive Theme basiert auf dem Bare Theme. Zur Zeit benötigen wir es aber nicht direkt, da es wirklich keine Stylesheet Dateien und keine Javascript Dateien besitzt und alles somit extrem langweilig aussieht. Ihr könnt es aus Spaß mal aktivieren und schauen was ihr seht.

Das Responsive Theme ist abgeleitet vom Bare Theme und hat eben die ganzen Stylesheets und Scripts drin um toll auszusehen und auf jedem Endgerät zu funktionieren (daher auch der Name). Es ist wirklich eine Erleichterung wenn ihr mit dem Responsive Theme starten könnt, als alles von Grund auf aufzubauen. Werden wir aber demnächst auch machen.

Ihr könnt euch im Ordner Themes auch die beiden anschauen. Welche Dateien liegen drin usw. Ihr werdet eine bestimmte Ordnerstruktur im Bare Theme feststellen.

Die Ordnerstruktur in der Shopware Doku.

Beim Responsive Theme merkt ihr dann, dass es gar nicht so viele Ordner gibt. Das kommt daher, dass wir vom Bare Theme ableiten und nur die angepassten Dateien neu anlegen, welche in diesem Fall nur LESS/CSS und JavaScript Dateien sind.

Shopware Template erstellen: Es geht ans Eingemachte

Bei unserem Flat Theme wollen wir keine vorhandenen Elemente verschwinden lassen oder neue Elemente ergänzen, daher arbeiten wir nur mit LESS (das ist CSS in cool).

Legen wir zunächst ein neues Theme an

Es gibt natürlich wieder verschiedene Wege. Fangen wir mit dem Einfachsten an: Wir klicken uns durchs Backend von Shopware 5. 

Irgendwann schauen wir uns das Ganze mit der Konsole und den CLI Tools von Shopware an (auch sehr spannend).

Loggt euch ein, geht auf Einstellungen und auf den Theme Manager.

Dieser Manager verwaltet all eure vorhandenen Themes, wenn diese im Theme Ordner liegen. Ihr seht gegebenenfalls auch noch die alten Templates von Shopware 4, aber darum wollen wir uns erst einmal nicht kümmern.

Klickt oben im Fenster auf Theme erstellen und füllt die Felder aus. 

Wichtig: Wir wollen vom Responsive Theme ableiten. Überlegt euch einen coolen Namen, eine Kurzbeschreibung, eine Beschreibung, den Autor (cooler Hackername, ich nehme 8mylez),  die Lizenz (ich nehme MIT) und speichert das Ganze.

Wie hat sich das jetzt angefühlt? Schreibt mir gerne eine Mail mit euren Glücksgefühlen: support@8mylez.com.

Aber mal ehrlich, bisher war das doch ganz einfach oder? Sogar meine Oma kriegt das hin (würde sie nicht andauernd ihr Passwort vergessen).

Das Theme weisen wir noch dem Shop zu indem wir es anklicken und rechts in der Leiste auf zuweisen klicken.

Das Fundament ist gegossen und hart geworden. Wir können das Haus nun bauen. Oder besser gesagt: Das Fertighaus wurde bereits geliefert und wir können es jetzt streichen. Zu sehen gibt es im Shop noch nichts, jedenfalls nichts, was sich verändert hat.

Theme anpassen (nur LESS)

Bevor wir uns das coole Blocksystem von Shopware 5 anschauen, wollen wir zunächst nur LESS Anpassungen machen, die in der Regel etwas einfacher sind.

In dem Ordner

themes/Frontend/FlatResponsive/frontend/_public/src/less/

legen wir die Datei

all.less

an. Diese Datei ist sozusagen unsere Hauptdatei. In diese Datei werden alle anderen Dateien importiert. Was bringt das? Jede Menge Übersichtlichkeit, saubere Trennung der einzelnen Module und der Code ist insgesamt natürlich deutlich lesbarer, wenn ihr 50 anstatt 5000 Zeilen habt.

Damit das Ganze noch übersichtlicher ist, trennen wir auch die einzelnen Module. Dafür legen wir unter

themes/Frontend/FlatResponsive/frontend/_public/src/less/_modules

noch die

modules.less

an.

Krallen wir uns also die Navigation und verpassen im Shopware Responsive Theme dem aktiven Link einen Flat Style.

mDazu schauen wir uns im Responsive Theme die Ordnerstruktur an für die Navigation. Da es die Hauptnavigation ist, wird der LESS Code dafür im Ordner

themes/Frontend/Responsive/frontend/_public/src/less/_modules/main-navigation.less

liegen (Und wir hatten sogar Recht!).

Gehen wir wieder zu unserem Theme zurück und legen ebenfalls in dem Ordner, diesmal aber bei uns die LESS Datei an. Also im Ordner

themes/Frontend/FlatResponsive/frontend/_public/src/less/_modules

legen wir die Datei

main-navigation.less

an.

Zu guter Letzt kopieren wir den Code rüber und schmeißen alles raus, was wir nicht brauchen, denn wir wollen nur vorhandene Werte überschreiben (da wir das Theme abgeleitet haben).

Wenn wir uns den Code im Shop Frontend (im Browser) anschauen (Rechtsklick -> Untersuchen), merken wir schnell, dass dort ein Hintergrundbild mit einem linear-gradient genutzt wird für den wundervollen Verlauf. Im Flat Style gibt es keine Verläufe, also raus damit!

Dazu entfernen wir noch den Gradient (indem wir das

background-image: none;

setzen und die Funktion

.primary-gradient()

rausnehmen) und den runden Rand (indem wir bei der Funktion

.border-radius-multi(0, 0, 0, 0);

alle Werte auf 0 setzen).

Damit die Änderungen auch erkannt werden, müssen wir unserer modules.less noch sagen, dass wir eine main-navigation.less angelegt haben. Dazu schreiben wir in unsere modules.less

@import "main-navigation";

Jetzt muss die all.less noch die modules.less eingebunden bekommen.
Dafür fügen wir in die all.less noch

@import "_modules/modules";

ein.

Wir weisen das Theme im Backend nochmal zu, damit wir es kompilieren können (was bei LESS zwingend notwendig ist, warum kommt später) und erfreuen uns an dem neuen Flat Style des aktiven Link in der Hauptnavigation.

Und siehe da: die Navigation hat einen eleganten Flat Style. Kleine Anpassung und das Ganze sieht wie neu aus.

Das waren erstmal Anpassungen mit LESS. Ihr könnt auch ganze Elemente rausschmeißen oder hinzufügen. Das schauen wir uns im nächsten Beitrag an. Tragt euch in den Newsletter ein um nichts zu verpassen!

Tipp: 

Kennst du schon unser Shopware eBook? Verpasse nicht die wertvollen Tipps & Tricks für deinen Shopware Shop: Shopware Tutorial

Hol dir unseren kostenlosen E-Mail-Kurs:

Lerne wie du deinen eigenen Shopware 5 
Shop erstellst und verwaltest

68 Kommentare

  • […] wir voraus, dass du bereits ein eigenes Theme hast. Sollte das nicht der Fall sein, kannst du hier nachlesen wie du dein eigenes Theme […]
  • Hallo Alexander,

    ich habe selten einen so guten Artikel zum Thema "Themes erstellen" gelesen.

    MFG Philipp
  • Hallo Philipp,

    vielen Dank für netten Worte!

    Gruß
    Alexander
  • Hallo zusammen.

    ich habe vor kurzem die ehrenamtliche Betreuung eines Webshops übernommen und noch nicht wirklich viel mit Shopware bis dato zu tun gehabt. Im oberen Bereich der Website sind mehrere Logos und Bilder platziert. Wie bzw. wo habe ich die Möglichkeit, diese Bilder zu entfernen? Ich vermute mal im Theme-Manager, aber wie genau muss ich vorgehen?

    Vielen Dank vorab für die Hilfe.

    LG Calli
  • Hallo Calli,

    das ist immer unterschiedlich! Im Theme Manager kannst du unten rechts auf Theme konfigurieren klicken und schauen ob es irgendwo da gesetzt wurde.

    Ansonsten musst du im Code nachschauen. Dazu empfehle ich dir zunächst unsere Youtube Videos: https://www.youtube.com/channel/UC8W3WUjFs2SeULDA7aqQgjw

    Ich denke so bekommst du einen guten Einblick in die ganze Thematik und findest die Logos ganz einfach.

    Gruß
    Alexander
  • Hallo,

    wo kann man denn das Theme von Euch runterladen, im Shop habe ich nichts gefunden ( oder vielleicht etwas Blind :-) ).

    Danke für Ihre Zeit

    Gruß
    Michael
  • Moin Alexander,

    wie habt ihr in Eurem Template das große Dropdownmenu angelegt?
    Bzw. freigeschaltet? Gibt es da ein Plugin oder muss man den Spaß selber schreiben.

    Lg Stephan
  • […] dem Tutorial: Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstells… haben wir dir gezeigt wie du ein eigenes Theme […]
  • Hallo, danke erst mal für die einfache Anleitung!

    Doch leider lässt sich das Theme nicht kompilieren. Cache gelehrt, aus- und eingeloggt - alles ausprobiert.

    Wo kann da das Problem liegen?

    Vielen Dank!
  • Hallo Stefan,

    vielen Dank für die netten Worte!

    Kannst du mir Zugang zum Backend und FTP per Mail an i@8mylez.com schicken?

    Gruß
    Alexander
  • Hallo Alexander,
    habe in der all.less @import "_modules/header"; eingebunden, sobald ich jedoch einen weiteren Import versuche wir nicht mehr kompiliert . Es geht um diesen Import: @import "_modules/product-box";
    Woran liegt es dass ich nicht mehr kompilieren kann?

    Gruß Michael
  • Hi,
    danke für die Erklärung bin echt super weiter gekommen, hab leider aber noch ein Problem.

    Das hinzufügen der ersten headers.less plus die Verknüpfung in der all.less Datei haben super geklappt. Sobald ich dann jedoch das nächste Modul reinkopiere, und bei all.less verknüpfe kompiliert der Shop nicht mehr. Nach dem Klick auf kompilieren passiert einfach nichts mehr. Wenn ich dann die Verknüpfung wieder rausnehme kompiliert er wieder ganz normal.

    Den Aufbau habe ich mir 1:1 aus anderen all.less Dateien abgeguckt.

    Hast du vielleicht eine Idee?

    Beste Grüße
    Tom
  • Hallo Tom,

    kannst du mir die LESS Dateien per E-Mail schicken an i@8mylez.com?

    Dann schaue ich da rein!

    Gruß
    Alexander
  • Hallo an alle Shopware-Experten,

    eine Frage zu Templating,

    ist es möglich in Einkaufswelt bei Shopware 5.1x ein anderes Template zu nutzten. Es ist ja möglich bei General Setting -> Select Template ein auszusuchen, aber ich habe dort nur Standard.

    Ich möchte für einige Landingspages das Aussehen von einigen Widgets, wie Product/Artikel samt Struktur und css.

    Gibt's dafür eine bessere Möglichkeit ?

    Danke im VOraus
  • Hallo Alexey,

    damit habe ich mich noch nicht befasst! Aber es kommt auf die Liste und wird demnächst erledigt, sodass es einen schönen Beitrag dazu geben wird.

    Gruß
    Alexander
  • […] { }, click: function(api, options){ api.simulateClick(); api.openPopup('googlePlus'); } }); }); Im letzten Beitrag haben wir uns angeschaut wie wir unser Theme mit LESS anpassen […]
  • […] du schon kennen, falls nicht, schau dir vorher das an: Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstells… oder Video: Wie du dein erstes Shopware 5 Theme anlegst und mit LESS anpasst – Teil […]
  • Sehr geehrte Damen und Herren,

    erstmals vielen Dank für das kostenlose Template im Shopware Store.

    Ich habe allerdings ein Problem mit dem Theme. Ich habe das Theme heruntergeladen und installiert. Alles funktioniert einwandfrei.

    Allerdings möchte ich einige kleine Stylesheet Änderungen am Theme durchführen.

    Beispiel:
    In der Datei "../frontend/public/src/less/_modules/header.less" möchte ich z.B. die Hintergrund Farbe der Klasse ".header-main" ändern. Ich habe folgendes unter die Zeile ergänzt:

    .header-main { background: #000; }

    Die Änderungen habe ich hochgeladen. Allerdings werden die Änderungen nicht angezeigt. Auch unter Firebug bzw. in der Konsole kann ich meine Änderungen in den Stylesheets nicht erkennen.

    Ich würde mich freuen, wenn Sie mir dabei behilflich sein können.

    Schöne Grüße aus Dortmund,
    Serkan
  • Hallo Serkan,

    hast du das Theme denn auch neu kompiliert? Das machst du im Theme-Manager.

    Schöne Grüße,
    Björn
  • Hello !
    I have a problem with overrideing template block with ajax.
    Shopware use infinite scrolling for category page and i want add some extra html code for every product presents in category. I ovveride a block {block name='frontend_listing_box_article_image_picture_element'} in file themes\Frontend\Bare\frontend\listing\product-box\product-image.tpl

    and it works great when i refresh the page. But when i scroll down a category page and new products loaded they do not have a extra html code . Of course i register events for ajax.

    $this->subscribeEvent (
    'Enlight_Controller_Action_Frontend_Listing_Index',
    'onPostDispatchFrontend'
    );
    $this->subscribeEvent (
    'Enlight_Controller_Action_Widgets_Listing_AjaxListing',
    'onPostDispatchFrontend'
    );

    Do you have an idea why it is not working with ajax?

    Thanks!!!!
  • soll der Rest aus der main-navigation.less entfernt werden oder einfach die 3 Sachen rausgelöscht/verändert werden sehe keine wirklichen ändernungen
  • Hallo Dieter,

    ja genau. Wir schreiben in die neue LESS Datei nur die Eigenschaften, welche die alten überschreiben sollen.

    Um den Gradient zu entfernen, setzen wir das Hintergrundbild auf none und löschen die Funktion .primary-gradient()

    Und um die runden Ecken verschwinden zulassen setzen wir den border-radius auf 0 mit .border-radius-multi(0, 0, 0, 0);

    Ich hoffe das hilft dir weiter, ansonsten ist es oben ziemlich genau beschrieben.

    Die Änderung sind nur Kleinigkeiten: Kein Verlauf und eben keine abgerundeten Ecken.

    Gruß
    Alexander
  • Hallo Alexander,

    wenn ich mich nicht irre, dann hat sich hier der Fehlerteufel eingeschlichen ;-) Nach meinem Verständnis fehlt zur Funktion entscheidende Angabe in all.less:
    @import "_modules/main-navigation";

    Ohne funktioniert es jedenfalls bei mir nicht. Vielleicht solltest du das noch ergänzen?

    Ansonsten, schöner Artikel! Vielen Dank,
    Björn
  • Ah, fast vergessen:
    Mir persönlich fehlt die Datumsangabe zu deinen Blog-Einträgen. Mir hilft das immer bei der Einschätzung wie aktuell die Beiträge sind. Und da deine Einträge eher aktuell sind ist das natürlich eine positive Angabe :-)

    Schöne Grüße,
    Björn
  • Hallo Björn,

    du hast vollkommen Recht! Ist irgendwie untergegangen.

    Vielen Dank :)

    Gruß
    Alexander
  • Hi,

    vielen Dank für deine Tuts und Beiträge,
    da versteh selbst ich als Hobbyprogrammierer was von;-)

    Ich hätte eine wahrscheinlich ganz banale Frage. Im Responsiv Status wird das Unteremenü mit einem + zum aufklappen und einem - zu zuklappen angezeigt. Wie kann man diese Icons ändern und wo? Ich suche mir seit Tagen die Finger wund und finde absolut nichts brauchbares. Hast Du ein Tipp für mich?
    Gruß
    Marc
  • Hallo Marc,

    vielen Dank! Das freut mich total, dass es dir hilft :)

    Ich schreibe in den nächsten Tagen einen eigenen Beitrag, wie die Icons angepasst werden können.

    Das in den Kommentaren hier zu erklären, wäre etwas zu viel des Guten.

    Am besten in den Newsletter eintragen, so verpasst du den Beitrag auch nicht :)

    Gruß
    Alexander
  • Die aktuelle Shopware Frontend Situation mag ganz nett klingen, als Frontender finde ich es allerdings eher unbrauchbar.
    Das anlegen eines Child- Themes auf "Responsive" Basis, übernimmt jegliche Funktionalitäten und styles des Originalen "Responsive" Themes, soweit so gut.

    Wenn ich jetzt anfange meine eigenen CSS Daten einzubinden, überschreiben diese nur die orginalen CSS Datensätze, die alten Selektoren werden aber Trotzdem an den Client ausgeliefert. Somit ist das hoch angepriesene Feature das die CSS Dateien jetzt extrem klein sind wieder hinfällig, denn meine eigene Anpassung muss auch mit zum Client geliefert werden. Zum anderen ist das mehrfache überschreiben von Selectoren ein absoluter Frontend- Performance Killer (mal abgesehen von dem extrem tiefen Nesting, was das "Responsive" template sowieso schon betreibt.

    Einen Preprozessor einzusetzen ist Prinzipiell eine gute Idee, welchen man einsetzt, ist finde ich eher Geschmackssache (ich schreibe lieber SASS).

    Eine Neuentwicklung auf Basis von "Bare" ist kaum möglich, weil viele Plugins (PayPal, Klarna, Advanced Menu) auf das Responsive Template aufsetzten, und die im Backend hinterlegten LESS variablen nutzen möchten. Die existieren in dem Fall aber nicht, oder heißen anders. Somit kracht es bei jedem Update eines Plugins.

    Responsive selber kennt auch einige Ansätze, ich bin verfechter der mobile first Strategie, diese wird im "Responsive Theme" relativ gut umgesetzt, trotzdem wirkt das Theme sehr starr und bricht nur an den definierten Breakpoints, einen Fluid- Design Ansatz im nachhinein einzubinden ist nahezu unmöglich, es sei denn man setzt ein auf das "Bare" template auf und passt alles selber an. Wobei wir dann wieder bei dem oben genannten Problem sind.
  • Hallo Michael,

    in einigen Punkten stimme ich dir zu.

    Dabei muss einfach geschaut werden wo man hin will und wie es genutzt wird. Für kleinere / mittlere Shops reicht das Standard Responsive ja schon ganz gut aus.

    Ich persönlich finde es auch schade, wenn alle Shops gleich aussehen.

    Bei den Plugins ist generell darauf zu achten welche genutzt werden. Ich würde mir auch eine bessere oder überhaupt eine Dokumentation der Plugins wünschen, sodass die Theme Entwickler darauf eingehen können.

    Shopware ist noch relativ am Anfang. Mit Shopware 5 haben sie auf jeden Fall einen großen Sprung in die richtige Richtung gemacht.

    Bin gespannt wie sich das ganze weiterentwickelt!

    Gruß
    Alexander
  • Muss ich nach jeder Änderung an der LESS-Datei, den Cache löschen und das Theme neu kompilieren?
  • Hallo Tim,

    du kannst bei "Theme Manager / Einstellungen (oben im Fenster) / Compiler Caching deaktivieren" ein Häckchen setzen.

    Dann dauert das Laden der Seite etwas länger, aber dafür wird jedes mal LESS kompiliert.
  • […] Für die, die es doch nicht wissen. Check it out: Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein erstes eigenes Theme erstells… […]
  • Hallo, erstmal danke für das Tutorial.
    Kurze Anmerkung: Vielleicht sollte noch etwas mehr auf die all.less und die entsprechenden Linkverweise eingegangen werden.
    So steht zB im Tutorial nicht dass auch noch weitere less Dateien angelegt werden müssen.
    Die all.less Datei Linkt ja nicht direkt in die Unterordner sondern auf weitere Less Dateien zB modules.less welche dann erst in die Unterverzeichnisse verlinken. Vielleicht hilft das dem ein oder anderen weiter.

    Gruß
    Thomas
  • Hallo Thomas,

    vielen Dank für deinen Kommentar!

    Das ist ein guter Hinweis.

    Wir werden einen neuen Beitrag erstellen in dem wir mehr auf die Strukturierung der LESS Datei eingehen.

    Gruß
    Alexander
  • Hallo,

    Warum kann man das nicht so einstellen, dass über die gesamte Struktur ein CSS-Merge durchgeführt wird?
    Warum das von Shopware nicht generell so gemacht wird verstehe ich nicht.

    Diese @import Variante ist eh "nur" für die bessere Übersicht aber nicht optimal.
  • […] ist eine grundlegende Aufgabe die wir öfter machen und schon gelernt haben. Könnt ihr hier: Was du über die Shopware 5 Themestruktur wissen musst und wie du ein Theme anlegst […]

Was denkst du?

Das Shopware eBook für Einsteiger!

shopware tutorial ebook mockup
Ausführliche Schritt für Schritt Anleitungen, Tipps & Tricks für alle, die gerne am eigenen Shopware Shop basteln.
Jetzt kaufen

Hol dir 

wertvolle Tipps 
für deinen
Shopware Shop

Wir zeigen dir, wie du deinen
Shopware 5 Shop optimieren
kannst.


Trage einfach deine
E-Mail Adresse ein:

Beliebt

Was du über die Shopware 5 Theme Struktur wissen musst und wie du ein eigenes Template erstellst
Shopware Theme Entwicklung: Der große Livestream!
Plugin Theme Struktur überschreiben und Plugins individuell anpassen
Logo Größe anpassen mit Less für Shopware 5
Theme: Eigenes Listing Layout erstellen
Vorsicht Shopware Update! Was du beim Updaten beachten musst
Staging Umgebung – Was ist das und warum brauchst du eine?
Shopware 5 - Wie du deine Shop Geschwindigkeit optimierst
4 Gründe warum du Shopware 5 lokal mit MAMP installieren solltest und wie du das anstellst
Shopware Logo aus dem Footer entfernen
© 2017 by 8mylez. Powered by Goltfisch GmbH.