Storefront installieren

Storefront heißt das kostenlose Standardtheme von WooCommerce. Du bist WooCommerce-Anfänger? Dann kannst du mit Storefront nichts falsch machen:

• Storefront ist kostenlos und sieht edel aus
  
• Storefront kann direkt aus dem Backend von WordPress installiert werden
• Storefront und WooCommerce werden von Automattic produziert
• Storefront kommt ohne Slider und Shortcodes aus – du bist schnell eingelernt
• Storefront verzichtet auf Pagebuilder und bleibt nach der Umstellung auf Gutenberg zu 100% einsatzfähig
• Storefront verzeichnet über 100.000 Installationen. Falls du ein Problem hast, hatten es andere auch. Du findest schnell Hilfe

PS: Storefront ohne WooCommerce? Auch das funktioniert, wie du an diesem Beispiel siehst: Demoshops.de.

Storefront installieren und aktivieren

• Installiert wird Storefront im Dashboard über Design > Themes > Theme hinzufügen (du kannst Storefront auch über WooCommerde.com herunterladen, aber das macht die Installation nur komplizierter)
• Wie üblich folgt auf die Installation die Aktivierung
• Danach ist das Storefront-Theme einsatzfähig

Storefront bewirbt WooCommerce

Nach der Aktivierung erscheint oben ein Button mit der Aufschrift Erste Schritte mit Storefront. Dahinter verbirgt sich die Aufforderung, gleich WooCommerce zu installieren.

Theme und Plugin sind aber zwei paar Stiefel, deshalb bleibe ich in diesem Tutorial bei Storefront. Die Buttons zur Konfiguration findest du im Customizer.

Storefront im Customizer anpassen

• Den Customizer erreichst du über den Pinsel in der oberen Menüleiste (erscheint beim Aufruf der Themeverwaltung). Klicke auf Anpassen
• Im Customizer passt du Storefront an. Die Änderungen kannst du live mitverfolgen
• Wirksam werden die Änderungen mit einem Klick auf den blauen Speicherbutton, rechts oben im Customizer

Website-Infomationen

Eingabe von Titel, Untertitel und Website-Icon. Ideale Größe des Icons: 512×512 Pixel. Auf jeden Fall solltes es quadratisch sein.

Header

Jedes WordPress-Theme hat seine eigene Header-Größe. In Storefront: 1950×500 Pixel. Außerdem definierst du Hintergrundfarbe, Textfarbe und Linkfarbe.

Footer

Hier stellst du die Farbe des Footers ein, dem unteren Bereich deiner Website. In den Footer-Widgets bringst du die Links zu den Pflichtangaben deines Shops unter: Versand, Datenschutz, Widerrufsrecht, Impressum, AGB. Achte auf einen ausreichenden Kontrast zwischen Hintergrund- und Linkfarbe.

Hintergrund

Hier kannst du eine Hintergrundfarbe der gesamten Website wählen, oder ein Hintergrundbild. Gegen Hintergrundbilder spricht:

• Ein Hintergrundbild muss geladen werden – es verschlechtert die Geschwindigkeit, mit der sich der Shop aufbaut
• Ein Hintergrundbild wird auf unterschiedlichen Bildschirmen unterschiedlich angezeigt. Was auf dem Laptop super aussieht, kann auf dem Tablet fürchterlich sein.

Fazit: Nimm eine Hintergrundfarbe, kein Hintergrundbild.

Typografie

Definiere:

• Überschriftfarbe
• Textfarbe
• Link/Akzentfarbe. Die Akzentfarbe erscheint an verschiedenen Stellen in Storefront, sie sorgt für einen harmonischen Gesamteindruck deines Shops

Buttons

Hier stellst du Hintergrund- und Textfarbe für die Buttons im Shop ein, zum Beispiel den Kauf-Button.

Layout

Hier kannst du entscheiden, ob Storefront die Sidebar rechts oder links einblendet.

Menüs

Verwaltung der Menü-Positionen. Drei Positionen stehen zur Verfügung:

• Primäres Menü
• Sekundärmenü
• Handheld-Menü

Doch bevor du die Menü-Positionen definierst, muss erstmal ein Menü da sein:

• Lege einige WordPress-Seiten an, zum Beispiel Unternehmensgeschichte und Unternehmensphilosophie.
• Lege ein Menü an. Die Menüverwaltung von WordPress öffnest du über Design > Menüs.
• Ziehe die WordPress-Seiten in dieses Menü

Widgets

Hier kannst du in 6 Bereiche Widgets einfügen:

• Sidebar
• Unter dem Header
• Footer 1
• Footer 2
• Footer 3
• Footer 4

Statische Startseite

Wichtig: Hier stellst du vom Blogmodus in den Shopmodus um

• Der Shop wird nebenbei zum Blog betrieben? Startseite = Blogbeiträge.
• Der Shop steht im Mittelpunkt? Statische Startseite =  Shopseite an.

Kostenlose Alternativen zu Storefront

Storefront ist auf durchschnittliche Shops zugeschnitten. Wer mehr will, greift zu einem spezialisiertem Theme. Hier findest du andere kostenlose Themes, die mit WooCommerce gut harmonieren.