Im E-Commerce zählt der erste Eindruck – und dieser entsteht oft auf der Startseite Deines Onlineshops. Statt einer klassischen Produktliste erwarten Besucher heute inspirierende Inhalte, attraktive Bilder und ein Einkaufserlebnis, das ihnen im Gedächtnis bleibt. Genau an dieser Stelle kommen die Einkaufswelten in Shopware 5 ins Spiel. Sie ermöglichen Dir, Deine Startseite und andere Shopbereiche wie eine digitale Schaufensterfläche zu gestalten – flexibel, emotional und verkaufsfördernd.
Egal ob Du Deine Shopware Startseite bearbeiten, eine Landingpage erstellen oder gezielt mit Storytelling in Shopware arbeiten willst: Die Einkaufswelten bieten Dir das passende Werkzeug. Und das ganz ohne Programmierkenntnisse.
In diesem Artikel erfährst Du, wie Du mit Einkaufswelten Deine Inhalte in Szene setzt, worauf Du bei der Einrichtung achten solltest und wie Du durch clevere Strukturierung und mobile Optimierung das Maximum aus Deinen Seiten herausholst.
Einkaufswelten sind in Shopware 5 ein modulares Content-Tool, mit dem Du Seiten wie Startseite, Kategorieübersichten oder thematische Landingpages individuell gestalten kannst. Im Gegensatz zu starren Templates bieten sie Dir maximale Flexibilität. Du kannst Elemente wie Banner, Texte, Videos, Slider oder HTML-Module frei im Raster platzieren – mit wenigen Klicks per Drag & Drop.
Das Ziel ist klar: Du schaffst emotionale, visuelle Erlebnisse, die Deine Besucher zum Verweilen und Handeln animieren.
Typische Anwendungsfälle:
Individuelle Startseitengestaltung
Saisonale oder thematische Landingpages (z. B. Ostern, Black Week)
Kampagnenseiten mit Call-to-Action
Produktpräsentationen mit Storytelling
Kombination aus Marketingtexten, Bildern und Artikel-Slidern
Die Nutzung ist nicht auf bestimmte Shopbereiche beschränkt – Du kannst sie flexibel Kategorien oder Shopseiten zuweisen. Selbst mehrere Einkaufswelten auf einer Seite sind möglich, z. B. mit gezielten Einbindungen für einzelne Kategorien.
Die Startseite ist oft der erste Touchpoint für neue Kund – und bietet großes Potenzial, das Einkaufserlebnis gezielt zu steuern. Eine durchdachte Einkaufswelt kann hier den Unterschied machen.
Backend aufrufen: Navigiere zu Marketing > Einkaufswelten.
Neue Einkaufswelt erstellen: Über „Hinzufügen“ kannst Du ein neues Layout anlegen.
Name & Zuweisung: Vergib einen sinnvollen Namen wie „Startseite Frühjahr 2025“ und verknüpfe die Einkaufswelt mit der Hauptkategorie Deines Shops.
Raster definieren: Wähle ein Layoutraster, z. B. 12 Spalten x 6 Zeilen. Das bietet Dir viel Flexibilität bei der Platzierung.
Elemente einfügen: Ziehe Inhalte wie Bilder, Texte oder Slider in das Raster und konfiguriere sie.
Banner: Ideal für Kampagnen oder Markeninszenierungen.
Artikelslider: Zeige z. B. Bestseller, Neuheiten oder reduzierte Artikel.
Textblöcke: Begrüßungstexte oder SEO-Inhalte kannst Du hier gut platzieren.
Video-Elemente: Mit HTML-Modulen oder iFrames kannst Du Erklärvideos oder Kampagnenclips einbinden.
Kategorie-Teaser: Weise auf spannende Unterkategorien oder Sortimente hin.
Ein typischer Aufbau könnte so aussehen:
Oben: Großes Kampagnenbanner mit CTA
Mitte: Slider mit aktuellen Top-Produkten
Darunter: Zwei- bis dreispaltige Sektion mit Kategorie-Teasern
Unten: Textfeld mit relevanten Informationen und Keywords
So erzielst Du nicht nur einen starken ersten Eindruck, sondern arbeitest gleichzeitig an Deiner Sichtbarkeit in Suchmaschinen.
Ein häufig unterschätztes Feature der Einkaufswelten ist die Möglichkeit, für verschiedene Endgeräte eigene Layouts zu definieren. Diese Funktion nennt sich Viewports. Damit kannst Du Deine Inhalte gezielt für Desktop, Tablet und Smartphone optimieren – ein entscheidender Faktor für Conversion und Nutzerfreundlichkeit.
Im Einkaufswelten-Editor kannst Du oben zwischen den Ansichten wechseln: „Desktop“, „Tablet Landscape“, „Tablet Portrait“, „Smartphone“.
Für jeden Viewport kannst Du ein angepasstes Layout gestalten – z. B. kleinere Bannergrößen, weniger Spalten oder anders angeordnete Elemente.
Inhalte, die am Desktop nebeneinander erscheinen, kannst Du mobil untereinander darstellen lassen.
Achte darauf, dass alle wichtigen Elemente auch mobil sichtbar und gut bedienbar sind – insbesondere Buttons und Slider-Navigationen.
Gerade bei der mobilen Ansicht solltest Du auf überladene Layouts verzichten und klare, vertikal strukturierte Inhalte bevorzugen. Das erhöht die Ladegeschwindigkeit und die Nutzerzufriedenheit.
Bei der Gestaltung Deiner Einkaufswelt solltest Du neben Design und Inhalt auch die technische Performance im Blick behalten. Große Bilddateien oder zu viele Animationen können die Ladezeit negativ beeinflussen – besonders mobil.
Bildgrößen beachten: Nutze die Thumbnails und Bildformate, die Shopware bereitstellt, passend zum Raster Deiner Einkaufswelt.
Dateigröße komprimieren: Lade Bilder möglichst optimiert hoch – idealerweise unter 300 KB pro Bild.
Texte sinnvoll platzieren: Nutze Textblöcke für relevante Inhalte und Keywords, um Deine Seite auch SEO-technisch zu stärken.
Cache und Vorschaubilder regelmäßig leeren/erneuern, damit Änderungen korrekt ausgespielt werden.
Auch strukturell solltest Du Deine Einkaufswelt klar gliedern: Wiedererkennbare Bereiche, visuelle Hierarchien und einheitliche Abstände schaffen Vertrauen und Orientierung.
Damit Deine Einkaufswelt professionell wirkt und technisch sauber funktioniert, solltest Du einige Stolperfallen vermeiden:
Keine überladenen Layouts: Zu viele Inhalte wirken chaotisch – lieber auf klare Schwerpunkte setzen.
Keine fest eingebauten Größen oder starren Rastern: Flexibilität ist wichtig für responsive Design.
Nicht auf Viewports verzichten: Gerade die mobile Ansicht braucht besondere Aufmerksamkeit.
Keine zu kleinen Schriftgrößen oder überlagernde Elemente: Das erschwert die Bedienung – besonders mobil.
Sobald Du die Grundlagen der Einkaufswelten verinnerlicht hast und Deine Startseite bereits mit Bannern, Artikelslidern und Storytelling-Elementen glänzt, stellt sich schnell die Frage: Wie geht es weiter? Denn das Potenzial der Einkaufswelten ist damit längst nicht ausgeschöpft.
Jetzt geht es darum, Deine Seiten gezielter einzusetzen – zum Beispiel für Aktionsseiten, Kategorieseiten oder komplett unabhängige Landingpages. Auch Wiederverwendbarkeit, mobile Optimierung und zusätzliche Gestaltungsmöglichkeiten wie Shopware Digital Publishing oder eigene CSS-Anpassungen werden immer wichtiger, wenn Du professionell und effizient arbeiten willst.
Wenn Du regelmäßig neue Einkaufswelten erstellst – z. B. für Saisonaktionen, neue Produktlinien oder Rabattaktionen – wirst Du die Vorlagenfunktion lieben. Damit kannst Du bestehende Einkaufswelten duplizieren und schnell neue Layouts aufbauen, ohne bei Null zu beginnen.
Öffne im Backend die gewünschte Einkaufswelt.
Klicke oben rechts auf das Zahnrad-Symbol und wähle „Duplizieren“.
Shopware erstellt eine Kopie mit identischem Layout und allen Inhalten.
Passe den Namen und einzelne Elemente wie Bilder, Texte oder Artikel an.
Das sorgt nicht nur für einheitliches Design, sondern auch für eine hohe Bearbeitungsgeschwindigkeit. Du brauchst z. B. nur einmal eine „Master-Einkaufswelt“ für Salesaktionen anzulegen, die Du regelmäßig wiederverwendest und nur inhaltlich aktualisierst.
Tipp: Erstelle verschiedene Grundlayouts – z. B. für „Startseite mit Slider“, „Landingpage mit Fokusprodukt“ oder „Kategorie-Teaser mit Textblöcken“ – und halte sie als wiederverwendbare Templates bereit.
Shopware Einkaufswelten lassen sich nicht nur auf Kategorien anwenden. Du kannst damit auch komplett eigenständige Landingpages aufbauen – perfekt für Marketingkampagnen, Suchmaschinenwerbung oder saisonale Aktionen.
Neue Einkaufswelt anlegen (über Marketing > Einkaufswelten > Hinzufügen).
Bei der Zuweisung wählst Du „Shopseite“.
Füge Deine gewünschten Inhalte hinzu – Banner, Text, Video, Produktempfehlungen etc.
Vergib einen eindeutigen Namen und speichere.
Die generierte URL kannst Du direkt für Ads, Newsletter oder Social-Media-Posts verwenden.
Fokus auf ein Ziel: Z. B. Produkt kaufen, E-Mail-Adresse einsammeln, zur Kategorie führen.
Klare Call-to-Actions: Buttons wie „Jetzt entdecken“ oder „Rabatt sichern“ gehören dazu.
Reduziertes Layout: Konzentriere Dich auf das Wesentliche – ein Ziel, ein Thema, keine Ablenkung.
Mobiltauglichkeit: Gerade bei Ads kommen viele Besucher über Smartphones.
Landingpages sind besonders stark, wenn sie mit gezieltem Storytelling kombiniert werden – etwa durch eine visuelle Einstiegssequenz (Hero-Banner), einen erklärenden Textblock und anschließende Artikel-Slider oder Aktionshinweise.
Die standardmäßigen Elemente in Shopware reichen für viele Einsatzzwecke aus – doch manchmal braucht es mehr Individualität. Genau hier kommen eigene Inhalte oder sogar individuell entwickelte Einkaufswelten-Elemente ins Spiel.
Mit dem HTML-Modul kannst Du nahezu beliebige Inhalte einbinden, z. B.:
YouTube- oder Vimeo-Videos (per iFrame)
Interaktive Tools oder Formulare
Externe Widgets (z. B. Bewertungssterne)
Zusätzliche Texte mit Sonderformatierungen
Ein Beispiel für die Einbindung eines YouTube-Videos:
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DEIN_VIDEO" frameborder="0" allowfullscreen></iframe>
Achte darauf, dass das Element auf allen Viewports korrekt dargestellt wird. Du kannst über individuelle CSS-Klassen zusätzlich das Styling steuern (mehr dazu weiter unten).
Ein besonders starkes Feature, wenn es um visuelle Content-Gestaltung geht, ist Digital Publishing. Damit kannst Du direkt im Shopware-Backend klickbare Banner, Text-Overlays und Buttons auf Bildern platzieren – pixelgenau, responsive und ohne externe Bildbearbeitung.
Vorteile:
Texte sind als HTML lesbar → SEO-freundlich
Layouts skalieren automatisch → responsive Design
Call-to-Actions direkt auf dem Bild → höhere Conversion
Beispiel: Du willst ein Produkt-Highlight bewerben? Dann platziere auf einem Hintergrundbild einen aufmerksamkeitsstarken Text und einen Button wie „Jetzt entdecken“. Per Digital Publishing lässt sich das schnell und ohne Grafikprogramm realisieren.
Wer sich tiefer mit Layout und Stil beschäftigen möchte, kann eigene CSS-Klassen verwenden, um bestimmte Elemente gezielt zu gestalten. So kannst Du z. B. Banner hervorheben, Textblöcke mit Icons kombinieren oder Abstände optimieren.
Öffne ein Element im Einkaufswelten-Editor.
Im Reiter „Erweitert“ findest Du das Feld „CSS-Klasse“.
Trage z. B. aktion-box ein.
Definiere die Klasse in Deinem Theme (z. B. custom.css):
.aktion-box {
background-color: #fff3e0;
border-radius: 8px;
padding: 20px;
border-left: 4px solid #ff9800;
}
Diese Möglichkeit eröffnet Dir viele Freiheiten bei der individuellen Gestaltung – insbesondere, wenn Du auf ein einheitliches Corporate Design achtest.
Die Performance und das optische Ergebnis hängen stark von der Bildqualität und -größe ab. Shopware nutzt sogenannte Thumbnails, um Bilder für verschiedene Viewports vorzubereiten.
Tipps:
Achte auf die korrekte Bildgröße passend zum Raster (z. B. bei einem 6-Spalten-Banner ca. 1170px Breite).
Vermeide stark komprimierte oder unscharfe Bilder.
Nutze das Tool Bildmapping, wenn Du klickbare Flächen direkt auf Bildern setzen willst.
Ein sauberer Umgang mit Bildgrößen sorgt für schnellere Ladezeiten und ein professionelles Gesamtbild – gerade auf mobilen Geräten ein echter Pluspunkt.
Die Einkaufswelten in Shopware sind weit mehr als nur ein Gestaltungstool – sie sind ein zentrales Element für strategisches Content-Marketing, Storytelling und Conversion-Steigerung. Mit wenigen Klicks lassen sich emotionale Landingpages, saisonale Kampagnen und visuelle Produktwelten erstellen – ohne Programmierkenntnisse.
Durch Viewports, Vorlagen, HTML-Elemente, Digital Publishing und individuelle CSS-Anpassungen kannst Du Deinen Shop systematisch weiterentwickeln und für Deine Zielgruppe optimal aufbereiten – responsiv, performant und verkaufsstark.
Ob Du Deine Shopware Startseite gestalten, Kampagnen-Content einbinden, Landingpages bauen oder die mobile Ansicht optimieren möchtest: Mit den richtigen Techniken und einer klaren Content-Strategie werden Einkaufswelten zu einem echten Wettbewerbsvorteil in Deinem Onlinegeschäft.