Storefront – Das offizielle WooCommerce Theme

Was ist Storefront?

Storefront ist das offizielle WooCommerce Theme von WooThemes/Automattic. Es basiert auf dem offiziellen Starter-Theme Underscores, welches unter Anderem die Basis der beliebten Standard-Themes von WordPress ist.

Perfekte Integration von WooCommerce

Storefront hat selbstverständlich eine sehr solide WooCommerce-Integration und berücksichtigt dabei sogar einige der beliebtesten Erweiterungen wie Memberships oder Bookings. Storefront selbst ist kostenlos, ihr könnt es euch hier herunterladen.

Die Basis von Storefront

Storefront hat eine solide Basis und wird von WooCommerce Core-Entwicklern stetig verbessert. Das Theme ist relativ umfangreich und dennoch sehr sauber strukturiert. Ein Feuerwerk an Shortcodes, unsicheren Slidern oder gebundelten Plugins wird man hier nicht finden – hier könnten sich einige Themeforest-Themes sicher einige Ideen abschauen.

entwicklerfreundlich

Storefront verfügt nicht nur über eine gute Dokumentation, sondern bietet Entwicklern auch eine gute Übersicht über gängige Best Practices in der Entwicklung von Themes für WooCommerce. Man erhält ebenfalls alle SASS-Dateien, welche sich dann automatisch in komprimierte CSS-Dateien umwandeln lassen. Im Github-Repository von Storefront findet ihr auch die Version mit Grunt-Unterstützung.

Installation und Einrichtung

Die Einrichtung ist denkbar einfach: Theme herunterladen, in WordPress installieren, fertig. Eine kleine Besonderheit gibt es nach der Installation: Storefront verfügt über eine eigene kleine Optionsseite innerhalb des Tabs „Design“. Hier werdet ihr z.B. auf Child-Themes, Plugins hingewiesen und bekommt kontnuierliche Informationen zu den Neuigkeiten in der Entwicklung von Storefront.

Storefront – das Parent-Theme

Storefront versteht sich als Parent-Theme und nicht als klassisches Starter-Theme wie underscores. Das bedeutet die Anpassungen am Theme finden über ein Child-Theme statt. Das dieses Modell sehr erfolgreich sein kann zeigt z.B. auch das größte WordPress Theme Framework Genesis. Eine fertiges Child-Theme, mit welchem Ihr direkt loslegen könnt, findet ihr hier auf Github.

Erweiterungen

Storefront bietet durch seinen Anspruch auf eine solide Basis keine weiteren Extras die man von diversen Premium-Themes kennt. Doch werden in regelmäßigen Abständen Plugins direkt für Storefront entwickelt und über woothemes.com vertrieben. So hab ihr folgende Möglichkeiten der Erweiterung:

  • Integration eines Parallax-Hero
  • Integration eines MegaMenüs
  • Customiser-Erweiterung für euren Shop und Blog
  • Verbesserte Produktbewertungen
  • flexible Kontaktsektionen
  • „sticky“ Warenkorb-Button

Customiser und MegaMenü in Aktion

Da wir selbst Storefront als mögliche Basis unserer WooCommerce-Projekte testen haben wir uns die beiden für uns sinnvollen Erweiterungen „Storefront MegaMenu“ und „Storefront Checkout Customiser“ besorgt und möchten euch einen kurzen Einblick dazu geben:

Storefront MegaMenu

Storefront setzt statt unzähliger Options-Panel voll auf die Integration mittels Customiser. Ihr findet die Einstellungsmöglichkeiten zum Megamenü also direkt im Customiser unter „Menüs“.

Umwandeln eines Menüpunktes zu einem Megamenü

Nachdem ich nun mein Menü gewählt habe und einen der Navigationspunkte anklicke, erhalte ich neben der Anpassung der Beschriftung, auch die Option aus diesem ein MegaMenü zu erstellen. Ich bekomme dann die Möglichkeit zu diesem Menüpunkt Widgets anzugeben, welche ich unter dem entsprechenden Menüpunkt dargestellt haben möchte. Hierbei habe ich Zugriff auf alle Widgets die in meiner WordPress-Installation integriert sind (WordPress & WooCommerce-Core + Plugins die Widgets integrieren).

Die Möglichkeiten der Ausgestaltung von komplexen Menü-und Navigationshierarchien sind dabei kaum Grenzen gesetzt. Ich habe mir über die Jahre viele komplexe Menü-Plugins angesehen und getestet, in den meisten Fällen habe ich es dann doch selbst umgesetzt, da eine unzureichende Programmierung, eigene Style-Vorgaben o.Ä. meinen Eindruck schnell geschmälert haben. Storefront MegaMenu gehört nicht zu dieser Art von Plugins, es gibt uns genau das, was wir benötigen und nicht mehr.

Storefront Checkout Customiser

Den Checkout Customiser findet ihr ebenfalls im Panel-Bereich eures Customisers.

Ihr habt hier insgesamt drei Einstellungsmöglichkeiten:

Ablenkungsfreier Checkout

