WooCommerce Shop aufbauen

Dein Erfolg im E-Commerce hängt von einer Vielzahl essentiellen Faktoren ab. Neben Preis, Produkt und Kundenservice steht auch die Optik und Funktionalität deines Shops im Vordergrund. Das Design hängt mit der Usability, Conversion-Optimierung und Auffindbarkeit in den Suchmaschinen zusammen. Der richtige Shop und das richtige Theme kann je nach Qualität dein Online-Geschäft viele Schritte voranbringen, aber auch zurück werfen. Damit dein Shop nicht an Design-Schwächen scheitert, solltest du dir etwas Zeit nehmen, um dich für ein hochwertiges Theme zu entscheiden. In diesem Beitrag findest du einige Beispiele für ein WooCommerce Theme.

Warum WooCommerce?

Natürlich gibt es sehr viele gute Shopsysteme, mit verschiedenen Schwerpunkten. Hier ein paar Facts der Expertin Olga Kulmann von TemplateMonster, die für einen WooCommerce Shop sprechen:

Ein WooCommerce Shop zu erstellen ist sehr günstig: Das E-Commerce-Plugin für WordPress kostet nichts, so wie das CMS selbst. Fertige Designs bzw. Themes, die einem Shop das gewünschte Aussehen verpassen, sind im Durchschnitt für 70-100 Euro erhältlich. Der Aufwand gegenüber einem individuell programmierten Shop ist somit deutlich geringer. Du liegst also auch nicht falsch, wenn du dich für diesen kostengünstigen Weg zur eigenen E-Commerce-Website entscheidest. Du solltest nur einiges in Erwägung ziehen, damit eine große Ersparnis anfangs nicht zur Kostenfalle wird. 

So machst du keinen Fehlgriff beim Kauf eines WooCommerce Themes

Wer sich gut informiert an die Theme-Suche macht, der hat bessere Chancen, ein gutes WooCommerce Design zu finden und zusätzliche Kosten für nie abgeschlossene Überarbeitungen zu vermeiden. Deshalb möchten wir dir jetzt einige der wichtigen Merkmale näher bringen. Was macht also ein gutes Theme aus?

Modernes und attraktives Aussehen 

Die Gestaltung ist das Erste, was der potenzielle Kunde sieht, wenn er einen Onlineshop besucht. Ob er durch deine Produkte stöbern oder sofort weg klicken wird, ist auf den ersten Eindruck zurückzuführen – abgesehen davon, dass er auf der Website zufällig gelandet ist. Dein Shop sollte deshalb ansprechend zeitgemäß aussehen. Ein solches Design wirkt vertrauenswürdig und verschafft ein positives Image. 

Die Einsteiger haben es gewöhnlich nicht leicht zu bestimmen, ob die Gestaltung gut oder schlecht ist. Die Fragen helfen dir die Qualität zu beurteilen, sowie zu verstehen, ob das Theme für deinen Shop geeignet ist:  

  • Welche Gefühle ruft das Design bei dir hervor? Grobe Design-Fehler wie falsche Kontraste, unangemessene Typografie oder Elementengröße können ärgern, irritieren oder unangenehm wirken. 
  • Welche Botschaft vermittelt das Design? Stimmt diese mit der deines Shops überein? 
  • Passt das Farbschema, die Schriften und Icons zu deinem Angebot und deiner Zielgruppe? 
  • Ist das Design modern? Erinnert dich nichts an die Anfänge des Internets oder die 2000er? Wenn sich ein Theme im Vergleich zu anderen Websites seltsam oder veraltet anfühlt, dann werden es die Benutzer auch bemerken.  

Hohe Benutzerfreundlichkeit

Durchgestylte Gestaltung nützt wenig, wenn die Bedienbarkeit hinterher hinkt. Wie schnell und mit wie viel Mühe die Besucher an ihr Ziel gelangen, steht für die Benutzerfreundlichkeit einer Website. Klares Design ohne Ablenkungen und Hürden schafft nachvollziehbare Strukturen. Übersichtliche Menüs bilden das Grundgerüst eines guten Themes. Öffne die Live-Demo eines gewünschten WooCommerce Themes und wirf einen Blick auf diese Prüfliste:

  • Verstehst du schnell, worum es auf der Shop-Site geht?
  • Kannst du dich leicht auf der Website zurechtfinden? 
  • Sind Inhalte gut strukturiert dargestellt? 
  • Ist das Navigationsmenü klar aufgebaut? Kannst du problemlos die gewünschte Sektion erreichen?

Anpassungsfähigkeit 

