Shopware 5 Responsive Template einrichten – Teil 1

Mit Shopware 5 hat der Anbieter ein kostenloses Responsive Template beigepackt, welches ab der Version 5.2 sogar ausschließlich installiert wird. Dies ist nicht nur zeitgemäß in der heutigen Welt von Smartphone, Tablet und Co., sondern auch sehr leicht einzurichten.

Im Backend wählt man unter Einstellungen den Theme Manager auf und findet sich in einer übersichtlichen Verwaltung.

sw2

Hier findet man zunächst das rudimentäre Bare-Template, welches eigentlich nur aus Text besteht, aber alle Informationen bereitstellt, welche der webshop liefert. Nur hübsch aussehen tut das nicht. Aber dies ist das Grundgerüst für alle weiteren Anpassungen.

Darauf aufbauend – und das ist das entscheidende Prinzip, welches man verstehen muss, wird das Responsive Theme darüber gestülpt. Dieses enthält nun alle Styles – früher CSS, heute .less – die den shop so schön im Browser oder sonstigen Endgeräten darstellt. Diese beiden lässt man am besten unangetastet, denn auf Basis vom Vererbungsprinzip erstellt man sich nun über „Theme erstellen“ ein neues Gerüst, in meinem Beispiel „Kalender und Mehr“.

Weißt man das neu erstellte Theme dem shop zu über „Theme zuweisen“, wird das Theme kompiliert. Dies geschieht immer, wenn man Änderungen vorgenommen hat. Und, ganz wichtig, dies muss auch von Hand angestoßen werden, wenn man auf Dateiebene Anpassungen vorgenommen hat, dazu aber in den folgenden Teilen mehr.

Das kompilieren stellt somit alle Änderungen dem webshop zur Verfügung. Vorher sind diese Änderungen nicht sichtbar. Hier gibt es noch einen zusätzlichen Fallstrick: Shopware cached die anzuzeigenden Daten in einem schnellen Zwischenspeicher, dieser muss bei bestimmten Anpassungen zusätzlich über Einstellungen => Cache / Performance => Cache leeren geleert werden. Ansonsten werden im Browser nur Daten aus dem Cache angezeigt, obwohl man sonst alles richtig gemacht hat und wundert sich, dass sich nichts verändert hat.

Und dann kommt die große erste Ernüchterung… mit unserem neuen Template hat sich noch gar nichts verändert. Der shop sieht aus wie vorher.

Shopware hat bei der Anlage des neuen Templates ein leeres Grundgerüst im Dateiverzeichnis erstellt:

sw3

Ausgehend von der shop Basis liegen die neuen shopware 5 Template unter themes/Frontend. Hier wurde ein leerer Baum angelegt, welcher später noch für Anpassungen mit Leben gefüllt wird. Und hier sieht man schon, dass man auch als ungeübter ruhig probieren kann. Alle Änderungen lassen sich mit wenigen Mausklicks wieder korrigieren. Falsch angepasste Datei wieder entfernen, neu Kompilieren und alles ist wieder wie zuvor.

Aber dazu später mehr. Als erstes schauen wir im Backend, was hier schon einzustellen ist.

sw4

Hier lassen sich für die verschiedenen Bildschirmgrößen und Ausrichtungen eigene Logos hinterlegen. Wird hier nichts rein genommen, bleibt das DEMO Logo sichtbar. Für erste Tests völlig ausreichend.

im 2. Karteireiter lassen sich verschiedene Grundeinstellungen tätigen – mit denen ich mich ganz ehrlich noch gar nicht auseinandergesetzt habe.

Der 3. Karteireiter macht wieder Spaß, hier geht es zur Farbwahl. SHopware liefert 9 Farb-Vorlagen, um dem shop farblich in eine bestimmte Richtung einzustellen. Danach kann aber jeglicher Farbton angepasst werden mit eigenen Farbwerten. Dies ist praktisch, wenn das Unternehmen schon ein festes CI hat mit genau definierten Farbwerten.

sw6

sw5

Hier lassen sich nun Hintergründe, Schriftarten, Buttons, Rahmen etc. farblich und vom Schrifttyp anpassen, ohne auch nur eine einzige Template Programmierung getätigt zu haben.

Leider hat shopware in der noch relativ jungen Version 5 noch nicht alle Bereiche im Responsive Theme farblich berücksichtigt, so dass zum Beispiel der Hintergrund des Fußes im Standard #FFF (für weiß) fest per Code festgelegt wird und sich über obiges Menü im Backend nicht anpassen lässt.

Weiterhin gibt es spezielle Anforderungen oder Wünsche, welche sich mit Backendeinstellungen so nicht lösen lassen. Als Beispiel sei genannt, die mittig angeordnete Suche im Kopf nach Rechts zu verlagern, um Platz zu schaffen für ein großes Logo, oder für ein zweites Infofeld neben dem Logo.  Hier mal Beispiele:

Standard:
kopf1

Größeres Logo

kopf3

Mittiger Zusatz Slogan

kopf2

Man darf gespannt sein auf meinen 2. Teil. Der handelt dann von Bare Templates (um z.B. Bereiche auszublenden) und .LESS Dateien, um die Optik des shops anzupassen.

Viel Spass beim Ausprobieren.

 

PS: bei meinem Arbeitgeber, der MP-Datentechnik unterstützen wir Sie und ihr Unternehmen gerne bei der Umsetzung ihrer WebShop- und Webseiten Wünsche.

 

 

 

Schreibe den ersten Kommentar

Schreibe einen Kommentar