Gestalten Sie Ihren Shop mit einem kostenlosen Theme
Ihr Theme bestimmt, wie Ihr Shop aussieht — Kopfzeile, Farben, Schriften, Layout und die Art, wie Produkte dargestellt werden. Sie müssen kein Theme kaufen und keinen Code schreiben, um einen sauberen, professionellen Shop zu erhalten. Diese Anleitung baut einen ansprechenden Shop mit zwei ausgezeichneten kostenlosen Themes.
Diese Anleitung setzt voraus, dass WooCommerce installiert ist — siehe WooCommerce installieren und einrichten, falls noch nicht.
Was ein Theme tut (und was nicht)
- Das Theme steuert das Aussehen — Ihr Logo, Farben, Schriften und das Gesamtlayout.
- WooCommerce steuert den Shop — Produkte, Warenkorb, Kasse und Zahlungen.
- Plugins (wie unsere) fügen Funktionen hinzu.
Sie können Ihr Theme jederzeit wechseln, ohne Produkte oder Bestellungen zu verlieren — probieren Sie also ruhig aus.
Schritt 1 — Ein Theme finden und installieren
- Gehen Sie in Ihrem WordPress-Dashboard zu Design → Themes.
- Klicken Sie oben auf Theme hinzufügen.
- Suchen Sie ein Theme nach Namen, fahren Sie mit der Maus darüber und klicken Sie auf Installieren, dann Aktivieren.
Suchen Sie ein Theme nach Namen und klicken Sie auf Installieren — hier gibt es Tausende kostenlose Themes.
Der Themes-Bildschirm — einmal installieren, dann das gewünschte Theme aktivieren.
Im Folgenden gehen wir zwei kostenlose Themes durch, die hervorragend mit WooCommerce funktionieren. Wählen Sie den Weg, der zu Ihnen passt — Sie brauchen nur einen.
| Astra | Twenty Twenty‑Five | |
|---|---|---|
| Am besten für | Schnellstes gutes Ergebnis | 100 % „natives" WordPress |
| Bearbeitet mit | Dem Customizer (einfache Felder) | Dem Editor (Blöcke) |
| Lernkurve | Sehr sanft | Etwas anspruchsvoller |
| Erstellt von | Brainstorm Force | Dem WordPress-Team |
Weg A — Astra (der schnelle, geführte Weg)
Astra ist eines der beliebtesten kostenlosen Shop-Themes. Es ist leicht, schnell und wird über den benutzerfreundlichen Customizer bearbeitet, der jede Änderung in einer Live-Vorschau zeigt.
Machen Sie es mit dem Customizer zu Ihrem eigenen
Nach dem Aktivieren von Astra gehen Sie zu Design → Customizer. Das linke Feld listet alles auf, was Sie ändern können; rechts sehen Sie Ihre Website live, während Sie arbeiten.
Der Customizer: links eine Einstellung ändern, rechts sofort sehen.
Logo und Shop-Namen hinzufügen — öffnen Sie Website-Informationen. Laden Sie ein Logo hoch, legen Sie Website-Titel und Untertitel fest und wählen Sie die Logo-Größe.
Unter Website-Informationen laden Sie Ihr Logo hoch und legen den Shop-Namen fest.
Farben wählen — öffnen Sie Global → Farben. Wählen Sie eine fertige Palette oder legen Sie eigene Akzent-, Link-, Überschriften- und Textfarben fest. Ihre Akzentfarbe wird für Schaltflächen und Links im gesamten Shop verwendet — der schnellste Weg, dem Shop Ihre Marke zu geben.
Eine Akzentfarbe festlegen — und sie zieht sich durch Schaltflächen und Links überall.
Schriften wählen — öffnen Sie Global → Typografie. Wählen Sie ein fertiges Schrift-Preset oder legen Sie bestimmte Schriften und Größen für Textkörper und Überschriften fest. Gute Typografie lässt einen Shop ohne Mehraufwand edel wirken.
Die Typografie steuert Ihre Schriften websiteweit — beginnen Sie mit einem Preset und feilen Sie bei Bedarf.
Kopfzeile anordnen — öffnen Sie Header-Builder. Ziehen Sie Elemente (Logo, Menü, Suche, Warenkorb) nach links, in die Mitte oder nach rechts der Kopfzeile, bis es passt.
Ziehen Sie Logo, Menü und Warenkorb im Header-Builder an die richtige Stelle.
Wenn Sie zufrieden sind, klicken Sie auf Veröffentlichen, um zu speichern.
Ihr Schaufenster
Mit aktivem WooCommerce gibt Astra Ihren Shop- und Produktseiten automatisch ein sauberes, modernes Layout — ohne zusätzliche Einrichtung.
Ihre Shop-Seite mit Astra — ein sauberes Produktraster direkt ab Werk.
Eine Produktseite — Bild, Preis, Warenkorb und Beschreibung, alles automatisch gestaltet.
Optionale Abkürzung — Starter Templates. Astra bietet fertige Designs, die Sie über Design → Starter Templates mit wenigen Klicks importieren können. Die aktuelle Version verlangt zunächst die Verbindung eines kostenlosen Kontos. Es ist ein schneller Weg zu einem fertigen Look, aber völlig optional — alles oben funktioniert auch ohne.
Weg B — Twenty Twenty‑Five (das offizielle Block-Theme)
Twenty Twenty‑Five ist das Standard-Theme des WordPress-Teams. Es wird mit dem Editor bearbeitet, in dem jeder Teil Ihrer Website aus Blöcken besteht — denselben Blöcken, die Sie beim Schreiben einer Seite verwenden.
Den Editor öffnen
Gehen Sie zu Design → Editor. Sie sehen ein Dashboard für Stile, Navigation, Seiten, Templates und Muster, mit einer Live-Vorschau Ihrer Website.
Der Editor — Ihre Schaltzentrale für ein Block-Theme.
Aussehen mit Stilen ändern
Klicken Sie auf Stile, um Farben, Typografie, Hintergründe und Layout für die ganze Website auf einmal zu ändern. Klicken Sie auf Stile durchsuchen, um fertige Stil-Varianten mit einem Klick auszuprobieren.
Stile ändern Farben und Schriften websiteweit — probieren Sie zuerst die eingebauten Varianten.
Templates bearbeiten
Unter Templates öffnen Sie das Template für jeden Seitentyp — Startseite, Blog oder einzelnes Produkt — und ordnen seine Blöcke neu an. Das ist aufwändiger als Astras Customizer, gibt Ihnen aber vollständige Kontrolle.
Templates lassen Sie das Layout jedes Seitentyps Block für Block bearbeiten.
Ihr Schaufenster
WooCommerce funktioniert auch mit Twenty Twenty‑Five und gibt Ihnen einen sauberen, minimalistischen Shop, der die Gestaltung des Themes nutzt.
Derselbe Shop mit Twenty Twenty‑Five — minimalistisch und vollständig „natives" WordPress.
Welches soll ich wählen?
- Wählen Sie Astra, wenn Sie den schnellsten Weg zu einem ansprechenden Shop mit einfachen, geführten Feldern wollen. Das passt zu den meisten Einsteigern.
- Wählen Sie Twenty Twenty‑Five, wenn Sie bei reinen WordPress-Blöcken bleiben möchten und eine etwas steilere Lernkurve nicht scheuen.
Es gibt keine falsche Wahl, und ein späterer Wechsel ist einfach.
So sehen Ihre Produktbilder am besten aus
Welches Theme Sie auch wählen — Ihre Produktfotos leisten die meiste visuelle Arbeit. Verwenden Sie klare, einheitliche Bilder — und denken Sie daran, dass große Fotodateien Ihre Website verlangsamen. Unser Plugin Image Optimizer komprimiert sie automatisch, sodass Ihr Shop schnell bleibt — ohne Qualitätsverlust.
Weitere gute kostenlose Themes
Wenn keines passt, sind auch diese kostenlosen Themes hervorragend für WooCommerce und werden ähnlich bearbeitet:
- Storefront — das offizielle Theme der WooCommerce-Macher.
- Kadence und Blocksy — schnell, flexibel, mit eigenen Starter-Designs.
- Neve und OceanWP — leichtgewichtig und einsteigerfreundlich.
Die Fähigkeiten aus dieser Anleitung — ein Theme installieren und dann Customizer oder Editor nutzen — gelten für alle.