Der ablenkungsfreie Checkout entfernt alle „störenden“ Elemente aus eurem Kassenbereich. Hierbei geht es vor allen Dingen um die Entfernung der Sidebars.

Checkout Layout

Hier könnt ihr das generelle Layout eures Kassenbereiches verändern. Dazu habt ihr die Entscheidungsmöglichkeit zwischen „Stacked“ (alle Kassenfelder in voller Breite untereinander) oder „Two-column adress“ (Rechnungs-und Lieferadresse nebeneinander).

Two Step Checkout

Wenn ihr die Option „Two Step Checkout“ wählt, wird euer Kassenbereich in zwei Stufen unterteilt. Im ersten Bereich werden alle Daten zu Rechnungs-und Lieferadresse angegeben und im zweiten Schritt werden dann die Zahlungs-und Lieferoptionen abgefragt. Diese Modell dürfte vielen von größeren Online Shops wie z.B. Amazon bekannt sein.

Weitere Erweiterungen:

Wie bereits erwähnt gibt es für Storefront noch einige Erweiterungen. Eine komplette Übersicht findet ihr direkt bei woothemes.com. Am besten folgt ihr einfach diesem Link.

Storefront 2.0

Einige werden es sich schon bemerkt haben, Storefront ist kein Designwunder. Das haben allerdings auch die knapp 30 Entwickler hinter diesem Theme bemerkt und einige signifikante Verbesserungen in der kommenden 2.0 Version von Storefront vorgenommen. So wurden neben der Entfernung einiger unnötiger Rahmen vor allem der Headerbereich, die mobile Navigation und die gesamte Typographie überarbeitet. Wir werden diesen Artikel entsprechend updaten, wenn Storefront 2.0 seine Beta-Phase überstanden und der offizielle Release ansteht.

Storefront 2.0 Release

Es ist nun soweit und Storefront 2.0 geht nach einigen Beta-Tests offiziell an den Start.

Veränderung der Typographie

Ein wesentlicher Schritt in die richtige Richtung ist die Veränderung der gesamten Typographie. Die neue Source Sans Pro Schriftart passt wesentlich besser zu einem modernen und schlichten Online Shop.

Verbesserung der mobilen Navigation

Bei nahezu allen Kundenprojekten die wir mit Storefront umgesetzt haben, haben wir umfangreiche Anpassungen an der mobilen Navigation vorgenommen. Die bisherige Navigation war funktional, aber nicht sehr zeitgemäß. Umso besser das genau an diesem Punkt nachgearbeitet wurde. Dank der neuen Navigation bekommt der User deutlich mehr vom eigentlichen Online Shop zu sehen und hat Zeit für das wirklich Wesentliche – das Kaufen eurer Produkte. Außerdem wurde die Toggle-Navigation mit einer kleinen Animation versehen, so ist auch dem unbedarften Mobil-Nutzer klar, wie eure Navigation zu schließen ist.

Warenkorb und Checkout

Auch an den zentralen Abbruchpunkten eueres Online Shops, nämlich dem Warenkorb und dem Kassenbereich wurden Verbesserungen vorgenommen. Die nicht zeitgemäßen Rahmen sind verschwunden und wurden durch moderne Kontraste ersetzt. Damit bekommt euer Warenkorb-und Checkoutbereich ein deutliche moderneres Aussehen und eine stimmigere Gesamtwirkung:

Anpassung Mein Account

Kennt ihr schon das neue Account-Layout von WooCommerce 2.6? Storefront hat sich auch darum bereits gekümmert und bieten eine übersichtliche und strukturierte Darstellung des neuen Tab-basierten Accountbereiches:

Unter der Haube

Auch für Entwickler hat sich einiges getan:

  • Alle SASS, CSS, JavaScript-Dateien und Bilder wurden in ein eigenes Verzeichnes /assets/ verschoben
  • Alle CSS-Dateien werden nun minifiziert
  • Alle Template-Funktionen befinden sich nun ausnahmslos in storefront-template-functions.php und storefront-woocommerce-template-functions.php
  • Neue Klassen für WooCommerce, Jetpack und den Customizer wurden hinzugefügt
  • Das neue Custom-Logo-Feature von WordPress 4.5 kommt nun zum Einsatz
  • Der neue storefront_header_styles Filter für die Bearbeitung des Headers wurde eingeführt
  • Einige Funktionen wurden als „depricated“ eingestuft

Storefront und German Market

Wir setzen bei unseren Projekten stets auf German Market. Umso wichtiger ist dabei natürlich die Frage, wie gut arbeiten Storefront und German Market zusammen? Und wie sieht es insgesamt mit der deutschen Lokalisierung für Storefront aus? Kurz gesagt – sehr gut. Storefront ist vollständig für die deutsche Sprache lokalisiert und arbeitet problemlos mit dem German Market Plugin zusammen. Einige Übersetzungsfehler sind uns allerdings noch bei den Erweiterungen von Storefront aufgefallen. Hier werden wir euch bei Zeiten die entsprechenden Übersetzungsdateien zur Verfügung stellen und dann sollte eurem Online Shop mit Storefront nichts mehr im Wege stehen.

Schreibe einen Kommentar