Heute schauen wir uns die Shopware 5 Theme / Template Entwicklung genauer an. Zuerst die Theme Struktur und den Aufbau, danach was wir beachten müssen. Zum Schluss legen wir unser erstes eigenes Theme an und passen es mit LESS nach unseren Wünschen an. Viel Spaß wünscht dir deine Shopware Agentur 8mylez.
PS: kennst Du schon unseren Shopware SEO Guide?
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?).
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.
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).
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.
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.
Dazu 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
Unsere Standorte
Zentrale
Technologiepark 23
33100 Paderborn
Leipzig
Bernhardstraße 34
04315 Leipzig
Kontakt
E-Mail: support@8mylez.com
Telefon: +49 (0) 5251 284 710
Shopware Dienstleistungen
Über 8mylez
✓ 38 Mitarbeiter
✓ Shopware Gold Partner
✓ 40.000+ Plugin Downloads
✓ 160+ betreute Shops
✓ Full-Service Shopware Agentur
✓ 70 Shopware Videos auf Youtube
✓ Alle Shopware Zertifizierungen
Social
Hasan Morsel
danke für die Anleitung.
Ich habe die Anleitung wie beschreiben nachgemacht, jedoch finde ich keinen Eintrag der "background-image" heisst. Und nach dem Kompilieren bemerke ich auch keine Veränderungen.
Muss ich in der main-navigation.less erst alles rauslöschen und dann die 3 Zeilen einfügen?
Liebe Grüße
Alexander Wolf
mit "Entfernen" meine ich nicht, dass der Code wirklich gelöscht wird, sondern, dass wir das Hintergrund Bild überschreiben mit dem Befehl: background-image: none;
Gruß
Alexander
Michael
danke für das super Tutorial. Kann ich denn in einem Shopware 5 Theme auch Bootstrap 4 integrieren? Oder macht das keinen Sinn? Die CSS-Klassen sind ja teilweise identisch.
LG Michael
Alexander Wolf
habe ich schon selbst einige Male gesehen. Es gibt aber schon fertige Integrationen auf denen du aufbauen kannst: www.bootstrap.de/
Gruß
Alexander
Dietmar
ich habe in meinem Shop ein Problem und finde leider keien Lösung, die Agentur die es gemacht hat gibt es leider nicht mehr.
Der Produktname wir bei mir leider nur als H2 dargestellt und ich würde das gerne ändern.
Hat wer eine Lösung für mein Problem ?
Quelltext auf der Seite:
Aladdin Lunchbox Iso 0,7 L
das einzige was ich gefunden habe war in einer CSS Datei, traue mich das aber nicht ändern:
h2.product--title {font-weight:400}
.buybox--inner .price--content {font-weight:400!important}
.motiv_group_container {display:relative; width:110px!important}
.removemotiv {font-size:11px; color:#C52E39; text-align: center; cursor:pointer}
Ich freue mich über alle Tipps
Alexander Wolf
es kommt ganz darauf an was du mit dem Produktnamen machen moechtest. Wenn es kein H2 mehr sein soll, ist das eine Template Anpassung. Der Code den du geschickt hast oben, ist CSS Code, d.h. du kannst nur das Aussehen damit verändern.
Unsere Agentur gibt es noch, du kannst dich jederzeit bei support@8mylez.com melden!
Gruß
Alexander
Festes Hintergrundbild - 8mylez.com
Philipp
ich habe selten einen so guten Artikel zum Thema "Themes erstellen" gelesen.
MFG Philipp
Alexander Wolf
vielen Dank für netten Worte!
Gruß
Alexander
2017 vs 2016 - Vorschau und Rückblick - Was erwartet euch bei 8mylez? - 8mylez.com
Calli
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
Alexander Wolf
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
Michael Popella
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
Alexander Wolf
das Theme findest du im Community Store: https://store.shopware.com/8mz3063909162617/flat-responsive-theme.html
Wir freuen uns über jede Bewertung im Store :)
Den Code findest du auch auf GitHub: "github.com/8mylezOrganization/shopware-8mzFlatResponsiveTheme"
Gruß
Alexander
Stephan
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
Björn
guck mal hier:
8mylez.com/blog/plugin-theme-struktur-ueberschreiben-und-plugins-individuell-anpassen/
Beste Grüße,
Björn
Shopware 5 Theming - Teil 1 - Vererbung - 8mylez.com
Wie du dir deinen eigenen Conversion Header bastelst - 8mylez.com
Stefan
Doch leider lässt sich das Theme nicht kompilieren. Cache gelehrt, aus- und eingeloggt - alles ausprobiert.
Wo kann da das Problem liegen?
Vielen Dank!
Alexander Wolf
vielen Dank für die netten Worte!
Kannst du mir Zugang zum Backend und FTP per Mail an i@8mylez.com schicken?
Gruß
Alexander
Michael Wiesenfahrt
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
Tom
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
Alexander Wolf
kannst du mir die LESS Dateien per E-Mail schicken an i@8mylez.com?
Dann schaue ich da rein!
Gruß
Alexander
Alexey
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
Alexander Wolf
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
Shopware 5 Theme Entwicklung mit Grunt - 8mylez.com
Serkan
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
Björn
hast du das Theme denn auch neu kompiliert? Das machst du im Theme-Manager.
Schöne Grüße,
Björn
Mateusz Zmuda
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!!!!
Alexander Wolf
can send me the code to i@8mylez.com" rel="nofollow">i@8mylez.com>.
I will have a look on it!
Best
regards,
Alexander
Dieter
Alexander Wolf
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
Markus Mohr
hat bei mir funktioniert.
Theme in Shopware 5 anlegen und anpassen - Video Teil 1
Björn Nagel
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
Björn Nagel
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
Alexander Wolf
du hast vollkommen Recht! Ist irgendwie untergegangen.
Vielen Dank :)
Gruß
Alexander
Marc
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
Alexander Wolf
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
Rückblick 2015 und Vorschau auf 2016 - Was erwartet euch bei 8mylez? - 8mylez.com
Michael
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.
Alexander Wolf
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
Wie du einfach und schnell deine Navigation zentrieren kannst
Tim
Alexander Wolf
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.
Shopware Logo aus dem Footer entfernen - 8mylez
Pro-Tipp: Theme erstellen mit den CLI Tools
Social Media Icons im Footer mit Shopware 5 einbinden
tuami
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
Alexander Wolf
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
Ralph
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.
Theme: FlatResponsive ab jetzt im Shopware Store - 8mylez
Dein erstes Theme im Community Store in 4 Schritten
Shopware 5 Theme Entwicklung mit Grunt - 8mylez
Was denkst du?