Die Flexibilität in Sachen Optik und Funktionalität gehört neben der perfekten Usability zu der wichtigsten Eigenschaften, die du dir bei der Theme-Auswahl vor Augen halten solltest. Dein Theme soll einen hohen Grad an Anpassbarkeit von Haus aus bieten, sowie hilfreiche Erweiterungen unterstützen. WooCommerce Themes sollen grundsätzlich mit allen Plugins für WooCommerce und WordPress funktionieren, aber das geht nicht immer ohne weiteres. Viele Anbieter bereiten daher gezielt ihre Themes für populäre Plugins und Services vor, um die optimale Kompatibilität garantieren zu können. Deshalb empfiehlt sich, die Optionen jedes einzelnen Themes näher unter die Lupe zu nehmen und ggf. direkt den Entwickler nach der Kompatibilität mit konkreten Addons zu fragen. 

WooCommerce Plugins

Nach dem Kauf braucht dein Theme höchstwahrscheinlich gewisse Anpassungen, um das Erscheinungsbild besser an deine Corporate Identity, an dein Produkt oder an deine Vorstellungen abzustimmen, sowie fehlende Seiten zu erstellen. Nach einiger Zeit sind weitere Optimierungen angesagt, z.B. lohnt es sich festzustellen, ob das bestehende Design bei Besuchern gut ankommt, um bei Bedarf einzelne Elemente zu verbessern, um höhere Conversions zu erzielen. Du kannst verschiedene Warenkorb- oder Button-Designs testen, um zu sehen, was für deinen Shop einen Sinn ergibt. Zudem geht die Entwicklung des Webs stetig weiter, und du hast definitiv bessere Karten, wenn du deinen Shop an ändernde Trends schnell anpasst. 

Um benötigte Änderungen an WooCommerce-Seiten ohne HTML und CSS vornehmen zu können, muss ein Theme mit einfachen Anpassungstools ausgestattet sein. Andernfalls musst du stetig einen Programmierer hinzuziehen. Änderungen an Farben, Schriftarten, Hintergründen und am Layout lassen sich grundsätzlich mit den standardmäßigen WordPress Tools wie dem Live Customizer und dem Gutenberg-Editor vornehmen. Je nach Theme finden sich auch zusätzlich einmalige Einstellungen. 

Wenn du an jedem Bereich deines Shops gründlich feilen möchtest, dann ist es ratsam, einen bequemeren Page-Builder wie den Elementor zu verwenden, der dir großartige Optionen zur visuellen Anpassung bietet, ohne ‚Coden‘ und ohne lange Einarbeitungszeit. 

Technische Ausführung

Die technische Umsetzung ist ein weiterer Aspekt, der zum Erfolg deines Shops beiträgt. Für einen Laien ist es eher schwieriger festzustellen, ob der Code einwandfrei ist oder ob die Performance schnell ist, ohne dass man ein Theme heruntergeladen und mit speziellen Tools getestet hat. Man empfiehlt oft, die URL einer Demo-Seite bei Google Page Insights einzugeben, um die Geschwindigkeit eines Themes zu messen. Leider erhältst du auf diese Weise keine richtigen Werte, weil die Ladezeit stark vom Hosting und Server abhängt. Wenn es um große Websites mit Abertausenden von Templates geht, so bekommst du kein objektives Bild. So oder so solltest du darauf achten, dass die folgenden Features in der Theme-Beschreibung nicht fehlen, weil diese die Usability und daher den Bereich SEO direkt oder indirekt beeinflussen:

  • Sauberer und valider Code – die Qualität des Quellcodes ist für eine schnelle Ladezeit mitentscheidend
  • Konsequente Optimierungen für eine hohe Geschwindigkeit, z.B. der Einsatz von Tools zur Beschleunigung oder Verzicht auf Technologien, welche die Website verlangsamen 
  • Cross-Browser-Kompatibilität steht für korrektes Funktionieren der Website in den gängigen Browsern und ist ein Muss
  • Responsive Design – die Möglichkeit des Layouts, sich an jede Bildschirmgröße anzupassen. Dieses Feature ist heute auch Pflicht 
  • Mobile First steht für die Optimierung für Mobilgeräte. Die Seiten, die nach diesem Prinzip gebaut werden, laden schneller auf Mobilgeräten und werden in den Google-Suchergebnissen höher ausgegeben

Support

Es wäre gut, wenn ein Theme-Entwickler dich bei Fragen oder eventuellen Problemen nicht im Stich lässt. Deshalb solltest du vorher klären, ob du mit dem kostenlosen Support nach dem Kauf rechnen kannst. 

Online Shop Design

Die 10 besten WooCommerce Themes

Wir stellen dir jetzt die 10 WooCommerce Themes vor, die es dir ermöglichen, einen Webshop ohne Profihilfe umzusetzen und am Leben zu halten. Sie sind alle nach den Webstandards kreiert und verfügen über umfangreiche Tools, mit deren Hilfe du benötigte Anpassungen an der Gestaltung per Mausklick meisterst. 

