Willkommen in der ThemeWare® Wissensdatenbank und vielen Dank, dass du dich für ThemeWare® entschieden hast!
Die Dokumentation von ThemeWare® für Shopware 6 basiert auf 3 "Säulen":
Das Service Portal
Das Service Portal ist stets deine erste Anlaufstelle bei allen Anliegen rund um ThemeWare®. Es ist quasi dein persönliches Dashboard für ThemeWare®.
Dort findest du immer alle relevanten Links und Informationen zu ThemeWare®, das ThemeWare® Video-Tutorial, die ThemeWare® Utilities, die ThemeWare® Suchmaschine, den ThemeWare® Config-Finder, Assistenten, Rabattaktionen, nützliche Tools, Feedback- und Kontaktformulare und vieles mehr.
Das Service Portal erreichst du unter:
Die ThemeWare® Wissensdatenbank
In der ThemeWare® Wissensdatenbank findest du die ThemeWare® Einführung, viele Anleitungen und Tutorials, das ThemeWare® Lexikon, Antworten auf die häufigsten Fragen, Lösungen für die häufigsten Fehler, Profiwissen für Agenturen und Freelancer und viele nützliche Informationen zu Shopware 6.
Das ThemeWare® Handbuch
Im ThemeWare® Handbuch findest du Informationen zu allen Funktionen und Features von ThemeWare®.
Das ThemeWare® Handbuch erreichst du unter:
Du befindest dich gerade in der ThemeWare® Wissensdatenbank. Hier findest du auf die meisten Fragen sofort eine Antwort und musst gar nicht erst auf unsere E-Mail warten.
Falls du einmal keine Antwort findest, erstelle kurz ein neues Ticket über unser Service Portal. So bekommst du dann am schnellsten unsere Unterstützung.
Die ThemeWare® Wissensdatenbank bietet in erster Linie Artikel zu Funktionen von ThemeWare®. Es gibt dabei natürlich Überschneidungen mit Funktionen von Shopware 6.
Möchtest du mehr Informationen zu Funktionen von Shopware 6 empfehlen wir dir einen Blick in die und den Bereich .
Einführung
Willkommen im ThemeWare® Einführung
Die ThemeWare® Einführung ist eine schriftliche Form des beliebten ThemeWare® Video-Tutorials. Da wir das Video-Tutorial derzeit überarbeiten ist die Einführung noch nicht fertig, aber sie wächst Stück für Stück. Fehlt ein Artikel noch oder ist ein Artikel unvollständige, schaue derweil gerne in das ThemeWare® Video-Tutorial.
Hinweis: Das ThemeWare® Video-Tutorial und die ThemeWare® Einführung werden gerade überarbeitet bzw. geschrieben und stehen dir bald in einer neuen Version zur Verfügung.
ThemeWare® Demoshops
Die ThemeWare® Demoshops präsentieren dir alle ThemeWare® Themes Live und in Farbe.
Gibt es Unterschiede zum frisch installierten Theme?
Technisch bedingt installieren Themes weder Kategorien noch Erlebniswelten. Du kannst beispielsweise das kostenlose Demodaten-Plugin von Shopware nutzen um damit Beispiel-Produkte und -Kategorien zu importieren.
Darüber hinaus erklären wir dir im kostenfreien ThemeWare® Video-Tutorial und Schritt-für-Schritt PDF-Anleitungen wie du Kategorien und die Erlebniswelt der Startseite anlegen kannst.
Konfiguration
Mit ThemeWare® profitierst du von extrem regelmäßigen Updates mit neuen Features und Konfigurationen. Um die vielen ThemeWare® Shops unserer Kunden dabei nicht zu beeinflussen sind neue Funktionen und Features bei der Veröffentlichung natürlich deaktiviert. Du kannst so selber entscheiden ob und wenn ja welches neue Feature du nutzen möchtest.
Da wir neue Features aber dennoch in unseren Demoshops präsentieren möchten, weichen die Demoshops mit der Zeit etwas von der Default-Konfiguration unserer Themes ab. Aber keine Sorge, die Demoshops basieren vollständig auf ThemeWare®, du kannst alles was wir in den Demoshops zeigen auch selber mit wenigen Klicks aktivieren.
Alle Informationen zu unseren Demoshops und zur Konfiguration findest du in folgendem Artikel. Wir empfehlen dir vorab aber erst einmal die Einführung abzuschließen.
ThemeWare® installieren
In diesem Artikel erfährst du, wie du ThemeWare® installieren kannst.
Wenn du eine Shopware-Erweiterung über den Shopware Store erworben hast und du deinen Shopware Account in deinem Shop angemeldet hast, kannst du diese ganz einfach über die Erweiterungs-Verwaltung installieren.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
USP-Bar konfigurieren
...
Eine Übersicht aller Icons von Shopware 6 findest du über folgenden Link. In der Theme-Konfiguration bzw. in Textbausteinen von ThemeWare® kannst du die Icons aus dem Icon-Set "default" nutzen.
Erlebniswelten verstehen
...
Shopseiten bearbeiten und anlegen
...
Landingpages bearbeiten und anlegen
...
Kategorieseiten bearbeiten und anlegen
...
Produktseiten bearbeiten und anlegen
...
Shopseiten bearbeiten und anlegen
...
Shop-Navigation konfigurieren
...
Service-Navigation konfigurieren
...
Footer-Navigation konfigurieren
...
Footer konfigurieren
...
Zahlungs- und Versandanbieter konfigurieren
...
Zahlungs- und Versandanbieter Logos
...
Mehrsprachigkeit mit ThemeWare®
...
ThemeWare® erwerben
In diesem Artikel erfährst du, wie du ThemeWare® nach Ablauf des kostenlosen Probemonats erwerben kannst.
Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Die Miete kann jederzeit monatlich gekündigt werden.
Nach Ablauf des Probemonats wird ThemeWare® zu den bei der Buchung angegebenen Preisen automatisch verlängert.
Anleitungen
Hier findest du viele hilfreiche Anleitungen zu ThemeWare® für Shopware 6.
Bevor du mit unseren Anleitungen startest empfehlen wir dir einen Blick in unser und das . Dort erfährst alle wichtigen Grundlagen welche dir bei den Anleitungen sehr weiterhelfen.
Ergänzend dazu empfehlen wir dir unbedingt einen Blick in die offizielle Shopware Dokumentation denn viele Sachen die du in den Anleitungen konfigurieren betreffen einige Shopware Grundfunktionen:
ThemeWare® kaufen
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 kaufen kannst.
ThemeWare® zurückgeben
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 zurückgeben kannst.
Generell ist es beim Erwerb von Erweiterungen (Apps, Plugins oder Theme) im Shopware Store zunächst immer sinnvoll, diese vorab als "Testversion" in Form eines kostenlosen Probemonats zu installieren. So kannst du die entsprechende Erweiterung 30 Tage kostenfrei testen und sicher gehen, dass diese auch seine Erwartungen erfüllt.
Sollte es trotz dessen versehentlich zu einem "Fehlkauf" einer Erweiterung gekommen sein, melde dich bitte einmal über das folgende Kontaktformular beim Shopware-Vertrieb:
ThemeWare® Version ermitteln
In dieser Anleitung erfährst du, wie du die Version von ThemeWare® für Shopware 6 ermitteln kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Hinweis: Bitte beachte, dass es zwischen der Pro-Edition und der Cloud-Edition, technisch bedingt, natürlich unterschiede gibt. Diese beziehen sich aber komplett auf den Bereich "CMS-Elemente (Erlebniswelten)". Mehr Informationen dazu findest du hier.
Hinweis: Shopware hat am 28. Dezember 2023 die Buchungsmöglichkeiten für Erweiterungen im Store geändert. Erweiterungen können nun ausschließlich gemietet werden: ThemeWare® mieten
Kategorie "Kochlust & Provence"
Wie wir die Kategorie "Kochlust & Provence" in unseren Demoshops erstellt haben findest du in folgender Schritt-für-Schritt-Anleitung:
Erlebniswelten sind eine Grundfunktion von Shopware 6 und ersetzen die Einkaufswelten aus Shopware 5. Mit Erlebniswelten kannst du Content-Seiten wie Landingpages, Shopseiten, Kategorieseiten und Produktseiten erstellen und gestalten.
In diesem Bereich findest du viele nützliche Anleitungen rund um das Thema Erlebniswelten.
Weiterführende Informationen
Mehr Grundlagen und Informationen zum Thema Erlebniswelten findet du hier:
Darstellungsfehler in der Shopware 6 Storefront einfach selber beheben
Für Darstellungsfehler in der Storefront ist in den allermeisten Fällen ein veralteter Cache die Ursache. Auch ein nicht korrekt kompiliertes Theme kann zu Darstellungsfehlern führen.
Aktualisiere daher, bei Problemen oder Darstellungsfehlern, bitte immer zuerst einmal die Shopware Storefront. Dies geht ganz einfach und schnell mit wenigen Klicks:
In diesem Artikel erfährst du, wie du ThemeWare® testen kannst.
Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Nutze diese Möglichkeit gerne um verschiedene Varianten zu testen bevor du dich final entscheidest. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den bei der Buchung angegebenen Preisen automatisch verlängert.
Tipp: Erwirbst du Erweiterungen für eine Testdomain kannst du über deinen Shopware-Account später die Lizenzen auf die Live-Domain übertragen. Mehr Informationen dazu findest du in der Shopware-Dokumentation.
ThemeWare® testen
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in den "Store" (1) (2) ("Erweiterungen" => "Store")
Wechsel in den Tab "Themes" (3)
Optional: Gebe "ThemeWare" oder z.B. "Modern" in der Suche ein
Klicke nun in der Übersicht auf das gewünschte ThemeWare® Theme
Es öffnet sich nun die Detailseite des ThemeWare® Themes
Klicke auf den Button "Theme hinzufügen" (4)
Es öffnet sich nun ein Pop-up
Hier findest du alle Details zu den Kosten nach Ablauf des Probemonats (5)
Lese und akzeptiere die AGB (6)
Und bestätige die Buchung jetzt mit "Miete jetzt diese Erweiterung" (7)
Du hast ThemeWare® mit einem kostenlosen Probemonat erworben.
Im nächsten Artikel erfährst du, wie du ThemeWare® installieren kannst.
Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung:
ThemeWare® aktivieren
In diesem Artikel erfährst du, wie du ThemeWare® aktivieren kannst.
Hast du eine Erweiterung installiert ist diese grundsätzlich "einsatzbereit". Damit die Erweiterung nun auch genutzt werden kann muss sie noch aktiviert werden.
ThemeWare® aktivieren
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Aktiviere ThemeWare® über dem Switch-Button (4) links neben dem ThemeWare® Logo
ThemeWare® wurde nun aktiviert.
Im nächsten Artikel erfährst du, wie du ThemeWare® zuweisen kannst.
Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung:
Themes kombinieren
Info: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das .
In diesem Artikel erfährst du, wie du ThemeWare® Themes kombinieren bearbeitest.
Zusätzliches Theme deinstallieren und vollständig löschen
Texte im Theme bearbeiten
Textbausteine - Texte im Theme bearbeiten
Info: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das .
...
Anmerkung
Findest du einen Text nicht, versuche das Suchwort zu variieren. Es kann sein, dass in manchen Texten Hyperlinks vorkommen, deren HTML-Code dann das Suchwort "stört".
Beispiel: Angenommen du suchst nach einem Textbaustein der USP-Bar und in der Storefront lautet der Text "Exzellenter Support".
Es kann sein, dass du damit den Textbaustein direkt findest, es kann aber auch sein, dass der Textbaustein einen Link enthält: z.B. Exzellenter <a href="...">Support</a>.
Die Suche nach Exzellenter Support würde in diesem Fall nicht zum Ergebnis führen. Suchst du in diesem Fall lediglich nach "Exzellenter", wirst du den Textbaustein finden.
Anleitung:
Startseite (ThemeWare® Erlebniswelt) einrichten
Info: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das .
Mit den ThemeWare® bzw. den ThemeWare® Utilities erhältst du alles was du für deine erste Erlebniswelt benötigst:
Du erhältst ein kostenloses Import-Plugin mit welchem du die Erlebniswelt deines Themes mit wenigen Klicks in deinen Shop (Self-hosted) importieren kannst.
Als Shopware Cloud Nutzer erhältst du eine Schritt-für-Schritt-Anleitung im PDF-Format zum erstellen der entsprechenden Erlebniswelt für dein Theme.
Darüber hinaus erhältst du alle benötigten Grafik-Vorlagen im offenen PSD-Format.
...
Hinweis: Mit der Shopware 6.5 wurde ein HTML Sanitzer implementiert. Dieser Sanitizer verbessert Sicherheit, Zuverlässigkeit und Benutzerfreundlichkeit des Editors, indem unsicherer HTML-Code entfernt wird.
Er säubert auch Styles und Attribute für konsistente und korrekte Darstellung des Codes unabhängig von Plattform und Browser. (siehe )
Weiterführende Informationen
Mehr als ein ThemeWare® Theme nutzen
Info: Dieser Artikel ist in Arbeit. Schaue derweil gerne in das .
Du kannst durchaus mehr als ein ThemeWare® Theme in deinem Shop nutzen. Auch ist es möglich die Pro-Edition und gleichzeitig die Cloud-Edition zu nutzen.
Wichtig: Achte darauf, dass alle ThemeWare® Themes in deinem Shop stets die selbe Versionsnummer haben, damit sie wie gewünscht funktionieren!
Besonderheiten
Doppelte Inhalten in der Theme-Konfiguration
...
Zusatzfelder
...
CMS-Blöcke bzw. CMS-Elemente
Nutzt du mehr als ein ThemeWare® Theme in deinem Shop, gibt es jeden CMS-Block bzw. jedes CMS-Element nur einmal in der Administration auch wenn diese mehrfach angezeigt werden. Die Blöcke bzw. Elemente funktionieren dann solange, bis du das letzte ThemeWare® Theme deaktivierst.
Weiterführende Informationen
ThemeWare® hochladen
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 hochladen kannst.
Vorab möchten wir darauf hinweisen, dass erworbene Erweiterungen automatisch in der Erweiterungs-Verwaltung erscheinen. Ein manueller Upload ist daher nicht nötig.
Der manuelle Upload von Erweiterungen ist auf zwei Wegen möglich:
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
ThemeWare® wird jetzt hochgeladen.
ThemeWare® installieren
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 mieten kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
ThemeWare® wird nun in der Übersicht angezeigt
Installiere die Erweiterung nun über die Option "Installieren" (5)
ThemeWare® wurde nun installiert.
ThemeWare® aktivieren
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 aktivieren kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Aktiviere ThemeWare® über dem Switch-Button (4) links neben dem ThemeWare® Logo
Leere den gesamten Shopware-Cache und lade die Administration neu
ThemeWare® wurde nun aktiviert.
ThemeWare® zurücksetzen
In dieser Anleitung erfährst du, wie du die Konfiguration von ThemeWare® für Shopware 6 zurücksetzen kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Theme-Konfiguration zu öffnen
Scrolle im Tab "Allgemein" zum Abschnitt mit der Zuweisung deines Themes
Klicke auf den Kontext-Button (3) oben rechts um ein Kontextmenü zu öffnen
Wähle die Option "Theme zurücksetzen" (4) aus
Es erscheint ein Pop-up "Theme zurücksetzen"
Setze die Theme-Konfiguration mit dem Button "Theme zurücksetzen" (5) zurück
Erfahrene Anwender können die Konfiguration manuell über die Datenbank zurücksetzen. Eine Anleitung dazu findest du im folgenden Artikel:
ThemeWare® deaktivieren
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 deaktivieren kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Deaktiviere ThemeWare® über den Switch-Button (4) links neben dem ThemeWare® Logo
ℹ️Hinweis: Damit du ein Theme deaktivieren kannst, darf dieses keinem Verkaufskanal mehr zugewiesen sein!
Leere den gesamten Shopware-Cache und lade die Administration neu
ThemeWare® wurde nun deaktiviert.
ThemeWare® löschen
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 löschen kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Klicke auf den Kontext-Button (4) neben dem Theme um das Kontextmenü zu öffnen und darin auf "Entfernen" (5)
Melde dich im Tab "Shopware Account" mit deinen Account-Zugangsdaten an, damit die Löschung der Erweiterung im gesamten System aktualisiert wird.
Erweiterungen mit gültigen Lizenzen werden auch nach dem "Löschen" in der Erweiterungs-Verwaltung angezeigt, da der entsprechende Account nach wie vor im Besitz dieser Lizenz ist. Die Lizenz selber kannst du in deinem Shopware-Account endgültig entfernen/archivieren:
Wechsle in deinen Shopware Account unter und kündige dort die Miete. Ohne diese Kündigung wird der Mietvertrag weiter berechnet.
Markiere CMS-Blöcke als Favoriten um sie schneller zu finden
Ab Shopware 6.4.19.0 kannst du CMS-Blöcke als Favoriten markieren.
Klicke dazu einfach auf das Herzsymbol . Filtere im Dropdown-Menü nach Favoriten, um direkt die Blöcke zu finden, die du oft benutzt.
CMS-Blöcke als Favoriten markieren
Bevorzugte CMS-Blöcke
CMS-Blöcke auf mobilen Geräten ausblenden
In Shopware 6 können CMS-Blöcke sowie CMS-Sektionen in verschiedenen Viewports ausgeblendet werden.
Wie dies funktioniert erfährst du in folgenden Anleitungen:
Markiere CMS-Elemente als Favoriten um sie schneller zu finden
Ab Shopware 6.4.19.0 kannst du CMS-Elemente als Favoriten markieren.
Klicke dazu einfach auf das Herzsymbol . Deine Favoriten findest du nun immer oben im "Element austauschen"-Overlay.
CMS-Elemente als Favoriten markieren
Bevorzugte CMS-Elemente
ThemeWare® zuweisen
In diesem Artikel erfährst du, wie du ThemeWare® zuweist. Das bedeutet, wie du dafür sorgst, dass du ThemeWare® in deiner Storefront dargestellt wird.
Wichtig ist erstmal zu verstehen, dass die Basis zur Auslieferung eines Themes immer ein Verkaufskanal ist. Dieser Verkaufskanal muss vom Typ "Storefront" sein.
Wenn man einen Verkaufskanal anlegt kann man verschiedene Arten auswählen. Und "Storefront" wäre dann die Art die notwendig ist, damit das Theme "ausgeliefert" wird.
Öffne die Administration deines Shops
ThemeWare® Utilities herunterladen
In diesem Artikel erfährst du, wie du kostenfreien Zugang zu den beliebten ThemeWare® Utilities für dein ThemeWare® Theme erhältst.
Import-Plugin für eine Profi-Erlebniswelt mit Storytelling-Elementen (Self-hosted)
Schritt-für-Schritt Anleitung für eine Profi-Erlebniswelt mit Storytelling-Elementen (Cloud)
ThemeWare® bearbeiten
In diesem Artikel erfährst du, wie du ThemeWare® bearbeitest, also wie du ThemeWare® konfigurierst.
Themes bzw. ThemeWare® kannst über die Theme-Verwaltung bearbeiten. Es gibt zwei Wege dorthin:
Der erste Weg ist, dass du auf "Inhalte" und dann auf "Themes" klickst. (Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.)
Dann siehst du alle installierten Themes. Dort klickst du das jeweilige Theme bzw. ThemeWare® einfach an und gelangst so in die Theme-Konfiguration und kannst das Theme bearbeiten.
Farben konfigurieren
In diesem Artikel erfährst du, wie du die Farben in deinem Shop konfigurierst.
Farben kannst du in verschiedenen Bereichen konfigurieren:
Theme-Konfiguration
Erlebniswelten
Schriften konfigurieren
In diesem Artikel geht es um Typografie, dass heißt, wir zeigen dir, wie du Schriftarten in deinem Shop konfigurieren kannst.
Schriften bzw. Fonts konfigurierst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration.
Beispiel: In unserem Beispiel ändern wir die Schriftart für Überschriften auf die Schrift "Helvetica".
Öffne die Administration deines Shops
Logo konfigurieren
In diesem Artikel zeigen wir dir, wie du dein Shop-Logo konfigurieren kannst.
Das Shop-Logo konfigurierst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration.
Beispiel: In unserem Beispiel möchten wir Logo etwas vergrößern.
Öffne die Administration deines Shops
Text-Logo konfigurieren
Möchtest du ein reines Text-Logo nutzen bietet dir ThemeWare® natürlich auch dafür eine komfortable Möglichkeit.
Das Text-Logo kannst du über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration konfigurieren.
Beispiel: In unserem Beispiel aktivieren wir das Text-Logo in der ThemeWare® Konfiguration.
Öffne die Administration deines Shops
ThemeWare® mieten
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 mieten kannst.
Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den bei der Buchung angegebenen Preisen automatisch verlängert.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in den "Store" (1) (2) ("Erweiterungen" => "Store")
ThemeWare® bearbeiten
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 konfigurieren kannst.
Die Theme-Konfiguration von ThemeWare® kannst du über zwei Wege erreichen:
Über die (empfohlen)
Über den entsprechenden
Nachfolgend zeigen wir dir beide Wege im Detail.
ThemeWare® updaten
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 updaten bzw. aktualisieren kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes
ThemeWare® deinstallieren
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 deaktivieren kannst.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes
ThemeWare® bereinigen
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 nach Updates bereinigen kannst.
Mit ThemeWare® profitierst du von einer kontinuierlichen Weiterentwicklung. Von Zeit zu Zeit kann es daher vorkommen, dass wir Konfigurationsfelder entfernen oder ersetzen.
Verbleiben "verwaiste Konfigurationsfelder" in der Konfiguration kannst du diese wie folgt entfernen:
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung
Erlebniswelten mit Bootstrap HTML-Code gestalten
In dieser Anleitung erfährst du, wie du Erlebniswelten mit Bootstrap HTML-Code gestalten kannst.
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® selbstverständlich ebenfalls vollständig kompatibel mit Bootstrap.
Auf dieser Seite findest du die gängigsten Bootstrap-Elemente welche du in deinen Erlebniswelten nutzen kannst.
In Shopware 6.4 nutzt die Storefront .
In Shopware 6.5 nutzt die Storefront .
Bitte beachte, dass der HTML-Editor von Shopware 6 (z.B. in CMS-Elementen) individuellen HTML-Code – aus Sicherheitsgründen – nicht alle HTML-Tags erlaubt und den Code automatisch bereinigt. Das bedeutet nicht, dass Shopware bzw. ThemeWare® nicht kompatibel mit Bootstrap ist. Alles was du auf dieser Seite findest kann mit dem HTML-Editor von Shopware umgesetzt werden. Dafür wurde der eigentlich Bootstrap-Code ggf. leicht modifiziert.
In Template-Dateien kannst du Bootstrap entsprechend der Bootstrap-Dokumentation nutzen. Hier gibt es lediglich die Einschränkung das Shopware ggf. nicht alle Bootstrap-Elemente bereitstellt.
CMS-Block individuell stylen
Du kannst einen bestimmten CMS-Block individuell stylen, indem du ihm in den Block-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst.
Klicke auf den gewünschten CMS-Block um den CMS-Block auszuwählen (1)
Wechsel rechts in der Sidebar in den Tab "Block-Einstellungen" (2)
Bekannte Fehler einfach selber lösen
Häufige Fehler in der Shopware 6 einfach selber beheben
Der Erste Schritt bei Problemen oder vermeintlichen Fehlern ist immer ein Blick in den Bereich "Häufige Fehler". Dort findest du sowohl für die Storefront als auch für die Administration Lösungen für die häufigsten, bekannten Probleme und Fehler.
Durch unsere über 3.000 Kunden haben wir fast jedes Problem schon gesehen und gelöst. Es ist daher sehr wahrscheinlich, dass das Problem bereits bekannt ist und es bereits eine Lösung gibt.
Schaue also immer zuerst einmal in den Bereich "Häufige Fehler":
Im Bereich Erlebniswelten gibt es spezielle CMS-Elemente im Shopware Store, welche alternative HTML-Editoren bereitstellen und dir damit mehr Freiheiten bieten als der HTML-Editor von Shopware 6.
Hinweis: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess.
Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung.
Fehler eingrenzen
Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob eine individuelle Anpassung, eine bestimmte Erweiterung (Plugin oder App) oder das Theme für das Problem verantwortlich ist.
Prüfe ob das Problem vom Theme verursacht wird
Um zu prüfen ob der Fehler bzw. das Problem überhaupt beim Theme liegt, nutze bitte den folgenden Artikel:
Hinweis: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess.
Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung.
Erweiterung als Fehlerursache identifizieren
Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob eine bestimmte Erweiterung (Plugin oder App) für das Problem verantwortlich ist.
Erweiterungen deaktivieren
Deaktiviere (nicht deinstalliere!) einmal alle verwendeten Erweiterung (Plugins oder Apps). Besteht das Problem nach Deaktivierung aller Erweiterungen nicht mehr, liegt das Problem wahrscheinlich an einer Erweiterung.
Wichtig: Einstellungen einer Erweiterung bleiben erhalten, wenn die Erweiterung deaktiviert wird. (Stand: Shopware 6.4.11.0)
Hinweis: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess.
Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung.
Hinweis: Der Upload per FTP ist durchaus möglich, wir empfehlen aber den Weg über die Erweiterungs-Verwaltung von Shopware zu wählen.
Beim FTP-Upload kann es durchaus vorkommen, dass Schreibrechter durcheinander kommen und eine Erweiterung nicht mehr funktioniert oder nicht aktualisiert oder deinstalliert werden kann.
Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront im Bereich "Verkaufskanäle" (1)
Wechsel in den Tab "Theme" (2)
Klicke nun im Bereich "Theme-Zuweisung" auf den Button "Theme ändern" (3)
Wähle ThemeWare® im Pop-up "Theme auswählen" aus (4) und klicke auf den Button "Theme ändern" (5)
Klicke nun oben noch einmal auf "Speichern" damit das Theme zugewiesen und kompiliert wird (6)
ThemeWare® wurde nun deiner Storefront zugewiesen.
ThemeWare® zuweisen
Pop-up "Theme auswählen"
Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: ThemeWare® zuweisen
Verkaufskanal anlegen
Tipp: Du brauchst keinen Verkaufskanal vom Typ "Storefront" anlegen wenn du bereits einen entsprechenden Verkaufskanal hast.
Bei der Standard-Installation erstellt Shopware i.d.R. einen passenden Verkaufskanal der mit dem bei der Installation gewählten Shopnamen betitelt ist.
ThemeWare® zuweisen
Screenshots
Weiterführende Informationen
ThemeWare® Video-Tutorial
Alle Grafiken im offenen PSD-Format
Logo-Set mit 40 Pagespeed optimierten Grafiken für Versandanbieter
Logo-Set mit 90 Pagespeed optimierten Grafiken für Zahlungsarten
Grafik-Sets mit verschiedenen Vorlagen und SSL-Siegeln
ThemeWare® Customizing Plugin für individuelle Anpassungen (Self-hosted)
ThemeWare® Customizing App für individuelle Anpassungen (Cloud)
Auf der folgenden Seite findest du ein Formular über welches du die Tools kostenlos anfordern kannst. Diese werden dir sofort per E-Mail zugeschickt und unterstützen dich bei der Gestaltung deines Shops.
Wähle deine Shopware Version aus
Wähle dein ThemeWare® Theme aus
Gib deine E-Mail-Adresse ein
Wähle aus ob du als Shopbetreiber oder Agentur (Freelancer) für einen Kunden tätig bist
Lese und bestätige die Datenschutzerklärung
Klicke auf den Button "Jetzt kostenfrei registrieren"
Du hast Dich nun erfolgreich registriert und erhältst eine E-Mail mit allen Informationen, Download-Links und mehr.
ThemeWare® Utilities: Hilfreiche Tools und Extras für die Gestaltung deines Shops
Hinweis: Zusätzlich profitierst du von unserem neuen Update-Newsletter und erfährst so alles über Updates, Änderungen und neue Funktionen von ThemeWare®.
ThemeWare® Utilities anfordern
Tipp: Prüfe Deinen Spam-Ordner, wenn du die E-Mail nicht zeitnah erhalten hast und fordere die Utilities im Zweifelsfall erneut an.
Hinweis: Die ThemeWare® Utilities werden von Zeit zu Zeit aktualisiert. Fehlt dir ein Link, führe die Registrierung einfach noch einmal durch um die ThemeWare® Utilities E-Mail noch einmal zu erhalten.
Weiterführende Informationen
ThemeWare® Video-Tutorial
Der andere Weg ist, dass du deinen Verkaufskanal wählst. Dann klickst du auf den Reiter "Theme" und dort klickst du auf "Theme bearbeiten". Damit landest du direkt in der Theme-Konfiguration und kannst das Theme bearbeiten.
Beispiel: Das Erste was einem in der Storefront auffällt ist die USP-Bar. In diesem Beispiel bearbeiten wir nun einmal die Hintergrundfarbe der USP-Bar.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Die USP-Bar ist eine Erweiterung, daher wechseln wir in den Tab "Erweiterungen" (3)
Scrolle ein Stück nach unten und öffne den Bereich "USP-Bar" (4)
Scrolle noch ein Stück nach unten zum Abschnitt "Farbkonfiguration"
Mit einem Klick auf den Button links neben dem Eingabefeld "Hintergrundfarbe (Header)" (5) öffnet sich die "Farbauswahl" (6)
Wir wählen die Farbe #e2f4fd
Speicher die Theme-Konfiguration (7)
Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun die Hintergrundfarbe der USP-Bar geändert.
Nachher
Beispiel
Bei Fragen oder Problemen findest du eine weitere Informationen in unserer ausführlichen Anleitung: ThemeWare® bearbeiten
Beispiel
Tipp: Wenn Sie mal eine Änderung in der Storefront auswirkt, aktualisiere die Storefront bitte einmal mit der folgenden Anleitung:
Hinweis: Für mehr Informationen zur USP-Bar gibt es später noch ein separaten Artikel.
Screenshots
Weiterführende Informationen
ThemeWare® Video-Tutorial
jegliche HTML-Elemente (Inline-Styles)
Shopware Core (sehr wenige, nicht für die Gestaltung relevant)
Nachfolgend zeigen wir dir wie du die Hauptfarben in der Theme-Konfiguration an deine Wünsche anpassen kannst, stellen dir das Farbkonfigurationsfeld vor und zeigen dir mögliche Konfigurationswerte.
Wahrscheinlich möchtest du als erstes die Primärfarbe an dein Corporate-Design anpassen.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Wechsel in den Tab "Layout" (3)
Öffne den Bereich "Hauptfarben" (4)
Als "Primärfarbe" (5) wählen wir den Wert #0e8ed3
Im Feld Primärfarbe (hell) wählen wir die Nuance #6ac5f5
Als Primärfarbe (dunkel) wählen wir #0c7ebb
Speicher die Theme-Konfiguration
Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun erfolgreich die Primärfarbe geändert.
ThemeWare® Hauptfarben
TemeWare® Strong - Orange
ThemeWare® Strong - Blau
Grundwissen: Mehr Informationen zum Thema "Farbkonfiguration" findest du im Artikel Farbkonfiguration.
Beispiel
Screenshots
Hinweis: Die Farbe vom Logo oder Design-Elementen in Bannern der Erlebniswelt ändert sich dadurch nicht. Dies sind Grafiken die nicht vom Browser umgefärbt werden können. Du kannst aber alle Grafiken im PSD-Format über die ThemeWare® Utilities herunterladen und diese beliebig anpassen.
Weiterführende Informationen
ThemeWare® Video-Tutorial
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Wechsel in den Tab "Layout" (3)
Öffne den Bereich "Typografie" (4)
Ändere im Abschnitt "Headlines" die Schriftart auf 'Helvetica', sans-serif
Scrolle zum Abschnitt "Strichstärke"
Diese ist in unserem Beispiel auf Light: 400, Normal: 400 und Bold: 600 konfiguriert.
Wähle die in Deiner gewünschten Schriftart verfügbaren Strichstärken aus.
Speicher die Theme-Konfiguration
Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun die Schrift für die Headlines in deiner Storefront geändert.
Schrift-Konfiguration in ThemeWare®
Konfiguriere immer zuerst die Schriftart und erst dann die Schriftgröße und die Strichstärke.
Schriften sind sehr individuell und je nach Schriftart wirkt sich die Größe bzw. die Strichstärke unterschiedlich aus.
Es gibt paar Bereiche in der Theme-Konfiguration (z.B. die "Top-Navigation" im Tab "Header" oder in den ThemeWare® CMS-Elementen) wo du auswählen kannst ob du die konfigurierte Schrift für "Text" oder für "Überschriften" verwenden möchtest.
Grundwissen: Mehr Informationen zum Thema "Schriftkonfiguration" findest du im Artikel Schriftkonfiguration
Beispiel
Screenshots
Ideales Vorgehen bei der Schrift-Konfiguration
Tipp: Es ist sinnvoll für den Text eine möglichst klar lesbare, schlichte Schriftart zu verwenden. Wenn du einen schnörkeligeren Font nutzen möchtest, dann maximal in der Überschrift.
Schriftkonfiguration für Shop-Elemente
Weiterführende Informationen
ThemeWare® Video-Tutorial
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Wechsel in den Tab "Header" (3)
Öffne den Bereich "Logo" (4)
Hier wählst du im Abschnitt "Basiskonfiguration" im Konfigurationsfeld "Logoart" (5) die Option "Bild-Logo" aus
Im Abschnitt "Logo" (6) kannst du beispielsweise die "Breite", die "Höhe", den "Abstand nach oben" oder den Hover-Effekt des Shop-Logos konfigurieren
Wir ändern die "Breite" auf 240
Speicher die Theme-Konfiguration
Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun dein Shop-Logo konfiguriert.
Logo-Konfiguration in ThemeWare®
Beispiel
Im Bereich "Sticky Top-Navigation" findest du im Abschnitt "Logo" die Konfiguration für das Logo der Sticky Top-Navigation.
TODO: Custom-Header
Logo-Konfiguration für die Sticky Top-Navigation von ThemeWare®
Das Logo für den "Erlebniswelt-Header" hat keine gesonderte Konfiguration. Es ersetzt lediglich das eigentliche Logo auf Seiten welche den Erlebniswelt-Header nutzen.
TODO: ...
Grundwissen: Mehr Informationen zum Thema "Shop-Logo" findest du im Artikel Shop-Logo
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Wechsel in den Tab "Header" (3)
Öffne den Bereich "Logo" (4)
Hier wählst du im Abschnitt "Basiskonfiguration" im Konfigurationsfeld "Logoart" (5) die Option "Text-Logo" aus
Im Abschnitt "Text-Logo" (6) kannst du beispielsweise den "Logo-Text", die "Schriftart", die "Schriftgröße" oder die "Textfarbe" des Text-Logos konfigurieren
Wir ändern die "Textfarbe" auf #0c7ebb
Speicher die Theme-Konfiguration
Wechsel in die Storefront und lade die Seite einmal neu
Du hast nun das Text-Logo konfiguriert.
Text-Logo-Konfiguration in ThemeWare®
Beispiel
Screenshots
Weiterführende Informationen
ThemeWare® Video-Tutorial
Wechsel in den Tab "Themes" (3)
Optional: Gebe "ThemeWare" oder z.B. "Outdoor" in der Suche ein
Klicke nun in der Übersicht auf das gewünschte ThemeWare® Theme
Es öffnet sich nun die Detailseite des ThemeWare® Themes
Klicke auf den Button "Theme hinzufügen" (4)
Es öffnet sich nun ein Pop-up
Hier findest du alle Details zu den Kosten nach Ablauf des Probemonats (5)
Lese und akzeptiere die AGB (6)
Und bestätige die Buchung jetzt mit "Miete jetzt diese Erweiterung" (7)
Du hast ThemeWare® nun gemietet.
Shopware Store in der Administration
ThemeWare® Outdoor Cloud
ThemeWare® mieten
Fertig!
Tipp: Installiere ThemeWare® als nächstes:
Screenshots
Weiterführende Informationen
Hinweis: Erworbene Erweiterungen erscheinen automatisch in der Erweiterungs-Verwaltung. Ein manueller Upload ist nicht nötig.
Du kannst Erweiterungen nach dem Bestellabschluss direkt über die Detailseite installieren, wir empfehlen dir aber den weg über die Erweiterungs-Verwaltung.
Tipp: Erwirbst du Erweiterungen für eine Testdomain kannst du über deinen Shopware-Account später die Lizenzen auf die Live-Domain übertragen. Mehr Informationen dazu findest du in der Shopware-Dokumentation.
Wichtig: Um den Store in der Administration nutzen zu können musst du die folgenden Punkte beachten:
Registriere deinen Shop in deinem Shopware Account:
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen (3)
Speicher deine Änderungen nach der Bearbeitung, damit diese in die Storefront übertragen werden
Theme-Konfiguration über die Theme-Verwaltung erreichen
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront im Bereich "Verkaufskanäle" (1)
Wechsel in den Tab "Theme" (2)
Klicke nun im Bereich "Theme-Zuweisung" auf den Button "Theme bearbeiten" (3)
Speicher deine Änderungen nach der Bearbeitung, damit diese in die Storefront übertagen werden
Theme-Konfiguration über den Verkaufskanal erreichen
Wichtig: Um Darstellungsfehlern durch einen veralteten Cache vorzubeugen aktualisiere nach einem Theme-Update einmal die Storefront:
Screenshots
Update-Leitfaden 💡
Weiterführende Informationen
Tipp: Es ist sinnvoll ThemeWare® vor einem Theme-Update zu deaktivieren:
Hinweis: Wird dir im Kontextmenü kein Update angezeigt schaue bitte einmal in den Artikel .
Hinweis: Funktioniert das Update wie hier beschrieben nicht, schaue bitte einmal in den Artikel .
Wichtig: Möchtest du ein Shopware Update durchführen ist es immer sinnvoll vorab bzw. danach ThemeWare® zu aktualisieren!
Schaue dazu bitte in den Artikel .
" (3)
Klicke auf den Kontext-Button (4) neben dem Theme um das Kontextmenü zu öffnen und darin auf "Deinstallieren" (5)
ℹ️Hinweis: Deaktiviere das Theme vor dem Update und leere nach dem Deaktivieren einmal den Shopware-Cache. ThemeWare® deaktivieren
Im folgenden Pop-up musst du die Deinstallation noch einmal mit dem Button "Deinstallieren" bestätigen
Leere den gesamten Shopware-Cache und lade die Administration neu
ThemeWare® wurde nun deinstalliert.
ThemeWare® deaktivieren
Wenn du ThemeWare® deinstallierst, kannst du die Option "Alle App-Daten endgültig entfernen" nutzen. Diese löscht alle Daten von ThemeWare® wie beispielsweise die Theme-Konfiguration, ThemeWare® Duplikate und die ThemeWare® Zusatzfelder.
Möchtest du ThemeWare® also rückstandslos entfernen, nutze diese Option.
Wird die Option nicht genutzt verbleiben alle Daten weiterhin im System und können wieder genutzt werden sobald du ThemeWare® wieder installierst.
Wichtig: Nicht lizenzierte Erweiterungen müssen komplett gelöscht werden und dürfen nicht mehr in der Erweiterungs-Verwaltung deines Shops auftauchen!
Screenshots
Option: Alle App-Daten endgültig entfernen
Tipp: Bist du dir nicht sicher ob du ThemeWare® nicht doch weiter nutzen möchtest, oder die Deinstallation zum Debugging nutzt, behalte die Daten damit Sie bei einer späteren Installation wieder verfügbar sind.
Weiterführende Informationen
Hinweis: Es ist sinnvoll aber nicht unbedingt nötig Erweiterungen vor der Deinstallation zu deaktivieren.
Tipp: Die Deinstallation kann genutzt werden um Fehler zu beheben, falls beispielsweise Schreibrechte auf dem Server falsch gesetzt wurden. In diesem Fall solltest du die Option "Alle App-Daten endgültig entfernen" auf keinen Fall nutzen!
" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Klicke auf das Dropdown-Icon am "Speichern"-Button
Speicher deine Konfiguration mit der Option "Bereinigen" (4)
ThemeWare® wurde nun bereinigt.
Bereinigen der Theme-Konfiguration
Screenshots
Weiterführende Informationen
Hinweis: Mehr zum Thema "verwaiste Konfigurationsfelder" findest du im Artikel .
Öffne dort den Abschnitt "Layout" (3)
Trage im Konfigurationsfeld "CSS-Klassen" deine eigene CSS-Klasse ein (4)
Tipp: Trenne mehrere Klassen mit einem Leerzeichen.
Speichere die Änderungen deiner Erlebniswelt
Nach dem Neuladen der Storefront sollte dein Styling nun auf den CMS-Block angewendet werden.
Wie du CSS-Styles hinzufügen kannst erfährst du in folgender Anleitung:
Verknüpfe deinen Shopware Account mit der Shop-Administration:
Melde dich mit deinen Shopware Account in der Administration an:
ThemeWare® aktivieren
Tipp: Weise ThemeWare® als nächstes deiner Storefront zu: ThemeWare® zuweisen
Screenshots
ThemeWare® deaktivieren
Wichtig: Nicht lizenzierte Erweiterungen müssen komplett gelöscht werden und dürfen nicht mehr in der Erweiterungs-Verwaltung deines Shops auftauchen!
Screenshots
Weiterführende Informationen
Hinweis: Damit du ein Theme deaktivieren kannst, darf dieses keinem Verkaufskanal mehr zugewiesen sein!
Hinweis: Das "Deaktivieren" von Erweiterungen (Plugins, Apps oder Themes) löscht keine Daten. (Stand: Shopware 6.5.6.0)
Tipp: Bei Darstellungsfehlern in der Storefront, kann es helfen Erweiterungen (Plugins, Apps oder Themes) einmal zu deaktivieren und dann wieder zu aktivieren.
Logo einbinden
In diesem Artikel zeigen wir dir, wie du dein Logo in deinen Online-Shop einbinden kannst, was du dabei beachten solltest und welche Optimierungsmöglichkeiten du dabei hast.
Wir gehen in diesem Artikel davon aus, dass du bereits ein Logo für deinen Shop hast oder einfach unsere PSD-Vorlage nutzt.
Beispiel
Neben den Hauptfarben und der Schrift ist das Logo eins der Shop-Elemente welches essentiell für dein Branding bzw. Corporate-Design ist.
Über die ThemeWare Utilities erhältst du für dein Theme eine passende Logo-Vorlage im PSD-Format die du nutzen kannst.
Das Shop-Logo bindest du am einfachsten direkt über die ThemeWare® Konfiguration im Shopware 6 Theme-Manager deiner Administration ein.
Beispiel: In unserem Beispiel binden wir das ThemeWare® Logo in unseren Shop ein.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Du hast nun das Shop-Logo erfolgreich ausgetauscht.
Grundwissen: Mehr Informationen zum Thema "Shop-Logo" findest du im Artikel
CMS-Element individuell stylen
Du kannst ein bestimmtes CMS-Element individuell stylen, indem du ihm in den Element-Einstellungen eine eigene CSS-Klasse zuweist und die gewünschten Styles in deiner CSS-Datei oder der Theme-Konfiguration definierst.
Darüber hinaus kannst du auch die automatisch generierte Element-ID nutzen – insbesondere bei CMS-Elementen, denen du keine eigene CSS-Klasse zuweisen kannst.
CSS-Klasse einem ThemeWare® CMS-Element hinzufügen
Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element (1)
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Wechsel in den Tab "Erweitert" (3)
Trage im Konfigurationsfeld "CSS-Klassen (Element)" deine eigene CSS-Klasse ein (4)
Tipp: Trenne mehrere Klassen mit einem Leerzeichen.
Speichere deine Änderungen
Für jedes CMS-Element erstellt Shopware automatisch eine eindeutige Element-ID. Diese kannst du nutzen, um das Element individuell per CSS zu stylen – vor allem dann, wenn sich keine eigene CSS-Klasse zuweisen lässt.
Diese Element-ID findest du im HTML-Code der Storefront. Sie wird im data-cms-element-id-Attribut des entsprechenden Containers hinterlegt:
Per CSS kannst du dieses Attribut dann wie folgt selektieren:
Wie du CSS-Styles hinzufügen kannst erfährst du in folgender Anleitung:
CSS-Animationen für Erlebniswelten
In dieser Anleitung erfährst du, wie du Erlebniswelten mit ThemeWare® CSS-Scroll-Animationen verschönern kannst.
Animationen – CSS-Animationen für CMS-Blöcke
ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Animationen zum Verschönern deiner Erlebniswelten bereit. Nachfolgend erklären wir dir, wie du die "CSS-Scroll-Animationen" in nur 2 Schritten aktivieren und nutzen kannst.
Rechts: CSS-Scroll-Animation "Fade-in"
Tipp: Anwendungsbeispiele findest du auf den Startseiten in unseren .
ThemeWare® CSS-Scroll-Animationen
1. Animationen aktivieren
Öffne die Administration deins Shops
Wechsel über die Hauptnavigation in den Theme-Manager ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Öffne die Konfiguration deines Themes
Wechsel im Tab "Erlebniswelten" in den Bereich "Alle Typen"
Im Abschnitt "CSS-Scroll-Animationen" findest du Konfigurationsfelder für "CMS-Blöcke" und "Überschriften in CMS-Blöcken"
Wähle die gewünschte Animation für CMS-Blöcke bzw. die Überschriften in CMS-Blöcken (optional).
Speicher diese Änderung damit diese in die Storefront übernommen wird
Wechsel über die Hauptnavigation in die Erlebniswelt-Verwaltung ("Inhalte" => "Erlebniswelten")
Bearbeite die gewünschte Erlebniswelt
Wähle den gewünschten CMS-Block aus, welchen du animieren möchtest
Der entsprechende CMS-Block sollte nun mit der gewünschten Animation animiert werden. Wiederhole "Step 2" für alle CMS-Blöcke, die du animieren möchtest.
Sollte die Änderung nicht in der Storefront ankommen, prüfe bitte ob das Theme dem entsprechenden Verkaufskanal zugewiesen wurde. Leere bei Änderungen dieser Art auch unbedingt einmal den gesamten Shopware sowie den Browser-Cache.
Invalide Konfigurationsfelder korrigieren
In diesem Artikel erfährst du, wie du ein invalides Konfigurationsfeld korrigieren kannst.
Um invalide Konfigurationsfelder zu korrigieren, folge bitte der folgenden Anleitung.
Hintergrundwissen
Kannst du deine Konfiguration nicht speichern und/oder erhältst beim Speichern einen entsprechenden Hinweis (z.B. "Ungültige Konfiguration"), liegt das in der Regel an einem falsch befüllten Konfigurationsfeld.
Bei einem Fehler gibt es die beiden folgenden Möglichkeiten:
Du hast vor dem Speichern ein Feld falsch befüllt.
Der falsche Wert wird nicht übernommen. Lade die Konfiguration einmal neu und alles ist wieder in Ordnung.
Du hast vor dem Update auf Shopware 6.7 ein Feld falsch befüllt.
Du musst nun den Wert finden und korrigieren.
Wir gehen in diesem Artikel davon aus, dass du die Konfiguration bereits validiert hast und einen Hinweis auf das fehlerhafte Feld bekommen hast.
Hast du die Konfiguration noch nicht validiert, gehe bitte wie in folgendem Artikel beschrieben vor:
Gehen wir davon aus, du erhältst die Meldung SCSS Value "#9fa5ab;" is not valid for type "color" oder SCSS Value "none" is not valid for type "color". Beides sind Varianten des selben Problems, einer falsch befüllten Farbkonfiguration.
Im ersten Fall hat sich ein Kopierfehler eingeschlichen und ein Semikolon wurde ergänzt: #9fa5ab;. Im zweiten Fall wurde der Wert none eingefügt. Der Wert none ist kein valider Wert für ein CSS-/SCSS-Farbfeld. Nutze transparent oder rgba(255, 255, 255, 0) um eine Farbe zu "entfernen".
Öffne die Administration deines Shops
Öffne die Konfiguration deines Themes
Durchsuche jeden Tab mit deinem Browser (z.B. Strg + F) nach dem fehlerhaften Wert (z.B. #9fa5ab; bwz. none )
Dein Theme sollte nun wieder gespeichert werden.
Mehr Informationen zum Fehler "Ungültige Konfiguration" findest du in folgenden Artikel:
Überschriften in CMS-Blöcken gestalten
In dieser Anleitung erfährst du, wie du Überschriften in CMS-Blöcken mit ThemeWare® CSS-Headline-Klassen gestalten kannst.
Headline-Klassen – Überschriften in CMS-Text-Blöcken
ThemeWare® stellt dir individuelle CSS-Headline-Klassen zur Verfügung mit welchen du, die aus unseren Shopware 5 Themes bekannten Überschriften, auch für deine Shopware 6 Erlebniswelten erstellen kannst.
Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Überschriften laden (optional)
Tipp: Anwendungsbeispiele findest du in unseren .
ThemeWare® CSS-"Headline"-Klassen
CSS-Klasse
Bereich
Funktionsbeschreibung
Beispiel
Erweiterungen bzw. Plugins prüfen
Um zu prüfen ob ein Fehler oder Problem durch eine bestimmte Erweiterung (Plugin oder App) verursacht wird, folge bitte den nachfolgenden Schritten:
Navigiere über die Hauptnavigation in die Erweiterungs-Verwaltung ("Erweiterungen" => "Meine Erweiterungen" => Tab "Apps")
Wenn das Problem nicht mehr auftritt, ist ThemeWare® nicht der Verursacher und es gibt ein Problem mit einer Erweiterung (Plugin oder App).
Fehlermeldungen debuggen
Fehlermeldungen in der Shopware 6 Administration debuggen
Wenn Shopware im Produktivmodus betrieben wird, werden i.d.R. nur allgemeine Meldungen wie "Theme konnte dem Verkaufskanal nicht zugewiesen werden" ausgegeben. Anhand dieser allgemeinen Meldungen ist es leider nicht möglich, die Ursache des Fehlers genauer zu identifizieren.
Der erste Schritt bei Fehlermeldungen in der Administration sollte sein, eine detailliertere Fehlermeldung zu erhalten.
Detailliertere Fehlermeldung erhalten
Um eine detailliertere Fehlermeldungen zu erhalten nutze eine oder beide der folgenden Optionen:
Prüfe deinen PHP-Error-Log auf weitere Informationen.
Falls du nicht weißt, wie du den Wert ändern kannst, ist dir dein Hoster sicherlich gerne behilflich.
Versetze Shopware (temporär) in den Debugmodus.
Eine Anleitung findest du in der .
Fehlerbehebung
Wir haben es uns zur Aufgabe gemacht mit ThemeWare® das beste Erlebnis für dich und deine Kunden zu bieten. Wie du an unseren über 380 Bewertungen sehen kannst, liegt uns viel daran, einen großartigen Support zu leisten.
Durch unsere über 3.000 Kunden haben wir fast jedes Problem schon unzählige Male gesehen und gelöst. Bitte vertraue uns, sowie diesem Prozess und folge Schritt für Schritt der Anleitung.
Über 95% aller "Probleme" werden nicht durch ThemeWare® ausgelöst. Es ist sehr wahrscheinlich, dass du das Problem mit Hilfe dieses Prozesses selber lösen kannst und nicht erst auf eine Antwort von uns warten musst.
Mögliche Ursachen:
das Problem resultiert aus einer veralteten Storefront
das Problem besteht bereits im Shopware Standard-Theme (bzw. Shopware default theme)
das Problem entsteht durch (eine) individuelle Anpassung(en)
das Problem wird durch (eine) Erweiterung(en) Dritter verursacht
All dies kann mit unseren Prozess geprüft werden und falls du das Problem doch nicht selber lösen kannst, eröffnest du im Laufe dieses Prozesses automatisch ein Support-Ticket. Es ist aber unbedingt notwendig, dass du die Schritte genau befolgst. Nur so können wir unseren exzellenten Support leisten, den alle so sehr lieben.
Bitte starte die Fehlerbehebung jetzt unter:
Theme als Fehlerursache identifizieren
Bevor du ein Problem meldest, kannst du ganz einfach selber überprüfen, ob dein Theme für das Problem verantwortlich sein kann.
Shopware Standard-Theme zuweisen
Weise einmal das "Shopware Standard-Theme" (bzw. Shopware default theme) deiner Storefront zu. Besteht das Problem auch im Standard-Theme, ist zu 99,9% davon auszugehen, dass ThemeWare® nicht der Verursacher ist.
Hinweis: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess.
Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung.
Weiterführende Informationen
Wie du das Shopware Standard-Theme (bzw. Shopware default theme) zuweisen und prüfen kannst, erfährst du in folgendem Artikel:
In diesem Artikel geben wir dir einen Überblick über die Theme-Konfiguration im Theme-Manager.
Der Theme-Manager ist die Theme-Verwaltung in der Administration. Du erreichst diese über die Hauptnavigation "Inhalte" => "Themes". (Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.)
In der Theme-Übersicht findest du alle installierten und aktivierten Themes deines Systems.
Mit einem Klick auf das entsprechende Theme gelangst du in die Theme-Konfiguration des entsprechenden Themes.
Die ThemeWare® Theme-Konfiguration unterscheidet sich von der Standard Theme-Konfiguration in Shopware 6. Wir haben einige nützliche Anpassungen integriert und die Darstellung der Konfiguration verbessert. (
ThemeWare® zuweisen
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 einem Verkaufskanal zuweisen kannst.
Die Theme-Konfiguration von ThemeWare® kannst du über zwei Wege erreichen:
Über den entsprechenden (empfohlen)
Über die
Nachfolgend zeigen wir dir beide Wege im Detail.
Responsive Erlebniswelten erstellen
Ab Shopware 6.4.19.0 kannst du die Sichtbarkeit von Sektionen und Blöcken ganz einfach im Erlebniswelt-Editor einstellen.
Wechsel über die Hauptnavigation in die Erlebniswelt-Verwaltung ("Inhalte" => "Erlebniswelten")
Klicke auf die gewünschte Erlebniswelt um diese zu bearbeiten
Updates und Neuigkeiten
Eine der größten Vorteile von ThemeWare® ist die stätig Weiterentwicklung. Du erhältst so regelmäßig neue Funktionen, verkaufsfördernde Features, Aktualisierungen, Verbesserungen und natürlich auch Fixes.
Auf welche Änderungen du dich in welchem Release freuen kannst, erfährst du auf diversen Wegen:
Der ThemeWare® Update-Newsletter ist Bestandteil der ThemeWare® Utilities. So verpasst du keine Neuigkeiten mehr!
Den ThemeWare® Changelog findest du zum einen auf der -Seite deines Themes im Tab "Änderungen":
Und zum anderen im Bereich "Changelogs" im ThemeWare® :
Shop aktualisieren
Um auszuschließen, dass etwaige Probleme bereits mit einem Update behoben wurden ist es sinnvoll Shopware, alle Erweiterungen (Apps bzw. Plugins) und ThemeWare® selber auf die jeweils neuste Version zu aktualisieren.
Shopware auf die neuste Version aktualisieren:
Navigiere über die Hauptnavigation zum "Shopware-Updater" ("Einstellungen" => "System" => "Shopware-Update")
Shopware Standard-Theme prüfen
Um zu prüfen ob ein Fehler oder Problem überhaupt im Zusammenhang mit ThemeWare® stehen könnte, reicht es das Shopware Standard-Theme (bzw. Shopware default theme) deinem Verkaufskanal zuzuweisen. Folge dazu einfach der folgenden Anleitung:
Deaktiviere (nicht deinstallieren!) hier alle aktiven Erweiterungen
Shopware Cache leeren (nicht in der Cloud verfügbar):
Navigiere danach über die Hauptnavigation in den Bereich "Cache & Indizes" ("Einstellungen" => "System")
Klicke auf "Caches leeren"
Der Shopware Cache wird nun geleert...
Webseite und Browser-Cache neu laden:
Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem Cache-Refresh neu:
Windows: Strg + F5
Mac: Command (⌘) + Shift (⇧) + R oder Command (⌘) + Option/Alt (⌥) + R
Erweiterungen prüfen
Wichtig: Da man nicht voraussagen kann, ob und wenn ja, welche Erweiterung ein Problem verursacht, ist es wichtig alle aktiven Erweiterungen einmal zu deaktivieren – auch, wenn du eine Vermutung hast.
Tritt das Problem nicht mehr auf?
Tipp: Wenn Du herausfinden möchtest, welche Erweiterung das Problem verursacht, aktiviere eine Erweiterung nach der anderen und prüfe nach jeder aktivierten Erweiterung einmal die Storefront. Konntest du eine Erweiterung als Verursacher identifizieren, wende dich einfach an den entsprechenden Hersteller und teile diesen unbedingt mit, was du herausgefunden hast.
Hinweis: Die Artikel ist Bestandteil unseres geführten Assistenten zur Fehlerbehebung und erklärt einen bestimmten Schritt in diesem Prozess.
Damit du die entsprechenden Schritte in der richtigen Reihenfolge durchführst nutze bitte den Assistenten zur Fehlerbehebung.
Hinweis: Bei ThemeWare® CMS-Elementen kannst du die automatisch generierte Element-ID auch direkt in der Konfiguration des jeweiligen CMS-Elements im Tab "Erweitert" einsehen. So musst du sie nicht erst aus dem HTML der Storefront herauslesen.
Weiterführende Informationen
<div class="col-12" data-cms-element-id="019762d3f5ac74cd97043411f86aec36">
<div class="cms-element-twt-modern-teaser element ...">
...
[data-cms-element-id="019762d3f5ac74cd97043411f86aec36"] {
/* Eigene Styles hier */
}
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Wechsel in den Tab "Layout" (3)
Öffne den Bereich "Bilder" (4)
Klicke auf den Button (5) um das aktuelle "Logo @Desktop" zu entfernen
Logo hochladen oder öffnen
Über den Button "Dateien hochladen" (6) kannst du nun dein Logo hochladen und einbinden
Über den Button "Medien öffnen" (7) kannst du ein bereits hochgeladenes Bild auswählen und per Drag-and-Drop (8) in das Media-Feld ziehen
Wiederhole die Schritte 6 und 7 für alle Logos die du austauschen möchtest
Speicher die Theme-Konfiguration
Wechsel in die Storefront und lade die Seite einmal neu
Hinweis: Nutze die CSS-Animation nicht in CMS-Seiten die in Pop-ups bzw. Modals angezeigt werden. Dort funktionieren die Animationen nicht.
Hinweis: Nutze die CSS-Animation nicht in CMS-Blöcken die Pop-ups bzw. Modals beinhalten. Dann funktionieren die Modals u.U. nicht.
Tipp: In der Pro-Edition kannst du alle Abschnitte mit dem "Alle aufklappen"-Button neben dem Speichern-Button aufklappen und auf einen Schlag durchsuchen.
Hinweis: Du kannst die ThemeWare® "CSS-Klassen für Überschriften" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
: In der Shopware Cloud sind diese Verbesserungen derzeit nicht möglich.)
Die ThemeWare® Konfigurationen ist in verschiedene Ebenen untergliedert.
Die erste Ebene sind die Tabs (1) am oberen Rand der Konfiguration. Hier siehst du ganz grob den Aufbau der Storefromt in Form der wichtigsten Bereiche – wie beispielsweise "Header", "Footer", "Inhalt", "Erlebniswelten" usw.
Die nächste Ebene sind die Accordions (2). Dies sind aufklappbare Abschnitte (Blöcke) welche die Konfiguration in bestimmte Elemente – wie beispielsweise das "Logo", die "Top-Navigation", den "Cookie-Hinweis" usw. – gruppieren.
Innerhalb dieser Abschnitte findest du nochmal eine Gruppierung für Konfigurationsfelder in Bereiche (Sektionen) (3) wie beispielsweise die "Basiskonfiguration", die "Farbkonfiguration", die "Bildkonfiguration", die "Schriftkonfiguration" usw.
Innerhalb dieser Bereiche findest du dann die eigentlichen Konfigurationsfelder (4).
ThemeWare® Theme-Konfiguration
Grundsätzlich ist die ThemeWare® Konfiguration mit Tabs in die wichtigsten Bereiche der Shopware 6 Storefront eines Shops aufgeteilt.
Es fängt erstmal mit dem "Layout" an, welches sich auf den gesamten Shop auswirkt. Dann kommt der Tab "Header", der Kopfbereich deiner Storefront. Darauf folgt der "Footer", der untere Bereich deines Shops in deiner Storefront den du sehr umfangreich konfigurieren kannst.
Im Tab "Inhalt" findest du seitenübergreifende Inhaltselemente wie beispielsweise die "Breadcrumb" oder den "Cookie-Hinweis". Der Tab "Erlebniswelten" enthält Konfigurationsfelder rund um die Gestaltung deiner Erlebniswelten.
Die Tabs "Kategorieseiten" und "Produktseiten" beinhalten die Konfiguration für die entsprechenden Seitentypen deines Shops.
Dazu gibt es noch ein paar besondere Tabs:
Zum einen gibt es den Tab "Widgets". Hier findest du die Konfiguration für die ThemeWare® Widgets. Widgets sind ein neues Feature von ThemeWare® für Shopware 6. Sie sind Inhaltselemente welche an verschiedenen Stellen in der Storefront ausgegeben werden können (z.B. Zahlungs- und Versandarten, Social-Icons). Beispielsweise besteht der Footer aus diesen Widgets. Das bedeutet, dass du den eigentlichen Footer im Tab "Footer" und die Widgets (welche du im Footer verwendest) im Tab "Widgets" konfigurierst.
Zum anderen gibt es den Tab "Erweiterungen". Hier findest du größere und völlig eigenständige Zusatzfunktionen von ThemeWare® welche i.d.R. an einer bestimmten Stellen in der Storefront ausgegeben werden (z.B. die USP-Bar).
Zum Schluss folgt noch der Tab "Weiteres". Dieser beinhaltet verschiedene allgemeine Konfigurationen für fortgeschrittene Anwender, Beta-Features und Kompatibilitäts-Konfigurationen der ThemeWare® HC-Architecture®.
Wenn du die Konfiguration speicherst, wundere dich nicht, dass der Theme-Manager wieder auf den ersten Tab springt. Das ist leider ein Verhalten von Shopware, was wir nicht beeinflussen können. Vielleicht wird dies mit einem künftigen Shopware Update behoben.
Merke dir daher einfach, in welchem Tab du gerade warst. Wenn du in den Tab zurück wechselst, dann ist immer das entsprechenden Accordion wieder geöffnet.
Nimm bei der Konfiguration eher kleine bzw. wenige Änderungen auf einmal vor. Speicher dann und sieh dir die Auswirkung in der Storefront an.
Wenn du langsam und in kleinen Schritten vorgehst, kannst du besser nachvollziehen, was du zuletzt bearbeitet hast um leichter erneute Änderungen oder Korrekturen vornehmen zu können.
Vielleicht speicherst oder kopierst du dir auch, welchen Wert du verändert hast bzw. wie der vorherige Wert war damit du die Änderung einfach wieder zurücksetzen kannst, wenn dir diese nicht gefallen hat.
Theme-Übersicht in Shopware 6 Self-hosted
Theme-Übersicht in der Shopware 6 Cloud
Screenshots
Theme-Konfiguration
Screenshots
Tipp: Viele Konfigurationsfelder haben Hilfe-Texte . Diese sind sehr wichtig. Schau dir die Hilfe-Texte daher immer an, sie erklären dir genau was die einzelnen Optionen oder die Konfiguration bedeutet und geben dir so eine wichtige Hilfestellung.
Tabs im Überblick
Konfiguration speichern
Tipps zur Konfiguration
Tipp: Mit vielen kleinen Schritten kommst du erfahrungsgemäß schneller ans Ziel.
Weiterführende Informationen
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront im Bereich "Verkaufskanäle" (1)
Wechsel in den Tab "Theme" (2)
Klicke nun im Bereich "Theme-Zuweisung" auf den Button "Theme ändern" (3)
Wähle ThemeWare® im Pop-up "Theme auswählen" aus (4) und klicke auf den Button "Theme ändern" (5)
Klicke nun oben noch einmal auf "Speichern" damit das Theme zugewiesen und kompiliert wird (6)
ThemeWare® wurde nun deiner Storefront zugewiesen.
ThemeWare® zuweisen
Pop-up "Theme auswählen"
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Theme-Verwaltung" (1) (2) ("Inhalte" => "Themes")
Hinweis: In der Shopware Cloud findest du den Bereich "Themes" direkt in der Hauptnavigation.
Klicke nun auf dein ThemeWare® Theme um die Bearbeitung zu beginnen
Du befindest dich automatisch im Tab "Allgemein" (3)
Wähle nun im Dropdown "Folgenden Verkaufskanälen zugewiesen" (4) neben dem Theme-Vorschaubild deinen Verkaufskanal vom Typ "Storefront" (5) aus
Klicke auf oben auf den Button "Speichern" (6)
Es erscheint ein Pop-up welches nochmal "nachfragt" ob du die Änderung vornehmen bzw. die aktuelle Zuweisung wirklich ändern möchtest. Klicke hier einfach auf "Speichern"
ThemeWare® wurde nun deiner Storefront zugewiesen.
Hinweis: Zur Auslieferung eines Themes ist immer ein Verkaufskanal der Art "Storefront" nötig. Wie du einen weiteren Verkaufskanal anlegst, erfährst du hier: Verkaufskanäle
1. Verkaufskanal
Screenshots
Tipp: Beginne nun mit der Bearbeitung von ThemeWare®:
2. Theme-Konfiguration
Screenshots
Tipp: Beginne nun mit der Bearbeitung von ThemeWare®:
Die Erlebniswelt öffnet sich nun im Erlebniswelt-Editor
Klicke auf den Button oben links in der CMS-Sektion die du bearbeiten möchtest (1)
Die Sektion-Einstellungen öffnen sich rechts im Fenster (2)
Öffne den Abschnitt "Sichtbarkeit" (3)
Sektion-Einstellungen
Klicke auf CMS-Block den du bearbeiten möchtest (1)
Die Block-Einstellungen öffnen sich rechts im Fenster (2)
Öffne den Abschnitt "Sichtbarkeit" (3)
Block-Einstellungen
Im Abschnitt "Sichtbarkeit" (3) kannst du die Sektion bzw. den Block nun für drei Viewports konfigurieren (4).
Im Editor werden unsichtbare CMS-Sektionen bzw. CMS-Blöcke "eingeklappt".
Mit einem Klick auf den Link "Sektion einklappen" bzw. "Sektion ausklappen" (5) kannst du eine unsichtbare CMS-Sektion ein-/ausklappen um sie zu bearbeiten.
Mit einem Klick auf den Link "Block einklappen" bzw. "Block ausklappen" (5) kannst du einen unsichtbaren CMS-Block ein-/ausklappen um ihn zu bearbeiten.
Unsichtbare CMS-Sektion
Unsichtbarer CMS-Block
1. Erlebniswelt bearbeiten
2. Sektion bearbeiten
2. Block bearbeiten
3. Sichtbarkeit
Hinweis: Beachte das Shopware hierbei lediglich eine CSS-Klasse an der Sektion bzw. dem Block ergänzt. Das Element ist also lediglich unsichtbar, der HTML-Code ist nach wie vor in der Storefront vorhanden.
Tipp: Bis Shopware mehr Viewports erlaubt, bieten dir die Bootstrap CSS-Klassen von ThemeWare® weitere Konfigurationsmöglichkeiten für die Sichtbarkeit von CMS-Sektionen und CMS-Blöcken: siehe
Tipp: Schaue regelmäßig auf die Seite "Neuigkeiten und Ankündigungen" in unserem Service Portal um über Neuigkeiten bzw. bevorstehende Änderungen informiert zu sein!
Der ThemeWare® Newsletter
Der ThemeWare® Changelog
Update-Leitfaden ⭐
Klicke auf den Button "Nach Updates suchen"
Aktualisiere Shopware sofern eine neuere Version vorhanden ist
Erweiterungen (Apps bzw. Plugins) auf die neuste Version aktualisieren:
Navigiere über die Hauptnavigation zur "Erweiterungs-Verwaltung" ("Erweiterungen" => "Meine Erweiterungen")
Prüfe im Tab "Apps" ob es Updates gibt
Aktualisiere alle entsprechenden Apps
ThemeWare® auf die neuste Version aktualisieren:
Prüfe im Tab "Themes" ob es ein Update für ThemeWare® gibt
Prüfe im Changelog ob es ein Update für ThemeWare® gibt
Hinweis: Bitte prüfe ob du eine gültige Subscription für Kaufversion hast, damit du auch die neusten Updates erhältst. Die Subscription ist in Mietversion stets enthalten.
Den gesamten Shop aktualisieren:
Weiterführende Informationen
Browser-Cache leeren
Öffne die Administration deines Shops
Shopware Standard-Theme zuweisen:
Navigiere über die Hauptnavigation zu deinem Verkaufskanal ("Verkaufskanäle" => "..." => Tab "Theme")
Weise bitte das Shopware Standard-Theme (bzw. Shopware default theme) dem entsprechenden Verkaufskanal zu
Shopware Cache leeren (nicht in der Cloud verfügbar):
Navigiere danach über die Hauptnavigation in den Bereich "Cache & Indizes" ("Einstellungen" => "System")
Klicke auf "Caches leeren"
Webseite und Browser-Cache neu laden:
Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem Cache-Refresh neu:
Windows: Strg + F5
Wenn das Problem weiterhin – also auch ohne ThemeWare® – auftritt, ist zu 99,9% davon auszugehen, dass ThemeWare® nicht der Verursacher ist und es ein grundsätzliches Problem in Shopware oder mit einer Erweiterung (Plugin oder App) gibt.
Prüfe als nächstes ob eine bestimmte Erweiterung den Fehler bzw. das Problem verursacht:
Das Shopware Standard-Theme kannst du in 3 Schritten prüfen:
Bei Fragen oder Problemen steht dir rund um die Uhr unser beliebtes ThemeWare® Service Portal zur Verfügung. Dort findest du alle Links zu ThemeWare®, nützliche Tools, Antworten auf die häufigsten Fragen, Lösungen für jedes bekannte Problem sowie Neuigkeiten rund um ThemeWare® und Shopware 6.
Das Service Portal ist daher immer die erste Anlaufstelle bei allen Anliegen rund um ThemeWare®:
ThemeWare® Support
Die meisten Fragen haben wir dank tausender Tickets bereits beantwortet, die meisten Fehler sind längst bekannt und gelöst. Damit alle Kunden von diesem Wissen profitieren können, haben wir unser Wissen in der ThemeWare® Wissensdatenbank, im ThemeWare® Handbuch und im ThemeWare® Video-Tutorial dokumentiert.
Zusätzlich findest Du in der Shopware Dokumentation nahezu alle Informationen zu Shopware 6.
So kannst Du fast alle Fragen und Probleme einfach selber lösen ohne auf unsere Antwort zu warten müssen.
Falls du dennoch Unterstützung benötigst, kannst du über das ThemeWare® Service Portal ein Ticket eröffnen um schnelle Hilfe zu erhalten.
Schaue in die
Schaue bei Problemen/Fehlern in den
Schaue in die ThemeWare® Dokumentation
Wir beantworten alle Tickets in kürzester Zeit. Wenn du nicht innerhalb von 24 Stunden eine Antwort erhältst gab es daher wahrscheinlich ein technisches Problem bei deiner Anfrage. Versuche es einfach erneut.
Benötigst du eine Aufwands-/Kosteneinschätzung von unseren ThemeWare® Experten für ein individuelles Shopware Design, Landingpage Designs, individuelle Anpassungen oder andere Shopware-Services, nutze in jedem Fall das ThemeWare® Service Portal:
Du hast eine Idee für eine bislang fehlende Funktion, von der auch viele andere Shopbetreiber profitieren würden? Du bist mit ThemeWare® oder einem Service unzufrieden? Du hast Wünsche oder Feedback zu Artikeln oder Videos? Dann lasse es uns wissen!
Wir freuen uns immer über Vorschläge und Hinweise, um unsere Produkte noch weiter zu verbessern.
Jedes Feedback wird von unseren Entwicklern geprüft und beantwortet. Wir informieren Dich auch gerne sobald Dein Feedback Einzug in ThemeWare® gefunden hat.
ThemeWare® bewerten
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 bewerten kannst.
Wir freuen uns immer über eine ehrliche Bewertung. Die Bewertung muss auch gar nicht lang sein, 1-2 Sätze reichen.
Tipp: Falls du uns Feedback geben möchtest kannst du jederzeit Verbesserungsvorschläge oder eine Beschwerde über unser einsenden. Wir beantworten jedes Feedback.
Es gibt zwei Möglichkeiten wie du ThemeWare® bewerten kannst:
Hinweis: Die Bewertung über den Shopware Account ist detaillierter und daher zielführender als eine Bewertung über die Shop Administration.
Nachfolgend zeigen wir dir beide Wege im Detail.
Logge dich in deinen ein
Wechsel oben links über das Auswahlfeld in den "Shopbetreiberbereich" (1)
Klicke in der Navigation auf "Shops" (2)
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" (1) (2) ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes" (3)
Hover-Effekte für Bilder in CMS-Blöcken
In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit ThemeWare® CSS-Hover-Klassen verschönern kannst.
Hover-Klassen – Hover-Effekte für Bilder
Mit ThemeWare® erhältst du eine große Auswahl an CSS-Hover-Klassen für Bilder in CMS-Blöcken. Diese CSS-Klassen ermöglichen dir, verschiedene Hover-Effekte für Bilder in CMS-Blöcken zu nutzen.
Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Bild-Hover-Effekte laden (optional)
Tipp: Anwendungsbeispiele findest du in unseren .
ThemeWare® CSS-Hover-Klassen
Achtung: Die alten CSS-Klassen twt-custom-cms-image-hover-1, twt-custom-cms-image-hover-2 sowie twt-cms-image-hover-gray-scale werden in ThemeWare 4.0 entfernt.
CSS-Klasse
Bereich
Funktionsbeschreibung
Beispiel
Abstände in CMS-Blöcken anpassen
In dieser Anleitung erfährst du, wie du Abstände von Elementen (= Slots) in CMS-Blöcken mit den ThemeWare® CSS-Gap-Klassen anpassen kannst.
Gap-Klassen – Abstände in CMS-Blöcken
ThemeWare® bietet dir diverse Gap-Klassen für CMS-Blöcke. In dieser Anleitung stellen wir dir diese CSS-Klassen vor.
Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Spaltenabstände laden (optional)
ThemeWare® CSS-Gap-Klassen
ThemeWare® CMS Grid-Blöcke
Elemente in CMS Grid-Blöcken haben in Shopware 6 einen fest definierten Abstand von 40px. Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.
Mit ThemeWare® 3.2 haben wir folgende CSS-Abstandsklassen für ThemeWare® CMS Grid-Blöcke sowie die Standard Grid-Blöcke von Shopware hinzugefügt.
CSS-Klasse
Bereich
Funktionsbeschreibung
Die neuen CSS-Gap-Klassen funktionieren auch in den CMS Spalten-Blöcken von ThemeWare®.
Zusatzfeld in der Erlebniswelt ausgeben
Zusatzfelder sind eine Grundfunktion von Shopware 6 und bieten dir die Möglichkeit, Produkte, Kategorien oder Hersteller individuell zu erweitern. Mit Zusatzfeldern kannst du flexibel zusätzliche Informationen speichern und bei Bedarf in der Storefront ausgeben.
Da weder Shopware noch ThemeWare® wissen können, in welche Datei bzw. in welchem Twig-Block dein individuelles Zusatzfeld integriert werden soll, müssen individuelle Zusatzfelder manuell in die Storefront eingebunden werden.
Dies geht entweder mit einem CMS-Element in einem Erlebniswelt-Layout oder über eine individuelle Template-Anpassung.
CMS-Element
Vorteile
Umsetzung ist sehr einfach
Nachteile
erst ab Shopware 6.6.9 verfügbar
keine Abfrage ob ein Zusatzfeld leer ist möglich
Vorteile
schon vor Shopware 6.6.9 verfügbar
eine Abfrage ob ein Zusatzfeld leer ist möglich
In dieser Anleitung erklären wir dir wie du Zusatzfelder mit einem CMS-Element in der Storefront ausgeben kannst.
Dank der Integration von individuellen Zusatzfeldern in das CMS-System von Shopware 6 lassen sich Zusatzfelder nahtlos in Textfelder einbinden.
In der folgenden Schritt-für-Schritt-Anleitung binden wir das individuelle Zusatzfeld "Sicherheitshinweis" mit einem CMS-Block auf der Produktdetailseite in der Storefront ein.
Wechsel in die Erlebniswelt-Verwaltung:
"Inhalte" => "Erlebniswelten"
Öffne dort das CMS-Layout deiner Produktdetailseiten um das Layout zu bearbeiten.
Füge nun in dein Layout einen CMS-Block aus der Kategorie "Text" ein.
Klicke auf das "Zahnrad"-Icon oben rechts im entsprechenden Text-Element um die Element-Einstellungen zu öffnen.
Zum einfügen hast du in Shopware 6.6.9.0 zwei Möglichkeiten:
Datenzuordnung (siehe )
Variable (siehe )
Die ist die unkompliziertere Variante, das einfügen von weiteren Zusatzfeldern oder Texten in das CMS-Element ist hierbei aber nicht möglich.
Klicke auf den Link "Datenzuordnung" (1) und wähle dein Zusatzfeld (2) aus.
z.B. product.customFields.custom_gpsr_sicherheitshinweis
In dieser Variante kannst du auch mehrere Zusatzfelder und Text in das CMS-Element einfügen.
Klicke auf den Button "Variable einfügen" (1) und wähle dein Zusatzfeld (2) aus.
z.B. product.customFields.custom_gpsr_sicherheitshinweis
Alternativ kannst du das Zusatzfeld als Variable auch direkt im HTML-Editor einfügen:
Das CMS-Element sieht im Editor nun wie folgt aus:
Das Zusatzfeld wird nun in der Storefront ausgegeben – sofern es im entsprechenden Produkt befüllt wurde.
Leere abschließend einmal den Shopware- sowie deinen Browser-Cache damit die Änderung auch in der Storefront korrekt angezeigt wird.
Mehr Informationen zum Thema "Zusatzfelder" findest du in folgendem Artikel:
Individuelle Anpassungen prüfen
Um zu prüfen ob ein Fehler oder Problem durch eine individuelle Anpassung verursacht wird, folge bitte der folgenden Anleitung:
Individuelle Anpassungen kannst du in 5 Schritten prüfen:
Navigiere über die Hauptnavigation zu deinem Verkaufskanal ("Verkaufskanäle" => "..." => Tab "Theme")
Wenn das Problem nicht mehr auftritt, ist ThemeWare® nicht der Verursacher und es gibt ein Problem mit deinen individuellen Anpassungen.
CSS-Klassen für Sektionen über die volle Breite
In dieser Anleitung erfährst du, wie du die Breite von CMS-Sektionen und CMS-Blöcken mit den ThemeWare® CSS-"max-width"-Klassen und den CSS-Boxed-Klassen modifizieren kannst.
Da die CSS-Klasse container nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten.
CSS-Klasse
Bereich
Funktionsbeschreibung
Bilder in CMS-Blöcken dekorieren
In dieser Anleitung erfährst du, wie du Bilder in CMS-Blöcken mit ThemeWare® CSS-Dekorationsklassen verschönern kannst.
ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken. In dieser Anleitung stellen wir dir diese CSS-Klassen vor.
Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Bild-Dekorationen laden (optional)
Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.
Responsive Erlebniswelten mit Bootstrap
In dieser Anleitung erfährst du, wie du responsive Erlebniswelten mit Bootstrap CSS-Klassen erstellen kannst.
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® ebenfalls vollständig kompatibel mit Bootstrap.
Nachfolgend stellen wir dir die entsprechenden CSS-Klassen vor und zeigen dir ein paar Anwendungsbeispiele.
Um Erlebniswelt-Blöcke in bestimmten Viewports ein- oder auszublenden, können die nachfolgenden Bootstrap Display-CSS-Klassen genutzt werden. Damit lassen sich beispielsweise Bild-Elemente für verschiedene Viewports optimieren.
Übersicht der Bootstrap Display-CSS-Klassen:
Diese CSS-Klassen kannst du im Erlebniswelt-Editor über das Feld "CSS-Klassen" in den Block-Einstellungen bzw. Sektion-Einstellungen hinzufügen.
ThemeWare® testen
In dieser Anleitung erfährst du, wie du ThemeWare® für Shopware 6 testen kannst.
Die ThemeWare® Mietversion enthält einen kostenlosen Probemonat. Die Miete kann jederzeit monatlich gekündigt werden oder wird zu den bei der Buchung angegebenen Preisen automatisch verlängert.
Öffne die Administration deines Shops
Wechsel über die Hauptnavigation in den "Store" (1) (2) ("Erweiterungen" => "Store")
ThemeWare® Soft Reset durchführen
In seltenen Fällen entsteht ein Problem dadurch, dass Dateien von Erweiterungen (Plugins, Apps oder Themes) nicht vollständig in die Storefront übertragen wurden. Dies kann man im Fall von ThemeWare® mit einem "Soft Reset" lösen.
Weise deinem Verkaufskanal das Shopware Standard-Theme zu:
Navigiere über die Hauptnavigation zu deinem Verkaufskanal ("Verkaufskanäle" => "..." => Tab "Theme")'
Der Shopware Cache wird nun geleert...
Mac: Command (⌘) + Shift (⇧) + R oder Command (⌘) + Option/Alt (⌥) + R
Hinweis: Möchtest du die Abstände in mobilen Viewports separate anpassen nutze die separaten CSS-Spaltenabstandsklassen: Spaltenabstände in CMS-Blöcken anpassen
Weise bitte das Original ThemeWare® Theme dem entsprechenden Verkaufskanal zu
Hinweis: Du kannst die ThemeWare® "CSS-Klassen für Bild-Hover-Effekte" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
Hinweis: Wie du ein Zusatzfeld mit einer Template-Anpassung in der Storefront ausgeben kannst, erfährst du in der Anleitung Zusatzfelder in der Storefront ausgeben.
Hinweis: Individuelle Zusatzfelder werden ab Shopware 6.6.9 in das CMS-System integriert. Vor Shopware 6.6.9 kannst du individuelle Zusatzfelder nur mit einer Template-Anpassung in der Storefront ausgeben: Zusatzfelder in der Storefront ausgeben
Tipp: Anwendungsbeispiele findest du in unseren Demoshops.
ThemeWare® CSS-Dekorationsklassen
Rahmen
Hinweis: Wie du die CSS-Klassen einfügst erfährst du in unserem Artikel .
Schatten
Schatten (erweitert)
Border-radius
Hinweis: Du kannst die ThemeWare® "CSS-Klassen für Bild-Dekorationen" bzw. "CSS-Klassen für Schlagschatten" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
In diesem Abschnitt integrieren wir ein Bildelement in die Sidebar, welches auf einen Rabatt aufmerksam macht. Im Smartphone-Viewport würde das Motiv zu viel Platz einnehmen, darum blenden wir es für diesen Viewport aus.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt.
Wähle als Block-Kategorie "Bilder" und füge dann den Block mit dem Namen "Bild, zentriert" per Drag & Drop zur Sidebar hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: Banner
CSS-Klassen: d-none d-lg-block
Konfiguriere nun das Element in diesem Block.
Bild: Wähle dein gewünschtes Motiv mit einer Breite von ca. 400px aus.
Anzeigemodus: Strecken
Tipp: Mit den CSS-Klassen d-none d-lg-block kannst du auch die Sidebar-Navigation für mobile Viewports ausblenden.
In diesem Abschnitt erstellen wir zwei Varianten eines Banners mit jeweils verschiedenen Bildgrößen für zwei unterschiedliche Viewports.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie mit Sidebar aus oder erstelle Sie und bearbeite die Erlebniswelt.
Wähle als Block-Kategorie "Bilder" und füge dann den Block mit dem Namen "Bild, zentriert" per Drag & Drop der Erlebniswelt hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: Banner
CSS-Klassen: d-none d-sm-block
Konfiguriere nun das Element in diesem Block.
Bild: Wähle dein gewünschtes Motiv mit einer Breite ca. 1920px aus.
Anzeigemodus: Standard
Wähle als Block-Kategorie "Bilder" und füge dann den Block mit dem Namen "Bild, zentriert" per Drag & Drop der Erlebniswelt hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: Banner Mobil
CSS-Klassen: d-block d-sm-none
Konfiguriere nun das Element in diesem Block.
Bild: Wähle dein gewünschtes Motiv mit einer Breite von ca. 580px aus.
Anzeigemodus: Strecken
Tipp: Du kannst auch ein drittes Bild-Element für den Tablet-Viewport ergänzen.
Mit Abstandsklassen kannst du Abstände von Erlebniswelt-Elementen je Viewports definieren. Nachfolgend zeigen wir dir ein Anwendungs-Beispiel:
Dieser Abschnitt folgt...
Element immer ausblenden: d-none
Element anzeigen bis 576px: d-block d-sm-none
Element anzeigen bis 768px: d-block d-md-none
Element anzeigen bis 992px: d-block d-lg-none
Element anzeigen bis 1200px: d-block d-xl-none
Element anzeigen ab 576px: d-none d-sm-block
Element anzeigen ab 768px: d-none d-md-block
Element anzeigen ab 992px: d-none d-lg-block
Element anzeigen ab 1200px: d-none d-xl-block
Element anzeigen von 0px bis 576px: d-block d-sm-none
Element anzeigen von 578px bis 768px: d-none d-sm-block d-md-none
Element anzeigen von 769px bis 992px: d-none d-md-block d-lg-none
Element anzeigen von 993px bis 1200px: d-none d-lg-block d-xl-none
Achtung: Shopware ab Version 6.5 nutzt Bootstrap 5. Dieser Artikel ist dann veraltet und wird bald überarbeitet.
Elemente für Viewports ein-/ausblenden
Tipp: Ab Shopware 6.4.19.0 kannst du die Sichtbarkeit von Sektionen und Blöcken ganz einfach im Erlebniswelt-Editor einstellen: siehe Responsive Erlebniswelten erstellen
Hinweis: Diese CSS-Klassen machen Sektionen und Blöcke lediglich unsichtbar, der entsprechende HTML-Code ist nach wie vor in der Storefront vorhanden.
Beispiel: Bild-Element in der Sidebar auf Smartphones ausblenden
Tipp: Ein Anwendungsbeispiel für ein "10% Rabatt"-Element in der Sidebar findest du in unserem .
Schritt 1: Erlebniswelt bearbeiten
Schritt 1.1: Block anlegen
Schritt 1.3: Element(e) des Blocks konfigurieren
Beispiel: Banner für verschiedene Viewports erstellen
Schritt 1: Erlebniswelt bearbeiten
Schritt 1.1: Block anlegen
Schritt 1.2: Element(e) des Blocks konfigurieren
Schritt 1.3: Block anlegen
Schritt 1.4: Element(e) des Blocks konfigurieren
Wichtig: Bitte beachte, dass Bilder erheblich den Page-Speed beeinflussen können und komprimiere diese so gut wie möglich mit Online-Tools wie .
Beispiel: Abstände für verschiedene Viewports definieren
Weiterführende Informationen
Hinweis: Mehr Informationen zum Aufbau der CSS-Klassen selber findest du im Artikel .
Wechsel in den Tab "Themes" (3)
Optional: Gebe "ThemeWare" oder z.B. "Modern" in der Suche ein
Klicke nun in der Übersicht auf das gewünschte ThemeWare® Theme
Es öffnet sich nun die Detailseite des ThemeWare® Themes
Klicke auf den Button "Theme hinzufügen" (4)
Es öffnet sich nun ein Pop-up
Hier findest du alle Details zu den Kosten nach Ablauf des Probemonats (5)
Lese und akzeptiere die AGB (6)
Und bestätige die "Buchung" jetzt mit "Miete jetzt diese Erweiterung" (7)
Du hast ThemeWare® mit einem kostenlosen Probemonat erworben.
Shopware Store in der Administration
ThemeWare® Modern Pro
ThemeWare® testen
Fertig!
Tipp: Installiere ThemeWare® als nächstes:
Screenshots
Weiterführende Informationen
Hinweis: Erworbene Erweiterungen erscheinen automatisch in der Erweiterungs-Verwaltung. Ein manueller Upload ist nicht nötig.
Du kannst Erweiterungen nach dem Bestellabschluss direkt über die Detailseite installieren, wir empfehlen dir aber den weg über die Erweiterungs-Verwaltung.
Tipp: Erwirbst du Erweiterungen für eine Testdomain kannst du über deinen Shopware-Account später die Lizenzen auf die Live-Domain übertragen. Mehr Informationen dazu findest du in der Shopware-Dokumentation.
Info: Es gibt keine gesonderte "Testversion" von ThemeWare®. Technisch gesehen, testest du stets die Vollversion von ThemeWare® mit dem vollen Funktionsumfang.
Einstellungen die du im Probemonat vornimmst bleiben darüber hinaus erhalten.
Wichtig: Um den Store in der Administration nutzen zu können musst du die folgenden Punkte beachten:
Registriere deinen Shop in deinem Shopware Account:
Weise bitte das Shopware Standard-Theme (bzw. Shopware default theme) dem entsprechenden Verkaufskanal zu
Deaktiviere (nicht deinstallieren!) ThemeWare®:
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes"
Deaktiviere ThemeWare® über den Switch-Button links neben dem ThemeWare® Logo
Aktiviere ThemeWare® wieder:
Aktiviere ThemeWare® über dem Switch-Button links neben dem ThemeWare® Logo
Weise ThemeWare® nun wieder deinem Verkaufskanal zu:
Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront im Bereich "Verkaufskanäle"
Wechsel in den Tab "Theme"
Klicke nun im Bereich "Theme-Zuweisung" auf den Button "Theme ändern"
Wähle ThemeWare® im Pop-up "Theme auswählen" aus und klicke auf den Button "Theme ändern"
Klicke auf den Button "Speichern" damit das Theme zugewiesen und kompiliert wird
Shopware Cache leeren:
Navigiere danach über die Hauptnavigation in den Bereich "Cache & Indizes" ("Einstellungen" => "System")
Klicke auf "Caches leeren"
Webseite und Browser-Cache neu laden:
Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem Cache-Refresh neu:
Windows: Strg + F5
Mac: Command (⌘) + Shift (⇧) + R oder Command (⌘) + Option/Alt (⌥) + R
In dieser Anleitung erfährst du, alles über das ThemeWare® CMS-Styling.
Für eine maximale Flexibilität und Kompatibilität, basiert das "ThemeWare® CMS-Styling" auf CMS-Blöcken und kann im Tab "Erlebniswelten" für verschiedene Seitentypen aktiviert/deaktiviert werden.
Das "ThemeWare® CMS-Styling" wird nur in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (=boxed) und angewendet.
Tipp: Anwendungsbeispiele findest du in unseren .
ThemeWare® CMS-Styling
Auf CMS-Seiten mit aktivem "ThemeWare® CMS-Styling" bekommen CMS-Blöcke eine Grundkonfiguration. Diese besteht derzeit aus einer Rahmenfarbe, einer Hintergrundfarbe und einem Außenabstand nach unten.
Diese Farben sind ebenfalls über den Tab "Erlebniswelten" konfigurierbar und werden auf allen Seiten mit aktivem "ThemeWare® CMS-Styling" angewendet.
Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => Abschnitt "CMS-Block" bzw. "CMS-Sektion"
Da das "ThemeWare® CMS-Styling" quasi für alle CMS-Blöcke gleich ist, gibt es zusätzlich zum globalen Styling neue CSS-Klassen um gewünschte Blöcke gezielt zu "resetten". Damit kannst du das gesamte "ThemeWare® CMS-Styling" für einen CMS-Block oder jeweils die Rahmenfarbe, die Hintergrundfarbe oder den Außenabstand entfernen bzw. resetten.
Umgekehrt gibt es natürlich auch Fälle wo auf Seiten ohne "ThemeWare® CMS-Styling" dennoch CMS-Blöcke passend gestylt werden sollen. Auch daran haben wir gedacht: Über weitere neue CSS-Klassen kann jedem gewünschten CMS-Block manuell das "ThemeWare® CMS-Styling" hinzugefügt werden. Damit kann man das gesamte "ThemeWare® CMS-Styling" oder jeweils für die Rahmenfarbe, die Hintergrundfarbe oder den Außenabstand auf einem CMS-Block anwenden.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
Ab ThemeWare® 0.3.1 gibt es für die Sidebar-Sektion zwei Layout-Varianten. Die entsprechende Konfiguration findest du im Tab "Erlebniswelten".
Variante 1
Die Sidebar-Sektion und die Content-Sektion werden (wie gehabt) zu einem Container mit "ThemeWare® CMS-Styling" kombiniert bzw. zusammengefasst.
Variante 2
Tipp: Die Konfiguration "Sidebar-Sektionen zusammenfassen (CMS Seiten)" findest du im Tab "Erlebniswelten" => Bereich "ThemeWare® CMS-Styling" => Abschnitt "Basiskonfiguration".
Beispiele
Das CMS-Styling fügt dem jeweiligen CMS-Block – wie oben erklärt – einen Rahmen, eine Hintergrundfarbe und den Außenabstand nach unten hinzu.
Shopware hat mit Version 6.6.0 !important Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe ). Dadurch werden nun einige in Bootstrap verfügbare CSS-Klassen aufgrund der entsprechenden CSS-Hierarchie vom CMS-Styling überschrieben.
Betroffen sind beispielsweise die folgenden CSS-Klassen und ihre Varianten:
Möchtest du diese Bootstrap CSS-Klassen für den Rahmen, den Hintergrund oder den Abstand unterhalb nutzen, entferne bitte das CMS-Styling für den entsprechenden CMS-Block mit der CSS-Klasse twt-cms-block-reset.
ThemeWare® neu installieren
In seltenen Fällen entsteht ein Problem dadurch, dass Dateien von Erweiterungen (Plugins, Apps oder Themes) nicht vollständig in die Storefront übertragen wurden. Dies kann man im Fall von ThemeWare® mit einem "Soft Reset" (siehe ThemeWare® Soft Reset durchführen) lösen.
Reicht dies nicht (z.B. bei fehlerhaften Schreibrechten durch eine manuelle Bearbeitung von Original-Dateien) hilft es nur ThemeWare® neu zu installieren:
ThemeWare® neu installieren:
Empfohlen: Erstelle ein vollständiges Backup deines Shops
Weise deinem Verkaufskanal das Shopware Standard-Theme zu:
Navigiere über die Hauptnavigation zu deinem Verkaufskanal ("Verkaufskanäle" => "..." => Tab "Theme")'
Weise bitte das Shopware Standard-Theme (bzw. Shopware default theme) dem entsprechenden Verkaufskanal zu
Deaktiviere ThemeWare®:
Wechsel über die Hauptnavigation in die "Erweiterungs-Verwaltung" ("Erweiterungen" => "Meine Erweiterungen")
Wechsel in den Tab "Themes"
Deinstalliere ThemeWare® (ohne die App-Daten zu entfernen):
Klicke auf den Kontext-Button neben dem Theme um das Kontextmenü zu öffnen und darin auf "Deinstallieren"
WICHTIG : Deaktiviere im folgenden Pop-up die Option "Alle App-Daten endgültig entfernen" damit deine Theme-Konfiguration erhalten bleibt!
Installiere ThemeWare® wieder:
Installiere ThemeWare® nun wieder mit einem Klick auf "Installieren"
Aktiviere ThemeWare® wieder:
Aktiviere ThemeWare® über dem Switch-Button links neben dem ThemeWare® Logo
Weise ThemeWare® nun wieder deinem Verkaufskanal zu:
Wechsel über die Hauptnavigation in den Verkaufskanal deiner Storefront im Bereich "Verkaufskanäle"
Wechsel in den Tab "Theme"
Shopware Cache leeren:
Navigiere danach über die Hauptnavigation in den Bereich "Cache & Indizes" ("Einstellungen" => "System")
Klicke auf "Caches leeren"
Webseite und Browser-Cache neu laden:
Lade danach die Seite, auf welcher das Problem aufgetreten ist, in deinem Web-Browser mit einem Cache-Refresh neu:
In dieser Anleitung erfährst du, wie du Spaltenabstände in CMS-Blöcken mit ThemeWare® CSS-Column-Klassen anpassen kannst.
Column-Klassen – Spaltenabstände in CMS-Blöcken
ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Column-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst – also die Abstände zwischen den einzelnen Elemente bzw. Spalten (= Slots).
Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Spaltenabstände laden (optional)
Tipp: Anwendungsbeispiele findest du in unseren .
Hinweis: Nutze für die Anpassung von Abständen in CMS-Blöcken gerne die neuen, intuitiveren CSS-Klassen von ThemeWare®:
ThemeWare® "Spalten" CMS-Blöcke
Spalten in CMS-Blöcken haben in Shopware 6 einen fest definierten Abstand von 40px (2x 20px). Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.
Die ThemeWare® Spaltenabstandsklassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware.
CSS-Klasse
Bereich
Funktionsbeschreibung
In mobilen Viewports werden Spalten untereinander dargestellt. Dabei haben Sie einen fest definierten Abstand von 0px. Mit ThemeWare® ab Version 2.1 stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.
Die CSS-Klassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware.
Klasse
Bereich
Funktionsbeschreibung
Du kannst die oben genannten CSS-Klassen für "Spalten"-Blöcke auch in "Grid"-Blöcken von ThemeWare® nutzen, wir haben für diese mit ThemeWare® 3.2.0 aber neue, intuitivere CSS-Klassen eingeführt und empfehlen künftig diese neuen CSS-Klassen zu nutzen.
Mehr Informationen dazu findest du in folgendem Artikel:
Mit ThemeWare® 3.2.0 haben wir neue CSS-Abstandsklassen für ThemeWare® "Grid" und "Spalten" CMS-Blöcke hinzugefügt. Diese kombinieren die Funktion der beiden oben genannten CSS-Klassen twt-cms-col-padding und twt-cms-col-margin.
Die neuen CSS-"Gap"-Klassen funktionieren in "Grids" und in den "Spalten"-Blöcken von ThemeWare®.
Mehr Informationen dazu findest du in folgendem Artikel:
Hinweis: Du kannst die ThemeWare® "CSS-Klassen für Spaltenabstände" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände in Erlebniswelten zu definieren.
Die ThemeWare® CSS-Abstandsklassen werden nach dem folgenden Muster benannt:
Beim Update von Bootstrap 4 auf Bootstrap 5 (ab Shopware 6.5) wurden einige Klassen umbenannt um logische Eigenschaftennamen anstelle von Richtungsnamen zu verwenden.
Ab Shopware 6.5 hast du in ThemeWare® daher die Möglichkeit zu wählen ob du die alte Bootstrap 4 oder die neue Bootstrap 5 Schreibweise nutzen möchtest:
Nutzt du die alte Schreibweise und möchtest diese nicht überall ändern, lade einfach die CSS-Abstandsklassen für Bootstrap 4. Neue ThemeWare® Installationen laden automatisch die Bootstrap 5 Abstandsklassen.
Nachfolgend findest du den Aufbau für beide Varianten:
// Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Größe} // für xs
// Erweiterte Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl
Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"
ThemeWare® CSS-Abstandsklassen
Beispiel
Bootstrap 4 vs. Bootstrap 5
Bootstrap 5 (Shopware 6.5)
Bootstrap 4 (Shopware 6.4)
Hinweis: Du kannst die ThemeWare® "CSS-Abstandsklassen" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen"".
Shopware Updates und ThemeWare®
In dieser Anleitung erfährst du, wie du vorgehen sollst, wenn du Shopware 6 gemeinsam mit ThemeWare® aktualisieren bzw. updaten musst.
Wir veröffentlichen regelmäßig Updates von ThemeWare®. Die meisten ThemeWare® Updates machst du unabhängig von Shopware Updates.
Es gibt aber natürlich auch Fälle in denen du ein Shopware Update durchführen möchtest. In diesen Fällen ist es immer sinnvoll vorab bzw. danach Erweiterungen (Plugins, Apps oder Themes) zu aktualisieren.
Hinweis: Wie du ThemeWare® aktualisieren kannst erfährst du im Artikel .
Ob du Erweiterungen vor oder nach dem Shopware-Update aktualisieren musst hängt von der Kompatibilität der Erweiterungen (Plugins, Apps oder Themes) ab.
Hier ist auch die Art des Shopware-Releases zu beachten, denn es gibt verschiedene Arten von Shopware-Releases:
Shopware Versionierung
Major-Release
Wenn inkompatible API-Änderungen durchgeführt wurden (= breaking changes)
z.B. 6.5 > 6.6
Minor-Release
Wenn eine neue Funktionalität hinzugefügt wurde, die rückwärtskompatibel ist
z.B. 6.5.1 > 6.5.2
Patch-Release
Wenn rückwärtskompatible Fehlerbehebungen durchgeführt wurden
z.B. 6.5.1.1 > 6.5.1.2
Grundsätzlich ist ThemeWare® immer mit der aktuellsten Shopware Version kompatibel bzw. wird kurzfristig in einer kompatiblen Version veröffentlicht. Dementsprechend gibt es für ältere Shopware Versionen auch immer eine passende ThemeWare® Version.
Da wir ThemeWare® in jedem neuen Shopware-Release testen, kann es – abhängig davon, wie umfangreich die nötigen Anpassungen sind – vorkommen, dass sich ein ThemeWare® Update erst kurz nach dem Shopware-Update veröffentlicht wird.
Major-Releases
Es kann aber vorkommen, dass es keine ThemeWare® Version (dies gilt so übrigens für alle Erweiterungen) gibt, welche – gleichzeitig – sowohl mit der alten als auch mit der neuen Shopware Version kompatibel ist. Dies gilt immer dann, wenn Shopware sogenannte "Breaking Changes" macht, die eine Kompatibilität mit beiden Versionen unmöglich machen.
Wie du oben in der "Shopware Versionierung" sehen kannst, sind "Breaking Changes" vor allem in Major-Releases möglich.
Der Shopware-Update-Assistent informiert dich falls es inkompatible Erweiterungen gibt. Inkompatible Erweiterungen müssen vor dem Shopware-Update unbedingt deaktiviert werden und sollten erst aktiviert werden, wenn eine kompatible Version veröffentlicht wurde.
Nachfolgend findest du eine Schritt-für-Schritt Anleitung für Shopware Updates. Grundsätzlich gibt es dabei vier mögliche Fälle:
Ist die aktuelle Version von ThemeWare® sowohl mit der aktuellen als auch mit der neuen Shopware Version kompatibel, kannst du Shopware problemlos updaten ().
Ist die aktuelle Version von ThemeWare® nicht mit der neuen Shopware Version kompatibel aber es gibt eine kompatible ThemeWare® Version für die aktuelle und die neue Shopware Version, aktualisiere vor dem Shopware-Update zuerst ThemeWare® ().
Ist die aktuelle Version von ThemeWare®
Diese vier Fälle berücksichtigt unsere nachfolgende Anleitung.
Wir empfehlen mit Shopware Updates – insbesondere bei Major-Releases von dem Update – nach Möglichkeit – ein paar Tage/Wochen mit dem Update zu warten.
Teste jedes Update vorab in einem Testsystem oder einer Staging-Umgebung und prüfe ob alles reibungslos funktioniert.
Erstelle zudem unbedingt ein vollständiges Backup deines Shops vor dem Shopware-Update.
Aktualisiere ThemeWare® und alle Erweiterungen (Plugins, Apps oder Themes) in deinem System auf die aktuellsten Versionen.
Prüfe ob es für alle Erweiterungen (Plugins, Apps oder Themes) bzw. Themes schon eine kompatible Version gibt.
Führe das Shopware-Update am besten nur dann durch, wenn du sichergestellt hast, das alle genutzten Erweiterungen in einer kompatiblen und fehlerfreien Version installiert sind.
Möchtest du das Shopware-Update durchführen, auch wenn nicht alle genutzten Erweiterungen kompatibel sind, lasse inkompatible Erweiterungen solange deaktiviert, bis du eine kompatible Version installieren konntest.
Kommen wir nun zum eigentlichen Update. Es gibt bei Shopware-Updates vier Möglichkeiten:
Optional: Weise das "Shopware default theme" deinem Verkaufskanal zu
Optional: Deaktiviere danach dein ThemeWare® Theme
Tipp: Leere einmal den gesamten Shopware-Cache
Weise das "Shopware default theme" deinem Verkaufskanal zu
Deaktiviere danach dein ThemeWare® Theme
Tipp: Leere einmal den gesamten Shopware-Cache
Weise das "Shopware default theme" deinem Verkaufskanal zu
Deaktiviere danach dein ThemeWare® Theme
Leere einmal den gesamten Shopware-Cache
Gibt es von ThemeWare® noch keine kompatible Version für den neuen Shopware Release, warte mit dem Shopware-Update bis dies der Fall ist.
Wenn du dennoch das Shopware-Update durchführen möchtest, lasse ThemeWare® (bzw. jede inkompatible Erweiterung) solange deaktiviert, bist du ein Update auf eine kompatible Version machen konntest.
Diese Meldung ist weitgehend selbsterklärend. Die betreffende Erweiterung ist nicht im Shopware Store verfügbar und kann daher nicht automatisch aktualisiert werden. Aktualisiere sie in diesem Fall manuell oder deaktiviere sie vor einem Shopware-Update, bis die Kompatibilität geprüft und sichergestellt wurde.
Hoffentlich hast du die Hinweise bezüglich der Erstellung eines Backups und dem Testen in einem Staging-System berücksichtigt und du kannst dein Backup wieder einspielen bzw. einen neuen Testlauf starten.
Falls dies nicht der Fall ist, deaktiviere die problematische Erweiterung und aktiviere diese erst wenn du die entsprechende Erweiterung auf eine kompatible Version updaten konntest (siehe ).
Ist die Administration aufgrund einer inkompatiblen Erweiterung nicht erreichbar, deaktiviere die entsprechende Erweiterung über die Datenbank (siehe ). Danach sollte die Administration wieder funktionieren.
Beachte bei Updates von ThemeWare® stets unseren Update-Leitfaden:
FAQ:
FAQ:
FAQ:
FAQ:
ThemeWare® CSS-Klassen für Erlebniswelten
In dieser Anleitung findest du, eine Übersicht über die ThemeWare® CSS-Klassen für Erlebniswelten.
Mit ThemeWare® stehen dir viele zusätzliche CSS-Klassen für Erlebniswelten zur Verfügung welche dir noch mehr Layout-Möglichkeiten bieten.
Diese CSS-Klassen können in den Erlebniswelten (Hauptnavigation "Inhalte" => "Erlebniswelten") über die Sektion- und Block-Einstellungen verwendet werden:
Block-Einstellungen im Erlebniswelt-Editor
Der der Übersichtlichkeit halber gibt es zu einigen Themen separate Artikel. Die Links findest du im entsprechenden Absatz.
Zusätzlich findest du zu allen Themen Anwendungsbeispiele in unseren Demoshops.
Tipp: Es ist möglich verschiedene Effekte zu kombinieren indem mehrere Klassen in einen Block angewendet werden.
Hinweis: Fehlt dir eine CSS-Klasse aktualisiere ThemeWare® auf die neuste Version.
ThemeWare® CMS-Styling
ThemeWare® nutzt ein vordefiniertes Styling für CMS-Blöcke. Durch diese sogenannte "ThemeWare® CMS-Styling" erhalten alle CMS-Blöcke in Erlebniswelten mit dem Größenmodus "Zentrierter Inhalt" (= boxed) ein Rahmenfarbe, eine Hintergrundfarbe und einen Außenabstand nach unten.
Dieses Styling lässt sich zum einen konfigurieren (ab Version 0.3.1), zum anderen kannst du das "ThemeWare® CMS-Styling" für verschiedene Seitentypen in der Konfiguration aktivieren bzw. deaktivieren.
Doch damit noch nicht genug: Es ist zudem möglich über CSS-Klassen das "ThemeWare® CMS-Styling" für bestimmte Blöcke zu nutzen oder gezielt nicht zu benutzen. Dafür stehen dir die folgenden Klassen zur Verfügung:
Beispiel
Mehr Informationen dazu findest du in unserem Artikel:
Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände von CMS-Sektionen/-Blöcken zu definieren.
Die Abstandsklassen werden nach dem folgenden Muster benannt:
Mehr Informationen dazu findest du in folgendem Artikel:
Da die CSS-Klasse container nicht in jedem Szenario die perfekte Lösung ist, gibt es seit ThemeWare® 1.1.3 neue CSS-Boxed-Klassen um CMS-Blöcke oder CMS-Sektionen in Erlebniswelten "boxed" zu gestalten.
Mehr Informationen dazu findest du in unserem Artikel:
ThemeWare® bietet dir diverse CSS-Dekorationsklassen für Bilder in CMS-Blöcken zur Verfügung. Mit diesen CSS-Klassen kannst du Bilder mit Rahmen oder Schatten dekorieren oder die Bilder abrunden.
Beispiel
Mehr Informationen dazu findest du in unserem Artikel:
Mit ThemeWare® erhältst du eine große Auswahl an CSS-Hover-Klassen, welche dir verschiedenste Hover-Effekte für Bilder in CMS-Blöcken ermöglichen.
Beispiel
Mehr Informationen dazu findest du in unserem Artikel:
ThemeWare® bietet dir verschiedene CSS-"max-width"-Klassen um die maximale Breite von CMS-Sektionen/-Blöcken zu definieren.
Mehr Informationen dazu findest du in unserem Artikel:
ThemeWare® bietet dir eine umfangreiche Auswahl an CSS-Animationen für deine Erlebniswelten. Nutze dafür die entsprechende CSS-Klasse an CMS-Blöcken oder gewünschten HTML-Elementen.
CSS-Klasse
Bereich
Funktionsbeschreibung
Mehr Informationen dazu findest du in unserem Artikel:
Ergänzend liefert dir ThemeWare® eine Sammlung an CSS-Klassen für Animationen für erfahrende Anwender.
Mehr Informationen dazu findest du in folgendem Artikel:
ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Column-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst.
Beispiel
Mehr Informationen dazu findest du in unserem Artikel:
Mit ThemeWare® erhältst du individuelle CSS-Headline-Klassen um die aus unseren Shopware 5 Themes bekannten Überschriften auch in deinen Shopware 6 Erlebniswelten nutzen zu können.
Beispiel
Mehr Informationen dazu findest du in unserem Artikel:
Für die Erlebniswelten der Startseiten unserer Demoshops nutzen wir teils individuelle CSS-Klassen um bestimmte Layouts zu ermöglichen. In diesem Abschnitt stellen wir dir diese Klasse vor.
CSS-Klasse
Bereich
Funktionsbeschreibung
Dieser Overlay-Banner ist mit den Standard CMS-Elementen von Shopware möglich und braucht kein spezielles CMS-Element.
CSS-Klasse
Bereich
Funktionsbeschreibung
Beispiel
In diesem Abschnitt findest du weitere Klassen die bei der Gestaltung deiner individuellen Erlebniswelten hilfreich sein können.
CSS-Klasse
Bereich
Funktionsbeschreibung
Beispiele
s => Start (links)
x => End/Start (links und rechts)
y => Top/Bottom (oben und unten)
Keine Angabe => für alle vier Seiten
xl => ab 1200px
Keine Angabe => ab 0px
3 => 30 Pixel
4 => 40 Pixel
5 => 50 Pixel
6 => 60 Pixel
7 => 70 Pixel
8 => 80 Pixel
9 => 90 Pixel
auto
l => Left (links)
x => Left/Right (links und rechts)
y => Top/Bottom (oben und unten)
Keine Angabe => für alle vier Seiten
xl => ab 1200px
Keine Angabe => ab 0px
3 => 30 Pixel
4 => 40 Pixel
5 => 50 Pixel
6 => 60 Pixel
7 => 70 Pixel
8 => 80 Pixel
9 => 90 Pixel
auto
nicht
mit der neuen Shopware Version kompatibel aber es gibt eine
kompatible Version für die neue Shopware Version
, deaktiviere ThemeWare®, aktualisiere erst Shopware und dann ThemeWare® (
).
Ist die aktuelle Version von ThemeWare® nicht mit der neuen Shopware Version kompatibel und gibt es derzeit keine kompatible ThemeWare® Version, deaktiviere ThemeWare®, führe das Shopware-Update aus und aktiviere ThemeWare® erst wieder nachdem du es aktualisieren konntest (D).
Optional: Führe ein ThemeWare® Update aus
Führe das Shopware-Update aus
Wichtig: Nur wenn wirklich alle Erweiterungen "Bereits kompatibel" sind!
Optional: Aktiviere ThemeWare® nun wieder
Tipp: Leere einmal den gesamten Shopware-Cache
Optional: Weise ThemeWare® zum Abschluss deinem Verkaufskanal zu
Leere einmal den gesamten Shopware-Cache und lade die Administration neu
Hinweis: Mehr Informationen zum Thema "Shopware Kompatibilität" findest du in unserem Artikel Shopware Kompatibilität.
Tipp: Mehr Informationen über mögliche Inkompatibilitäten oder Hinweise zu Updates findest du im Bereich Neuigkeiten und Ankündigungen in unserem Service Portal.
Wichtig: Nutze stets die Update-Funktion der Erweiterungsverwaltung und installiere Erweiterungen nicht manuell um zu vermeiden, dass du eine inkompatible Erweiterung installierst.
Shopware-Update
Hinweis: Das "Deaktivieren" von Erweiterungen (Plugins, Apps oder Themes) löscht keine Daten. (Stand: Shopware 6.6)
Schritt-für-Schritt Anleitung:
Tipp: Das meiste in dieser Anleitung gilt so übrigens für alle Erweiterungen (Plugins, Apps oder Themes), wir beziehen uns aber der Einfachheit halber auf ThemeWare®.
1) Vorbereitung
Tipp: Warte besonders bei Major-Releases von Shopware ein paar Tage/Wochen mit dem Shopware-Update.
Tipp: Erstelle vor dem Shopware-Update ein vollständiges Backup deines Shops und teste das Update vorab in einem Test- bzw. Staging-System.
Wichtig: Aktualisiere vor jedem Shopware-Update alle Erweiterungen (Plugins, Apps oder Themes) in deinem System.
Tipp: Wenn du sicher gehen möchtest ob eine Erweiterung bereits kompatible ist, kannst du auf der Store-Seite der entsprechenden Erweiterung im Shopware Store prüfen, welche Versionen aktuell unterstützt werden.
Wichtig: Deaktiviere am besten alle Erweiterungen vor dem Shopware-Update und aktiviere diese erst, wenn diese in einer kompatiblen Version installiert sind.
ThemeWare® ist bereits mit der aktuellen als auch mit der neuen Shopware Version kompatibel:
Hinweis: Konntest du ThemeWare® nicht auf die neuste Version aktualisieren, schaue einmal in den Artikel ThemeWare® Update nicht verfügbar.
B. Jetzt verfügbar
Eine kompatible ThemeWare® Version ist vor dem Shopware-Update verfügbar:
Hinweis: Konntest du ThemeWare® nicht auf die neuste Version aktualisieren, schaue einmal in den Artikel ThemeWare® Update nicht verfügbar.
C. Mit der neuen Shopware Version
Eine kompatible ThemeWare® Version ist nach dem Shopware-Update verfügbar:
Achtung: Aktiviere keine inkompatible Version einer Erweiterung in deinem Shopware-Shop!
In diesem Szenario ist die alte ThemeWare® Version nicht mit der neuen Shopware Version und die neue ThemeWare® Version nicht mit der alten Shopware Version kompatibel.
Hinweis: Konntest du ThemeWare® nicht auf die neuste Version aktualisieren, schaue einmal in den Artikel ThemeWare® Update nicht verfügbar.
D. Nicht kompatibel
Eine kompatible ThemeWare® Version für die neue Shopware Version ist noch NICHT verfügbar:
Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" mit einem Bild links und weiteren Textinformationen rechts. Optimal zur Anzeige eines Ansprechpartners. Zusätzlich kann die Klasse "dark" verwendet werden damit der Hintergrund in einer sehr dunklen Erlebniswelt in hell angezeigt wird.
twt-custom-cms-element-overlay-success
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-info
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-warning
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-danger
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-light
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-dark
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
// Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Größe} // für xs
// Erweiterte Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl
twt-cms-animation
Block
Animiert einen CMS-Block und HTML-Elemente mit einer in der Theme-Konfiguration ausgewählten Animation sobald das Element in den sichtbaren Bereich gescrollt wird.
twt-custom-cms-text-two-column-usp-list
Block
Hebt eine Liste mit Vorteilen im rechten Block eines "Zwei Spalten Elements" mit grünen Harken hervor.
twt-custom-cms-imagetext-teaser-1
Sektion
Verbesserte Darstellung und Textausrichtung für ein "Zwei Spalten Element" (Bild links und Text rechts) im Sektions-Größenmodus "Volle Bereite". Optimal zur Anzeige eines Teasers/Banners.
twt-custom-cms-element-overlay-primary
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-secondary
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
container
Block, Sektion
In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops.
Tipp: Je nach Theme kannst du die CSS-Klasse "twt-custom-cms-element-overlay-primary" druch "twt-custom-cms-element-overlay-secondary" in der Sektion ersetzen.
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: Kategorie-Text
Konfiguriere nun das Element in diesem Block.
Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
Wähle im Dropdown die Option "category.name" aus
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: Kategorie-Beschreibung
Konfiguriere nun das Element in diesem Block.
Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
Wähle im Dropdown die Option "category.description" aus
Um das Listing jetzt etwas über den Banner zu verschieben konfiguriere nun die Sektion mit dem Listing-Element.
CSS-Klassen: twt-mt-n9 position-relative
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Konfiguriere nun die neue Sektion für das Banner-Element.
Sektionsname: Highlights-Slider
CSS-Klassen: twt-mt-n7 twt-pt-9 bg-primary
Größenmodus: Zentrierter Inhalt
Tipp: Je nach Theme kannst du die CSS-Klasse "bg-primary" druch "bg-secondary" in der Sektion ersetzen.
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die
folgenden Einstellungen:
Konfiguriere nun das Element in diesem Block.
Füge über den Text-Editor deine gewünschte Überschrift (z.B. "Aktuelle Highlights") hinzu.
Wähle eine zentrierte Textausrichtung
Wähle als Block-Kategorie "Commerce" und füge dann den Block mit dem Namen "Produkt-Slider" per Drag & Drop zur neuen Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die
folgenden Einstellungen:
Konfiguriere nun das Element in diesem Block.
Produkt-Zuweisung: Manuell
Produkte: Selektiere hier die gewünschten Produkte
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Konfiguriere nun die neue Sektion für das Banner-Element.
Sektionsname: SEO-Text
Größenmodus: Zentrierter Inhalt
Hintergrundfarbe: #fff
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: SEO-Text
Konfiguriere nun das Element in diesem Block.
Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur bestehenden Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Allgemein
Konfiguriere nun jedes einzelne Element in diesem Block.
Füge über den Text-Editor den Text Navigation hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur bestehenden Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Allgemein
Konfiguriere nun das Element in diesem Block.
Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Wähle als Block-Kategorie "Text & Bild" und füge dann den Block mit dem Namen "Zwei Spalten, zentriertes Bild & Text" per Drag & Drop zur bestehenden Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Allgemein
Konfiguriere nun jedes einzelne Element in diesem Block.
Element links, Bild
Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
Wähle im Dropdown die Option "category.media" aus
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
Nun werden automatisch das einer Kategorie zugewiesene Anzeigebild und die entsprechende Beschreibung in das CMS-Element geladen.
Wechsel über die Hauptnavigation in den Bereich "Inhalte" => "Erlebniswelten".
Wähle die Landingpage der entsprechenden Kategorie aus und bearbeite diese.
Füge oberhalb der bestehenden Sektion eine neue Sektion "Volle Breite" ein.
Konfiguriere nun die neue Sektion für das Banner-Element.
Sektionsname: SEO-Text
Größenmodus: Zentrierter Inhalt
Wähle als Block-Kategorie "Text" und füge dann den Block mit dem Namen "Text" per Drag & Drop zur neuen Sektion hinzu.
Klicke nun den soeben hinzugefügten Block an, sodass sich rechts die Block-Einstellungen öffnen. Mache hier die folgenden Einstellungen:
Block-Name: SEO-Text
Konfiguriere nun das Element in diesem Block.
Füge über den Text-Editor deinen gewünschten SEO-Text für die entsprechende Kategorie hinzu.
Speicher zum Abschluss deine Änderungen der Erlebniswelt und weise diese ggf. der/den gewünschten Kategorie(n) zu.
[Tags: Nachbau]
Konfiguration
Die ThemeWare® Demoshops präsentieren dir alle ThemeWare® Themes Live und in Farbe. Du wirst unter Umständen feststellen, dass es in den Demos in manchen Punkten von deinem frisch installierten Theme abweichen. In diesem Artikel erfährst du, welche Unterschiede es gibt und warum bestimmte Abweichungen normal sind – da neue Funktionen in bestehenden Kundenshops nicht automatisch aktiviert werden, in unseren Demos aber präsentiert werden sollen.
Ja. Diese betreffen hauptsächlich die ThemeWare®-Konfiguration. Du kannst sie aber problemlos in dein ThemeWare®-Theme übernehmen.
Mit ThemeWare® profitierst du von extrem regelmäßigen Updates mit neuen Features und Konfigurationsmöglichkeiten. Um sicherzustellen, dass neue Funktionen keinen unerwünschten Einfluss auf bestehende ThemeWare® Kunden-Shops haben, sind diese bei der Veröffentlichung standardmäßig deaktiviert.
Unsere Demoshops basieren vollständig auf ThemeWare® und dienen dazu, dir die neuesten Features anschaulich zu präsentieren. Daher weichen sie mit der Zeit etwas von der Standard-Konfiguration ab. Keine Sorge: Alles, was wir in den Demoshops zeigen, kannst du mit wenigen Klicks auch in deinem eigenen Theme aktivieren. So hast du die volle Kontrolle und kannst selbst entscheiden, welche Neuerungen du nutzen möchtest und welche nicht.
Erlebniswelten mit Bootstrap CSS-Klassen gestalten
In dieser Anleitung erfährst du, wie du Erlebniswelten mit Bootstrap CSS-Klassen gestalten kannst.
Die Shopware 6 Storefront basiert auf dem Bootstrap-Framework. Aufgrund unserer HC-Architecture® ist ThemeWare® selbstverständlich ebenfalls vollständig kompatibel mit Bootstrap.
Auf dieser Seite findest du die gängigsten Bootstrap-Klassen welche du auf CMS-Blöcke in deinen Erlebniswelten anwenden kannst. Ganz ohne Programmierkenntnisse!
Klicke auf den link "Datenzuordnung" oben rechts über dem Bildupload-Feld
Wähle im Dropdown die Option "category.description" aus
Highlights-Slider
CMS-Element mit individuellem SEO-Text
Headline über Sidebar-Navigation
CMS-Element mit individuellem SEO-Text
CMS-Element mit Kategorie Text und Bild
CMS-Element mit individuellem SEO-Text
Schritt 1.1: Einstellungen der Sektion
Hinweis: Die Textfarbe wird mit der SCSS-Funktion color-contrast automatisch anhand der Hintergrundfarbe generiert. Ist das Ergebnis nicht ideal, ändere die Textfarbe einfach manuell.
: ThemeWare® installiert weder Produkte noch Kategorien oder Erlebniswelten in deinem Shop, damit bereits bestehende Daten nicht beeinträchtigt werden. Du kannst Demodaten aber mit den kostenfreien Demodaten-Plugins von Shopware oder von ThemeWare® bei Bedarf ganz einfach importieren.
Pro- und Cloud-Edition: Bitte beachte, dass es technisch bedingt Unterschiede zwischen der Pro-Edition und der Cloud-Edition gibt. Diese betreffen ausschließlich den Bereich "CMS-Elemente" (= Erlebniswelten). Unsere Demoshops basieren auf der Pro-Edition und zeigen daher den vollen Funktionsumfang von ThemeWare®. Mehr Informationen dazu findest du hier.
Nachfolgend zeigen wir dir, welche Konfigurationen wir in den Demos vorgenommen haben und wo du sie findest.
Im Header haben wir die Schriftgröße im Flyout der Top-Navigation etwas reduziert.
Tab "Header"
Bereich "Top-Navigation Flyout"
Abschnitt "Level 2"
Schriftgröße: 15
Abschnitt "Level 3 ..."
Schriftgröße: 15
In unseren Demoshops blenden wir die Standard-Breadcrumb aus und nutzen bei Bedarf die ThemeWare® CMS-Breadcrumb der Pro-Edition oder die Breadcrumb der ThemeWare® Hero-Sektion.
Darüber hinaus haben wir die Lagerbestand-Badge etwas umkonfiguriert.
Tab "Inhalt"
Bereich "Breadcrumb"
Breadcrumb anzeigen (Startseite): nicht anzeigen
Breadcrumb anzeigen (CMS-Shopseiten): nicht anzeigen
Breadcrumb anzeigen (CMS-Landingpages): nicht anzeigen
Breadcrumb anzeigen (CMS-Kategorieseiten): nicht anzeigen
Breadcrumb anzeigen (CMS-Produktseite): nicht anzeigen
Tab "Inhalt"
Bereich "Produkt-Badges"
Abschnitt "Badge: Lagerbestand-Badge"
Schwellwert (hoher Bestand): 1000
Abschnitt "Badge: Rabatt-Badge"
Layout: -25 %
Im Bereich "Erlebniswelten" nutzen wir die ThemeWare® CSS-Scroll-Animationen und blenden die Filter-Überschrift in der Sidebar ein.
Tab "Erlebniswelten"
Bereich "Alle Typen (Shopseiten, Landingpages, Kategorieseiten, Produktseiten)"
Abschnitt "CSS-Scroll-Animationen"
CSS-Scroll-Animation (CMS-Blöcke): fade in
CSS-Scroll-Animation (Überschriften in CMS-Blöcken): keine
Tab "Erlebniswelten"
Bereich "Produkt-Filter (Kategorie "Sidebar")"
Abschnitt "Headline (in der Sidebar)"
Filter-Überschrift anzeigen: anzeigen
Auf Kategorieseiten haben wir die Produkt-Boxen um konfiguriert und nutzen das "Hover-Bild"-Feature von ThemeWare®.
Tab "Kategorieseiten"
Bereich "Produkt-Box"
Abschnitt "Inhalte"
Variantenmerkmale anzeigen: nicht anzeigen
Produktnummer anzeigen: je Layout-Typ
Hersteller anzeigen: je Layout-Typ
Preiseinheit anzeigen: nicht anzeigen
Kurzbeschreibung verwenden: verwenden
Abschnitt "Basiskonfiguration"
Hover-Effekt (Kaufen-Button / Details-Button): slide up
Abschnitt "Produktbild"
Hover-Effekt: Bilder überblenden (Zusatzfeld)
Abschnitt "Produkt-Bewertung"
Produkt-Bewertung anzeigen: Produkt-Bewertung immer anzeigen
Abschnitt "Layout- und Responsive-Verbesserungen"
Kompakte Produkt-Boxen: ja
Tab "Kategorieseiten"
Bereich "Produkt-Box (Layout-Typ "Standard")"
Abschnitt "Inhalte"
Produktnummer anzeigen: anzeigen
Hersteller anzeigen: anzeigen
Auf Produktseiten haben wir die vielen neuen und verkaufsfördernden Funktionen von ThemeWare® aktiviert.
Zum Ausrichten von Texten liefert dir Bootstrap bereits einige CSS-Klassen welche du nutzen kannst.
CSS-Klassen
Klasse v5
Klasse v4
Bereich
Funktionsbeschreibung
text-start
text-left
Block
Text linksbündig ausrichten.
text-center
Beispiele
Mehr dazu findest du in der Bootstrap Dokumentation: Text alignment.
Zum Einfärben von Texten liefert Bootstrap bereits einige Klassen für verschiedene Farben mit. Nachfolgend findest du Beispiele für die verfügbaren Farb-Varianten.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
text-primary
Block
Text in der Primärfarbe ausgeben.
text-secondary
Block
Beispiele
Mehr dazu findest du in der Bootstrap Dokumentation: Colors.
Das Bootstrap-Framework liefert dir auch Klassen zum einfärben von Hintergründen von Erlebniswelt-Elementen in verschiedenen Farben mit. Für dunkle Hintergründe empfiehlt es sich eine helle Textfarbe zu wählen (siehe oben).
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
bg-primary
Block
Hintergrund mit der Primärfarbe darstellen.
bg-secondary
Block
Beispiele
Mehr dazu findest du in der Bootstrap Dokumentation: Background.
Über Bootstrap-Klassen können auch die Rahmen von CMS-Blöcken definiert werden. Die Klasse "border-0" entfernt beispielsweise Rahmen von Elementen.
CSS-Klassen
Klasse v5
Klasse v4
Bereich
Funktionsbeschreibung
border
border
Block
Rahmen hinzufügen.
border-top
Mehr dazu findest du in der Bootstrap Dokumentation: Borders.
Ändere die Rahmenfarbe von CMS-Blöcken mithilfe von folgenden CSS-Klassen.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
border-primary
Block
Rahmen mit der Primärfarbe darstellen.
border-secondary
Block
Rahmen mit der Sekundärfarbe darstellen.
Beispiele
Mehr dazu findest du in der Bootstrap Dokumentation: Borders > Color.
Füge einem CMS-Block die nachfolgenden CSS-Klassen hinzu, um dessen Ecken einfach abzurunden.
CSS-Klassen
Klasse v5
Klasse v4
Bereich
Funktionsbeschreibung
rounded
rounded
Block
Element abrunden.
rounded-top
Beispiel
Mehr dazu findest du in der Bootstrap Dokumentation: Borders > Radius.
Hinzufügen oder entfernen von Schatten zu CMS-Blöcken.
CSS-Klassen
Klasse
Bereich
Funktionsbeschreibung
shadow-sm
Block
Kleiner Schlagschatten.
shadow
Block
Beispiele
Mehr dazu findest du in der Bootstrap Dokumentation: Shadows.
Shopware hat mit Version 6.6.0 !important Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe NEXT-29246). Dadurch werden nun einige in Bootstrap verfügbare CSS-Klassen aufgrund der entsprechenden CSS-Hierarchie vom CMS-Styling überschrieben.
Möchtest du Bootstrap CSS-Klassen auf CMS-Blöcke anwenden, beachte bitte, dass das ThemeWare® CMS-Styling den Rahmen (border, border-radius), die Hintergrundfarbe (background-color) und den Außenabstand nach unten (margin-bottom) überschreibt.
Entferne daher das CMS-Styling für den entsprechenden CMS-Block mit der CSS-Klasse twt-cms-block-reset, damit die Bootstrap-Klassen wirken.
Hinweis: Shopware hat mit Version 6.6.0 !important Anweisungen für Bootstrap-Helfer-Klassen entfernt (siehe NEXT-29246). Dadurch überschreiben diese Klassen nicht mehr wie vorher jede vorgegebene Formatierungen.
Shopware 6.4
Shopware 6.5
Tipp: Anwendungsbeispiele findest du in unseren Demoshops auf den Seiten "".
Textausrichtung
Textfarbe
Hintergrundfarbe
Rahmen (additiv)
Hinweis: Bitte beachte, dass das "ThemeWare® CMS-Styling" bereits einen Rahmen darstellt und additive CSS-Klassen dann keine Auswirkung haben. Additive CSS-Klassen sind für Erlebniswelten ohne "ThemeWare® CMS-Styling" relevant.
Rahmen (subtraktiv)
Rahmenfarbe
Border-radius
Schatten
Besonderheit: CMS-Blöcke mit ThemeWare® CMS-Styling
Weiterführende Informationen
Breite anzeigen: anzeigen
Höhe anzeigen: anzeigen
Maximale Bestellmenge anzeigen: anzeigen
Zusatzfeld 3 anzeigen: anzeigen
WhatsApp-Link anzeigen: anzeigen
X-Link anzeigen: ja
text-center
Block
Text zentriert ausrichten.
text-end
text-right
Block
Text rechts ausrichten.
Text in der Sekundärfarbe ausgeben.
text-success
Block
Text in der Farbe "Erfolg" ausgeben.
text-danger
Block
Text in der Farbe "Fehler" ausgeben.
text-warning
Block
Text in der Farbe "Hinweis" ausgeben.
text-info
Block
Text in der Farbe "Information" ausgeben.
text-white
Block
Text in der Farbe "Weiß" ausgeben.
Hintergrund mit der Sekundärfarbe darstellen.
bg-success
Block
Hintergrund mit der Farbe "Erfolg" darstellen.
bg-danger
Block
Hintergrund mit der Farbe "Fehler" darstellen.
bg-warning
Block
Hintergrund mit der Farbe "Hinweis" darstellen.
bg-info
Block
Hintergrund mit der Farbe "Information" darstellen.
ThemeWare® CSS-Klassen für Erlebniswelten (Übersicht)
Animationen – CSS-Animationen für CMS-Blöcke
Klasse
Bereich
Beschreibung
twt-cms-animation
Block
Aktiviert die konfigurierte CSS-Animation für den entsprechenden CMS-Block.
Boxed-Klassen – CSS-Klassen für Fullwidth-Sektionen
Klasse
Bereich
Beschreibung
CSS-Klasse
Bereich
Funktionsbeschreibung
CSS-Klasse
Bereich
Beschreibung
CSS-Klasse
Bereich
Beschreibung
Klasse
Bereich
Funktionsbeschreibung
CSS-Klasse
Bereich
Beschreibung
Klasse
Bereich
Funktionsbeschreibung
Klasse
Bereich
Funktionsbeschreibung
Klasse
Bereich
Beschreibung
Klasse
Bereich
Beschreibung
Die Overlay-Klassen funktionieren mit Standard CMS-Blöcken von Shopware. Nutzt du diese Klassen in einer CMS-Sektion wird der Hintergrund von einer Farbfläche überlagert.
CSS-Klasse
Bereich
Funktionsbeschreibung
CSS-Klasse
Bereich
Funktionsbeschreibung
twt-cms-block-border
Block
Der entsprechende CMS-Block erhält die Rahmenfarbe vom vordefinierten Styling.
twt-cms-block-margin
Block
Der entsprechende CMS-Block erhält den Außenabstand nach unten vom vordefinierten Styling.
twt-cms-block-reset
Block
Das vordefinierte Styling wird auf den entsprechenden CMS-Block nicht angewendet (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten).
twt-cms-block-reset-background
Block
Die Hintergrundfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-block-reset-border
Block
Die Rahmenfarbe vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-block-reset-margin
Block
Der Außenabstand nach unten vom vordefinierten Styling wird im entsprechenden CMS-Block entfernt.
twt-cms-reset-padding
Section
Diese Klasse entfernt doppelte Paddings in Layouts mit Sidebar.
twt-cms-col-padding-10
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel.
twt-cms-col-padding-15
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel.
-
-
20 Pixel ist der Standard Spalten-Abstand.
twt-cms-col-padding-25
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel.
twt-cms-col-padding-30
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel.
twt-cms-col-padding-35
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel.
twt-cms-col-padding-40
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 40 Pixel.
twt-cms-col-margin-10
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel.
twt-cms-col-margin-15
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel.
twt-cms-col-margin-20
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel.
twt-cms-col-margin-25
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel.
twt-cms-col-margin-30
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel.
twt-cms-col-margin-35
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel.
twt-cms-col-margin-40
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel.
twt-cms-col-margin-45
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel.
twt-cms-col-margin-50
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel.
twt-cms-col-margin-55
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel.
twt-cms-col-margin-60
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel.
twt-cms-col-margin-65
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel.
twt-cms-col-margin-70
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel.
twt-cms-col-margin-75
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel.
twt-cms-col-margin-80
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 Pixel.
twt-cms-grid-gap-10
Block
Setzt den Abstand in CMS-Blöcken auf 10 Pixel.
twt-cms-grid-gap-15
Block
Setzt den Abstand in CMS-Blöcken auf 15 Pixel.
twt-cms-grid-gap-20
Block
Setzt den Abstand in CMS-Blöcken auf 20 Pixel.
twt-cms-grid-gap-25
Block
Setzt den Abstand in CMS-Blöcken auf 25 Pixel.
twt-cms-grid-gap-30
Block
Setzt den Abstand in CMS-Blöcken auf 30 Pixel.
twt-cms-grid-gap-35
Block
Setzt den Abstand in CMS-Blöcken auf 35 Pixel.
twt-cms-grid-gap-40
Block
Setzt den Abstand in CMS-Blöcken auf 40 Pixel.
twt-cms-grid-gap-45
Block
Setzt den Abstand in CMS-Blöcken auf 45 Pixel.
twt-cms-grid-gap-50
Block
Setzt den Abstand in CMS-Blöcken auf 50 Pixel.
twt-cms-headline-clean
Block
Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Clean-Theme.
twt-cms-headline-flower
Block
Stylt die Headline in CMS-Blöcken wie im Flower-Theme.
twt-cms-headline-kids
Block
Stylt die Headline in CMS-Blöcken wie im Kids-Theme.
twt-cms-headline-ladieswear
Block
Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken wie im Ladieswear-Theme.
twt-cms-headline-plants
Block
Stylt die Headline in CMS-Blöcken wie im Ladieswear-Theme.
twt-cms-image-box-shadow
Block
Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-1
Block
Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-2
Block
Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-3
Block
Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-4
Block
Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-level-5
Block
Fügt Bildern in einem CMS-Block einen Schlagschatten hinzu.
twt-cms-image-box-shadow-lg
Block
Fügt Bildern in einem CMS-Block einen auffälligen Schlagschatten hinzu.
twt-cms-image-box-shadow-sm
Block
Fügt Bildern in einem CMS-Block einen dezenten Schlagschatten hinzu.
twt-cms-image-rounded
Block
Rundet Bilder in einem CMS-Block ab.
twt-cms-image-hover-flash
Block
Lässt Bilder mit einem Link aufblitzen (Hover-Effekt).
twt-cms-image-hover-grayscale
Block
Graut Bilder mit einem Link aus (Hover-Effekt).
twt-cms-image-hover-grayscale-out
Block
Färbt graue Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-opacity
Block
Reduziert die Deckkraft für Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate-left
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-rotate-right
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-shine
Block
Ein Highlight fährt über Bilder mit einem Link (Hover-Effekt).
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Erfolg" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-info
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Information" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-warning
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Hinweis" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-danger
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Status-Farbe "Fehler" (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-light
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Farbe Weiß (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-dark
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Farbe Schwarz (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-cms-block-boxed
Block
Setzt einen Block auf die maximale Container-Breite der Theme-Konfiguration (abzüglich 40px).
twt-cms-boxed-content
Sektion
Setzt eine Sektion auf die maximale Container-Breite der Theme-Konfiguration.
twt-cms-block
Block
Der entsprechende CMS-Block erhält vordefiniertes Styling (Rahmenfarbe, Hintergrundfarbe, Außenabstand nach unten).
twt-cms-block-background
Block
Der entsprechende CMS-Block erhält die Hintergrundfarbe vom vordefinierten Styling.
twt-cms-col-padding-0
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel.
twt-cms-col-padding-5
Block
Setzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel.
-
-
0 Pixel ist der Standard Spalten-Abstand.
twt-cms-col-margin-5
Block
Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel.
twt-cms-grid-gap-0
Block
Setzt den Abstand in CMS-Blöcken auf 0 Pixel.
twt-cms-grid-gap-5
Block
Setzt den Abstand in CMS-Blöcken auf 5 Pixel.
twt-cms-headline-bath
Block
Stylt die Headline und den nachfolgenden Absatz in CMS-Blöcken für verschiedene Themes.
twt-cms-headline-classic
Block
Stylt die Headline in CMS-Blöcken wie in Shopware 5 Einkaufswelten.
twt-cms-image-border
Block
Fügt Bildern in einem CMS-Block einen 12px dicken Rahmen hinzu.
twt-cms-image-border-semi
Block
Fügt Bildern in einem CMS-Block einen 12px dicken, halbtransparenten Rahmen hinzu.
twt-cms-image-hover-blur
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-image-hover-blur-out
Block
Dreht Bilder mit einem Link (Hover-Effekt).
twt-cms-max-width
Sektion, Block
Setzt die maximale Breite auf die "maximale Container-Breite" der Theme-Konfiguration.
twt-cms-max-width-500
Sektion, Block
Setzt die maximale Breite auf 500px.
twt-m-1
Sektion, Block
Außenabstand, 10px (margin)
twt-mt-2
Sektion, Block
Außenabstand oben, 20px (margin-top)
twt-custom-cms-element-overlay-primary
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Primärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
twt-custom-cms-element-overlay-secondary
Sektion
Überlagert das Hintergrundbild einer Sektion mit der Sekundärfarbe (Deckkraft 85%). Optimal zur Anzeige von Textinformationen auf einem Hintergrundbild.
container
Block, Sektion
In Erlebniswelt-Sektionen mit dem Layout "Volle Breite" ist es in manchen Fällen sinnvoll einen Inhalts-Block im "Boxed"-Layout zu platzieren. Dies kannst du mit der Klasse "container" realisieren. Ein Beispiel dafür ist der Kategorie-Banner in der Kategorie "Höhenluft & Abenteuer" unserer Demoshops.
ThemeWare® CMS-Styling
Column-Klassen – Spaltenabstände in CMS-Blöcken
Mobile Darstellung
Gap-Klassen – Abstände in CMS-Blöcken
Headline-Klassen – Überschriften in CMS-Text-Blöcken
Image-Klassen – Dekorationsklassen für Bilder
Hover-Klassen – Hover-Effekte für Bilder
Max-width-Klassen – Breite von CMS-Sektionen/-Blöcken
Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke
