Schritt für Schritt zum eigenen Shopware-Themes

Folge 3: Tipps an Hand des neuen Shopware Fashion-Themes

Heute geht es an's Eingemachte. Denn nachdem Ihr in den letzten Folgen von mir erfahren habt, welche Dinge Ihr im Vorfeld bei der Theme-Entwicklung berücksichtigen solltet, nehme ich Euch heute mit an meinem Arbeitsplatz. Ich zeige Euch, wie Ihr die Umsetzung konkret vornehmt und gebe Euch anhand des von mir entwickelten Fashion-Themes praktische Einblicke.

In diesem Video habt Ihr eine Menge Infos erhalten. Sicherlich ist es schwierig, sich alles beim ersten Ansehen gleich zu merken. Deshalb habe ich Euch die im Video angesprochene Roadmap, von der Entwicklung bis hin zum Hochladen in den Store, noch einmal kompakt zusammengefasst.

Eure Roadmap für die Template-Entwicklung:

1. Installation

Startet mit der Installation und Einrichtung von Shopware.

2. Theme-Anlage

Legt Euch im Backend unter "Theme-Manager" ein neues Theme an.

3. Struktur-Einrichtung

Richtet Euch eine Projekt- und Theme-Struktur in Eurer Arbeitsumgebung ein. Nutzt dazu einen Editor Eurer Wahl z.B. PHPStorm.

4. Leitet vom Responsive Theme ab

Editiert jetzt Theme.php und leitet vom Responsive Theme ab. In dieser Datei kann auch später der Theme-Manager konfiguriert werden.

Vererbungssystem

Wichtig: Vermeidet es in jedem Fall, Anpassungen direkt im Bare/Responsive-Theme vorzunehmen oder das Bare-Theme zu kopieren und die Kopie zu editieren.

5. Basics nutzen

Lernt die Grundlagen kennen und setzt sie ein. Hier denke ich z.B. an: less, unitize() mixin, variables, Breakpoint variables, smarty oder blocks. Ausführliche Infos zu diesen Basics erhaltet Ihr auch in unserem Developer Guide "Developing Themes".

6. Entwicklungstools

Öffnet Eure Dev-Tools im Browser und aktiviert die "Create CSS Source Map” in den Theme-Manager Eures Backends.

7. Los geht's

Startet jetzt mit LESS und achtet immer darauf, nach dem "Mobile first"-Gedanken zu entwickeln.

8. Anpassungen im Template

Wenn Ihr Anpassungen in Eurem Template vornehmen möchtet, legt Ihr eine neue ".tpl-Datei" an. Mit "extends" wird der geänderte Inhalt in einem Block-Element überschrieben. Bei größeren Änderungen kann auch die gesamte .tlp-Datei überschrieben werden. ABER: Achtet stets auf die Updatefähigkeit Eures Themes. Wenn Blöcke oder Namen umbenannt werden, kann dies zu Problemen führen.

9. Cross-Brower-Testing

Um den einwandfreien Einsatz Eures Themes auf verschiedensten Endgeräte und Betriebssystemen herzustellen, solltet Ihr es im Vorfeld testen.

10. Experten-Anpassungen

Überlegt Euch, welche Bereiche Eures Themes editierbar sein sollten. Im Fokus steht hier also der Shopbetreiber, der nach dem Kauf Euer Theme in seinem Shop bedient. Gebt Ihr ihm beispielsweise die Möglichkeit, den Header farblich anzupassen, so muss er auch die Farbe der Icons anpassen dürfen, um immer eine Lesbarkeit gewähren zu können.

11. Qualitätssicherung

Endspurt: Erstellt Euer Theme-Plugin und führt eine Qualitätssicherung durch. Ggf. solltet Ihr hier auch die Kompatibilität zu den Shopware Premium Plugins sicherstellen.

12. Ladet Euer Theme in den Store hoch

Im letzten Schritt ladet Ihr jetzt Euer Theme in den Community Store hoch und erstellt eine Doku zum Theme mit Screenshots. Achtet bei der Beschreibung auf eine visuell ansprechende Gestaltung. Inspirationen hierzu findet Ihr in meinem Fashion-Theme. Ihr habt noch keinen Herstellervertrag, um Themes über den Store zu verkaufen? Dann erstellt Euch einfach unter www.account.shopware.com einen Account. Unter dem Menüpunkt "Plugin-Verwaltung" findet Ihr den Herstellervertrag, den Ihr akzeptieren müsst. Weitere Infos erhaltet Ihr in unserem Plugin-Sales-Guide.

Online-Trainings zur Theme-Entwicklung

Ergänzend zu meiner Roadmap und meinen Videos, erhaltet Ihr, wie in der heutigen Folge schon angekündigt, in Kürze weitere Unterstützung von meinem Kollegen Niklas Dzösch. Auf der Online-Lernplattform Udemy wird er Trainings zur Theme-Entwicklung anbieten. Erhaltet von ihm tiefgehende Infos in die Struktur von Shopware und eine bestmögliche Unterstützung bei Eurer Theme-Entwicklung. Natürlich werden wir Euch noch einmal informieren, sobald es losgeht. Also, stay tuned!