Woostroid2 – Mehrweckiges WooCommerce Theme

  • 65 fertige, aber editierbare Shop-Designs
  • Template-Bibliothek mit über 1000 Elementen
  • Elementor Page-Builder mit Addons
  • JetWoobuilder – Addon für einmalige Erstellung von Produkt- und Kategorieseiten
  • JetSmartFilters (Filtertool)
  • JetCompareWishlists – Addon für Wunsch- und Vergleichslisten
  • Optimierte Performance

OneKart – Mehrweckiges WooCommerce Design

  • WPBakery Page Builder
  • Right-to-Left-Sprachunterstützung
  • Responsive und optimiert für Mobilgeräte
  • Revolution Slider
  • Benutzerdefinierte Widgets
  • Unterstützt das WPML-Übersetzungsplugin

Mola – WooCommerce Theme für einen Modeshop

  • Elementor Page-Builder
  • Erweiterte Layout-Optionen
  • SEO-freundlich programmiert
  • Contact Form7
  • Revolution Slider
  • Ständige Updates
  • Support

WooCommerce Theme für einen Kinderladen

  • Elementor Page-Builder
  • Elementor-Plugins (JetElements, JetBlocks, JetTabs, JetThemeCore, JetWooBuilder)
  • WPML-Unterstützung
  • Retina-ready
  • Sauberer und valider Code
  • SEO-freundlich
  • Bilder inbegriffen
  • Support

Kokomi – WooCommerce Theme für einen Bioshop

  • Elementor Page-Builder
  • RTL-Unterstützung
  • Revolution Slider
  • WPML-kompatibel
  • Responsive Design 
  • Optimierung für Mobilgeräte
  • Retina-ready
  • Support

Trinity – WooCommerce Theme für einen Sportladen

  • Elementor Page-Builder
  • Farbeinstellungen
  • Optimierter Quellcode
  • Ajax-Technologie – Warenkorb zeigt Änderungen in Echtzeit an, ohne dass die Seite neu geladen muss
  • WPML-ready
  • Responsive Design
  • Mobiloptimiert
  • SEO-freundlich

Futura – Mehrzweckiges WooCommerce Theme

  • Elementor Page-Builder
  • Header- und Footer-Builder
  • 4 Katalog-Layouts
  • 3 Styles für Produktseiten
  • Ajax-Produktfilter, -Wunsch- und Vergleichslisten, -Warenkorb 
  • WPML-ready
  • Responsive Design

Marinesto – WooCommerce Theme für einen Angelshop

  • Elementor Page-Builder
  • Elementor-Plugins (JetElements, JetBlocks, JetTabs, JetThemeCore, JetWooBuilder)
  • Sauberer und valider Code
  • WPML-Unterstützung
  • Retina-ready
  • Bilder inbegriffen

Bardy – WooCommerce Theme für einen Haarshop

  • Elementor Page-Builder
  • Einfache Installation
  • WPML-Unterstützung
  • Responsive Design + mobiloptimiert
  • Suchmaschinenfreundlich
  • Retina-ready

Storaxy – WooCommerce Theme für einen Elektronikshop

  • AMP-Technologie (Beschleunigte Mobilseiten)
  • WPBakery Page Builder
  • Ajax-Warenkorb
  • Revolution Slider
  • GPL-Lizenz
  • Retina-ready

Fazit

Wer einen Webshop an den Start bringen will, dem steht recht viel Arbeit an – sowohl offline als auch online. Ein gutes Shop-Design ist in der Lage, dir Nerven und Kosten nicht nur zu Beginn, sondern auch im Nachhinein zu sparen. 

Wenn du hierzu Fragen hast, melde wende dich gern an die Experten von TemplateMonster, die dir mit Rat und Tat zur Seite stehen!

Olga Kulmann

Olga Kulmann ist Mitglied des deutschen Marketer-Teams von TemplateMonster. Ihr Interessenkreis umfasst von Online-Marketing über E-Commerce bis hin zum Webdesign. Olgas Anliegen ist es, die Blogleser mit besten Erfahrungen und geprüftem Expertenwissen in diesen Bereichen vertraut zu machen.

Meine Meinung zu "Die 10 besten WooCommerce Shop-Designs und was du bei der Auswahl beachten solltest"

Avatar

Florian 2. Mai 2020 at 16:24

Hallo Olga,

toller Beitrag zum Thema Themes und Templates für WooCommerce. Kaum ein Thema birgt so viel Missverständnis und Unsicherheit.

Der Artikel fasst aber die Vor- und Nachteile diverser Layouts toll zusammen.
Elementor ist hier für den Laien und auch Profi eine super Lösung in Kombi mit den Themes.

Florian

Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Dir gefällt der Beitrag? Jetzt teilen!

Jetzt kostenlos und unverbindlich testen!

Teste Billbee für 30 Tage - völlig ohne Risiko!
30 Tage kostenlos testen!
Der Account läuft nach 30 Tagen automatisch aus.
close-link
Hier klicken!