Verschachtelte Unterkategorien ist ein CMS-Element für Kategorie- und Landingpages. Es zeigt mehrere Unterkategorien gemeinsam mit ihren direkten Unter-Unterkategorien an – wahlweise im Karten- oder Clean-Layout.
Die ausführliche Beschreibung mit allen Konfigurationsmöglichkeiten findest du im CMS-Bereich:
In diesem Bereich erfährst du welche Elemente – je nach Konfiguration – in der Shopware Storefront angezeigt werden damit du in der Theme-Konfiguration schneller die entsprechenden Konfigurationen finden kannst.
Bei der Suche nach Konfigurationsfeldern kannst du damit noch einfacher unseren ThemeWare® Config-Finder nutzen. Ergänzend dazu empfehlen wir dir auch unser ThemeWare® Lexikon in der ThemeWare® Wissensdatenbank.
Im News-Tab findest du aktuelle Neuigkeiten, Updates und Ankündigungen rund um ThemeWare®. Die Beiträge werden bei jedem Aufruf direkt aus dem ThemeWare® Service-Portal (via RSS-Feed) geladen.
Neuigkeiten und Ankündigungen
Grid 'Two'
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Two'
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Grid 'Five'
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Five'
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Willkommen
Willkommen im ThemeWare® Handbuch 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
Footer
ThemeWare® USP-Bar
ThemeWare® Oberer Bereich
ThemeWare® Mittlerer Bereich
ThemeWare® Hub
Der ThemeWare® Hub integriert die Vorteile und Funktionen des ThemeWare® Service-Portals direkt in deine Administration – genau dorthin, wo du sie brauchst.
Der Hub bündelt alle Funktionen in eigenen Tabs:
Dashboard — Überblick, Einrichtungs-Assistent und Schnellzugriffe
Add-ons — optionale Funktionen freischalten
Dashboard
Das ThemeWare® Dashboard bietet dir alle wichtigen Informationen, Einrichtungshilfen und Schnellzugriffe auf einen Blick.
Über die Kachel-Leiste springst du direkt zu den wichtigsten Bereichen und Ressourcen:
Wissensdatenbank — Anleitungen, Tutorials und Profi-Wissen
ThemeWare® Utilities — kostenlose Extras (öffnet den )
Add-ons
Im Add-ons-Tab im ThemeWare® Hub findest du alle verfügbaren Erweiterungen für dein ThemeWare® Theme. Jedes Add-on lässt sich einzeln freischalten und unabhängig von den anderen verwalten.
Eine ausführliche Beschreibung der einzelnen Add-ons findest du in der .
Wir behalten den Theme-Preis bewusst stabil und entwickeln das Theme kontinuierlich mit neuen Funktionen weiter. Features, die deutlich über den klassischen Theme-Umfang hinausgehen, bieten wir als optionale Add-ons an — so kannst du sie freischalten, wenn du sie brauchst, und die Wahl bleibt bei dir, ohne dass alle Käufer den erweiterten Funktionsumfang mittragen müssen.
Im Add-ons-Tab das gewünschte Add-on suchen.
Utilities
Die ThemeWare® Utilities sind ein kostenloses Paket mit Extras für Design, Individualisierung und Conversion. Du forderst es einmalig per Formular an und erhältst sofort Zugang zu allen Ressourcen.
Im Formular deine E-Mail-Adresse eintragen.
Deine Shopware-6-Version wählen (Self-hosted oder Cloud).
Backup
Überblick über alle Themes deiner ThemeWare®-Familie: Verkaufskanal-Zuweisung sehen, das passende Theme konfigurieren und die Konfiguration sichern.
Im Backup-Tab erhältst du einen Überblick über alle Themes deiner ThemeWare®-Familie (Basis-Theme + Duplikate) – inklusive Verkaufskanal-Zuweisung, direktem Sprung in die Konfiguration und natürlich der Sicherung der Theme-Konfiguration.
Jede Theme-Zeile zeigt, welchem Verkaufskanal das Theme zugewiesen ist (oder dass es noch keinem zugewiesen ist). Über "Konfigurieren" springst du direkt in den Theme-Manager genau dieses Themes – bei Duplikaten also gezielt in das Theme, das im jeweiligen Verkaufskanal live ist.
Mit der praktischen "Kopieren"-Funktion sicherst du die Konfiguration eines Themes mit nur einem Klick und erleichterst dir manuelle Backups deutlich. Aufklappen, JSON kopieren, fertig.
Schritt für Schritt:
Changelog
Im Changelog-Tab verfolgst du die komplette Versionshistorie von ThemeWare® — mit allen Highlights, Änderungen und Hinweisen je Version. Die Daten werden bei jedem Aufruf direkt aus dem ThemeWare® Service-Portal (via JSON-Feed) geladen, du verpasst also kein Release.
Die Einträge sind nach Hauptversionen gruppiert (z.B. 4.x, 3.x). Jeder Versionseintrag lässt sich aufklappen und zeigt:
Highlights — die wichtigsten Neuerungen
Änderungen — alle weiteren Anpassungen
Support
Im Support-Tab bündeln wir alle Wege zu Hilfe, Anleitungen und Kontakt — von der Selbsthilfe bis zum persönlichen Support.
Über "Chat starten" öffnest du unseren Support-Chat direkt im Hub und erhältst ohne Wartezeit Antworten auf deine Fragen.
Karten mit den wichtigsten Selbsthilfe-Ressourcen:
Der ThemeWare® CMS-Block "Hero-Slider (3x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.
Der "Hero-Slider (3x)" bietet dir die Möglichkeit 3 Slides zu nutzen – nicht mehr und nicht weniger.
Hero-Slider (2x)
Der ThemeWare® CMS-Block "Hero-Slider (2x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.
Der "Hero-Slider (2x)" bietet dir die Möglichkeit 2 Slides zu nutzen – nicht mehr und nicht weniger.
Hero-Slider (4x)
Der ThemeWare® CMS-Block "Hero-Slider (4x)" muss mit den entsprechenden "Hero-Slider" CMS-Elementen befüllt werden. Eine Kompatibilität mit anderen CMS-Elementen können wir derzeit nicht garantieren.
Der "Hero-Slider (4x)" bietet dir die Möglichkeit 4 Slides zu nutzen – nicht mehr und nicht weniger.
Banner
Die ThemeWare® Banner-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Image-Banner
Parallax-Banner
Zwei Spalten
Der ThemeWare® CMS-Block "Zwei Spalten" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zwei Spalten (auf Handys getauscht)
Der ThemeWare® CMS-Block "Zwei Spalten (auf Handys getauscht)" (50% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Der CMS-Block "Zwei Spalten (auf Handys getauscht)" ist eine Variante vom CMS-Block "Zwei Spalten" (siehe ). Hier unterscheidet sich lediglich die Anordnung der beiden Spalten in mobilen Viewports. In dieser Variante wird die zweite Spalte oberhalb der ersten Spalte angeordnet und nicht darunter.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zwei Spalten, 3-9
Der ThemeWare® CMS-Block "Zwei Spalten, 3-9" (25% | 75%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zwei Spalten, 4-8
Der ThemeWare® CMS-Block "Zwei Spalten, 4-8" (ca. 33.333% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zwei Spalten, 7-5
Der ThemeWare® CMS-Block "Zwei Spalten, 7-5" (ca. 58.333% | ca. 41.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zwei Spalten, 8-4
Der ThemeWare® CMS-Block "Zwei Spalten, 8-4" (ca. 66.667% | ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Zwei Spalten, 9-3
Der ThemeWare® CMS-Block "Zwei Spalten, 9-3" (75% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Drei Spalten
Der ThemeWare® CMS-Block "Drei Spalten" (jeweils ca. 33.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Drei Spalten, 2-2-8
Der ThemeWare® CMS-Block "Drei Spalten, 2-2-8" (ca. 16.667% | ca. 16.667% | ca. 66.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Drei Spalten, 2-8-2
Der ThemeWare® CMS-Block "Drei Spalten, 2-8-2" (ca. 16.667% | ca. 66.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Drei Spalten, 3-3-6
Der ThemeWare® CMS-Block "Drei Spalten, 3-3-6" (25% | 25% | 50%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Drei Spalten, 3-6-3
Der ThemeWare® CMS-Block "Drei Spalten, 3-6-3" (25% | 50% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Drei Spalten, 6-3-3
Der ThemeWare® CMS-Block "Drei Spalten, 6-3-3" (50% | 25% | 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Vier Spalten
Der ThemeWare® CMS-Block "Vier Spalten" (jeweils 25%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Fünf Spalten
Der ThemeWare® CMS-Block "Fünf Spalten" (jeweils 20%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Sechs Spalten (Individuell)
Der ThemeWare® CMS-Block "Sechs Spalten (Individuell)" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Dieser Block kann die Experten-Konfiguration "CSS-Klasse (Spalte)" bestimmter CMS-Elemente berücksichtigen.
Mehr Informationen zu den CSS-Klassen findest du in der ThemeWare® Wissensdatenbank:
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Folgt...
Grid 'One' (getauscht)
Der ThemeWare® CMS-Block "Grid 'One' (getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.
Grid 'Three'
Auf "Freischalten →" klicken — Shopwares Kauf-Modal öffnet sich.
Hinweis: Du musst den "Shopware Extension Store" aktiviert und deinen Shop mit deinem Shopware-Account verknüpft haben um InApp-Käufe tätigen zu können.
Den Kauf im Modal bestätigen.
Nach erfolgreichem Kauf ist das Add-on sofort aktiv.
Details zu den verfügbaren Add-ons, zum Kaufmodell und zur Abrechnung findest du in der Add-ons-Übersicht.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Unterkategorie-Navigation (Sidebar)
Der ThemeWare® CMS-Block "Unterkategorie-Navigation (Sidebar)" ist eine Variante vom Shopware CMS-Block "Kategorie-Navigation".
Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Weiterführende Informationen
Mehr Informationen zum CMS-Element findest du hier:
Services — individuelle Anpassungen und Auftragsarbeiten
Branding entfernen — Entfernung des Footer-Hinweises beantragen
Partner & Agenturen — Prioritäts-Support und Partnerprogramm
Service-Portal — deine zentrale Anlaufstelle
News — Neuigkeiten & Ankündigungen
Changelog — Versionshistorie & Updates
Kompatibilität — Shopware- & ThemeWare®-Versionen
Live-Chat
Wissen, Antworten & Lösungen
Kontakt & Feedback
Services & Partnerschaft
Weiteres & Aktuelles
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.
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.
Die ThemeWare® Wissensdatenbank erreichst du unter:
Das ThemeWare® Handbuch
Im ThemeWare® Handbuch findest du Informationen zu allen Funktionen und Features von ThemeWare®.
Das ThemeWare® Handbuch ist das Nachschlagewerk für alle Konfigurationen und Features von ThemeWare®.
Im Bereich "Handbuch" findest du die gesamte Theme-Konfiguration von ThemeWare®. Damit du dich schnell zurecht findest haben wir den Aufbau der Dokumentation der Theme-Konfiguration nachempfunden.
Die Theme-Konfiguration gliedert sich in 4 Elemente:
Tabs in der Tab-Navigation
Bereiche in den einzelnen Tabs (Akkordeon-Elemente zum aufklappen)
Abschnitte die einen Bereich gliedern
Konfigurationsfelder in den einzelnen Abschnitten
Aufbau der ThemeWare®-Konfiguration
In diesem Handbuch haben wir diese 4 Elemente wie folgt dargestellt:
Tabs
Bereiche
Abschnitte
Konfigurationsfelder
Aufbau des ThemeWare® Handbuchs
Hinweis: Bitte beachte, dass das Handbuch derzeit in Arbeit ist und wir noch an der Fertigstellung arbeiten.
Das ThemeWare® Handbuch
Hinweis: Die Dokumentation von mehr als 1.000 Konfigurationsfeldern und über 400 Zusatzfunktionen benötigt leider einiges an Zeit, wir arbeiten aber täglich daran das Handbuch zu befüllen. 🚀
Aufbau der ThemeWare®-Konfiguration
Aufbau des ThemeWare® Handbuchs
ThemeWare®Unterer Bereich
Logos-Footer
Copyright-Footer
"Scroll-Up"-Button
Footer-Elemente sind genau genommen "Platzhalter" in den Spalten des Footer-Bereiches. Diese Footer-Elemente kannst du mit ThemeWare® Widgets befüllen.
ThemeWare® Footer-Elemente
ThemeWare® "Newsletter"-Widget
Service-Hotline
Footer-Navigation
ThemeWare® "Vorteile"-Widget
ThemeWare® "Versandarten"-Widget
ThemeWare® "Zahlungsarten"-Widget
ThemeWare® "Standort bzw. Ladengeschäft"-Widget
ThemeWare® "Auszeichnungen, Siegel oder Zertifikate"-Widget
ThemeWare® "Über uns"-Widget
ThemeWare® "Communities bzw. Social Media"-Widget
ThemeWare® Footer
Footer-Elemente
Utilities — kostenloses Extra-Paket anfordern
Varianten — Theme-Varianten anlegen und Konfigurationen übernehmen
Backup — Theme-Konfiguration sichern und wiederherstellen
News — Neuigkeiten & Ankündigungen
Changelog — Versionshistorie & Updates
Support — Hilfe, Anleitungen & Kontakt
Den ThemeWare® Hub erreichst du über die Hauptnavigation oder die Shopware-Einstellungen.
Angeben, ob du Shopbetreiber oder Shopware-Agentur bist.
Die Datenschutzerklärung bestätigen und auf "Jetzt kostenfrei registrieren" klicken.
Mit der Eintragung meldest du dich zu unserem Newsletter an, über den wir dir die Ressourcen und gelegentlich relevante Informationen zusenden. Du kannst dich jederzeit mit einem Klick wieder abmelden.
Du findest mehr Informationen zu den ThemeWare® Utilites auch im ThemeWare® Service Portal:
Anfordern
Tipp: Die Utilities umfassen unter anderem eine fertige Erlebniswelt, die du dank One-Click-Import in Sekunden installierst.
Mehr Informationen
Im Backup-Tab das gewünschte Theme suchen.
Theme-Bereich aufklappen.
Auf "Kopieren" klicken.
Die Theme-Konfiguration befindet sich nun in der Zwischenablage.
Füge Sie in eine TXT-Datei ein und speichere diese.
Details zum Funktionsumfang und Preis des Backup-Managers findest du in der Add-ons-Übersicht.
Du möchtest stattdessen ein neues Duplikat aus einer Quelle anlegen?
Dafür gibt es im die Funktion "Konfiguration übernehmen". Sie erstellt ein neues Theme mit den Anpassungen aus einer beliebigen ThemeWare® Edition (Pro oder Cloud) und lässt dein bestehendes Setup unverändert.
Hinweise — wichtige Informationen zur Version
Badges am Eintrag kennzeichnen die Art der Version (Feature, Premium-Request, Bugfix, Hinweis). Marker wie Pro oder Cloud zeigen, für welche Edition eine Änderung gilt.
Zu Version springen — über die Versions-Buttons (z.B. "4.x") oben gelangst du direkt zur gewünschten Hauptversion.
Alle ausklappen / einklappen — zeigt oder versteckt die Details aller Einträge.
Die neueste Version ist beim Öffnen automatisch aufgeklappt.
Deine aktuell installierte Version wird im Changelog mit einem blauen Rahmen und dem Hinweis "Installiert" hervorgehoben.
Installierte Version hervorgehoben
Gibt es eine neuere Version, erscheint oben ein Hinweis "Update empfohlen" mit deiner installierten und der aktuellsten Version.
"Update empfohlen"-Hinweis
Hinweis: Es werden nur Daten gelesen — es werden keine Daten an das Service-Portal übertragen.
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Banner-Blöcke findest du in der Rubrik "ThemeWare® Banner" [Pro]
Banner CMS-Block hinzufügen
Hinweis: Mehr zu den ThemeWare® Banner-Elementen findest du hier: Banner
Verfügbare Banner-Blöcke
Wichtig: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.
Banner-Block hinzufügen
Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. 640 px).
Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. 20px) einem Element zu addieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® CMS-Block "Grid 'One' (getauscht)"
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Standard-Einstellungen
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.
Hinweis: Dieser Block richtet sich an Experten die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen und mit diesem Block umfangreiche individuelle Anpassungen umgehen können.
Wichtig: Bitte beachte, dass sich dieser Block derzeit in einer Testphase befindet und ggf. noch einmal geändert werden kann.
Listing (CMS-Block "Drei Spalten, Produkt-Boxen" von Shopware)
Produktlisten-Aktionen
CMS-Block "Bild, zentriert"
CMS-Block "Kategorie-Navigation"
CMS-Block "Text"
Produktbild (Cover-Bild)
Bewertung bzw. Bewertungs-Sterne
Produktname
Produktseiten
ThemeWare® Produktseiten
Breadcrumb
CMS-Block "Produktname & Hersteller-Logo" von Shopware
Produktname
Hersteller-Logo
CMS-Block "Galerie und Buybox" von Shopware
CMS-Block "Produktbeschreibung und -bewertungen" von Shopware
ThemeWare® Produkt-Badges
Produktbild
Pfeil-Navigation
Preis
Versandkostenfrei-Hinweis
Varianten-Auswahl (Layout "Text")
Angebotspreis/Rabattpreis (+Streichpreis)
ThemeWare® Lagerbestand-Label
ThemeWare® Individuelle Ankündigung
Add-ons
ThemeWare® Add-ons erweitern dein Theme um zusätzliche Funktionen, die du bei Bedarf einzeln freischalten kannst. Jedes Add-on ist ein eigenständiges Abo und kann unabhängig von den anderen gebucht oder gekündigt werden.
Warum Add-ons?
Wir möchten den Preis für ThemeWare® bewusst stabil halten und das Theme gleichzeitig wie gewohnt kontinuierlich weiterentwickeln.
Viele neue Funktionen gehören klar zum klassischen Theme-Umfang und werden weiterhin direkt in ThemeWare® integriert. Darüber hinaus entstehen jedoch auch Features und Feature-Requests, die deutlich über den üblichen Umfang eines Themes hinausgehen.
Solche erweiterten Funktionen bieten wir als optionale Add-ons an. So kannst du sie gezielt freischalten, wenn du sie benötigst — und alle Käufer behalten die Freiheit, nur für den Funktionsumfang zu zahlen, den sie wirklich nutzen möchten.
Verfügbare Add-ons
Backup-Manager
Theme-Konfiguration sichern, übertragen und direkt bearbeiten. Datei-Export, geführter Import mit automatischer Pre-Backup-Sicherung und ein Inline-JSON-Editor mit Live-Validierung und Änderungs-Zähler.
CMS-Element für Kategorie- und Landingpages: Präsentiere mehrere Unterkategorien gemeinsam mit ihren direkten Unterkategorien in einem aufgeräumten Card- oder Clean-Layout.
Add-ons werden als In-App-Kauf direkt im Shopware-Admin freigeschaltet. Der gesamte Kauf-Prozess läuft über deinen Shopware-Account — Endpreis, Zahlungsdaten und Abrechnung kommen aus dem Shopware-Store.
Ablauf:
Im ThemeWare® Hub auf das gewünschte Add-on klicken (Tab "Add-ons" oder "Varianten").
Auf "Freischalten →" klicken — Shopwares Kauf-Modal öffnet sich.
Falls du den "Shopware Extension Store" noch nicht aktiviert hast und dein Shop noch nicht mit deinem Shopware-Account verbunden ist, wirst du im Modal zur Verbindung geleitet. Das passiert automatisch.
Abrechnung: Monatlich, jederzeit kündbar, über deinen Shopware-Account.
Gekaufte bzw. gebuchte Add-ons werden dir entsprechend gekennzeichnet.
Du kannst sie kündigen, indem du die Lizenz in deinem Shopware-Account (Händler → Shops → [Dein Shop] → Lizenzen) entfernst.
Fünf Designvarianten — Bike, Kids, Global, Fit und Plants — sind im Theme ohne Aufpreis enthalten. Wechsle den Look deines Shops per Klick, ganz ohne zusätzliche Lizenz.
Pixel-Kaffee und Pixel-Patenschaft sind freiwillige Beiträge zur Unterstützung der ThemeWare®-Entwicklung. Sie schalten keine zusätzlichen Funktionen frei, sondern bedanken sich mit einem offiziellen "Pixel-Friend"- bzw. "Pixelpate"-Status. – Vielen Dank! 💙
Hero-Slider
Die ThemeWare® "Hero-Slider"-Blöcke sind CMS-Blöcke die mit den entsprechenden Slider CMS-Elementen befüllt werden müssen. Andere CMS-Elemente funktionieren nicht im Hero-Slider.
Die Slider-Blöcke haben daher spezielle CMS-Elemente.
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Den "Hero-Slider" findest du in der Rubrik "ThemeWare® Allgemein" [Pro]
Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Du kannst diese Funktion über die Theme-Konfiguration aktivieren.
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Da der ThemeWare® "Hero-Slider" (ab ThemeWare® 2.0) auf dem Bootstrap 5 Carousel () basiert, sind folgende CSS-Klassen besonders interessant:
Füge die CSS-Klasse carousel-fade dem Block hinzu, um Slides mit einem Fade-Übergang anstelle eines Slides zu animieren.
Füge die CSS-Klasse carousel-dark dem Block hinzu, um Steuerelemente dunkler zu gestalten.
Für eine optimale Sichtbarkeit haben die Bedienelemente vom "Hero-Slider" einen Schlagschatten. Dies hilft besonders, wenn die Farbigkeit der Bilder im Slider stark variiert. Möchtest du diese Schlagschatten nicht, füge dem entsprechenden Block einfach die CSS-Klasse flat-controls hinzu.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Grid 'Four'
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Four'
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Grid 'Three' (swapped)
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Three' (swapped)
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Grid 'Four' (swapped)
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Four' (swapped)
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Grid 'Six'
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Six'
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Grid 'Two' (swapped)
Hinweis: Dieser Artikel ist in Arbeit.
ThemeWare® CMS-Block Grid 'Two' (swapped)
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Text & Bild
Die ThemeWare® "Text & Bild"-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Hinweis: Mehr zu den ThemeWare® "Text & Bild"-Elementen findest du hier:
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Eine Spalte
Der ThemeWare® CMS-Block "Eine Spalte" (100%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Grid 'Modern' (getauscht)
Der ThemeWare® CMS-Block "Grid 'Modern '(getauscht)" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
Die kleinen Bild-Elemente haben eine minimale Höhe von 300 px.
Sechs Spalten
Der ThemeWare® CMS-Block "Sechs Spalten" (jeweils ca. 16,667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Kategorie-Teaser
Die ThemeWare® Kategorie-Teaser-Blöcke haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.
Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Kategorie-Teaser
Kategorie-Teaser (Advanced)
Kategorieseite
Die ThemeWare® CMS-Blöcke für Kategorieseiten selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Unterkategorien im Listing
Unterkategorien im Listing (Modern)
Produktname (ohne Hersteller-Logo)
Der ThemeWare® CMS-Block "Produktname (ohne Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Produktname & Hersteller-Logo" nur ohne Hersteller-Logo.
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.
Anwendungsbeispiele findest du in unseren Demoshops:
Sale
Die ThemeWare® "Sale"-CMS-Blöcke selber haben keine spezielle Funktion. Du musst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Galerie und Buybox (mit Produktname)
Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen über der Buybox dar.
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.
Anwendungsbeispiele findest du in unseren Demoshops:
Sidebar
Die ThemeWare® CMS-Blöcke für die Sidebar.
...
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in die Sidebar-Sektion deiner Erlebniswelt.
Hinweis
Galerie und Buybox (mit Produktname & Hersteller-Logo)
Der ThemeWare® CMS-Block "Galerie und Buybox (mit Produktname & Hersteller-Logo)" ist eine Variante vom Shopware CMS-Block "Galerie und Buybox" und stellt zusätzlich den Produktnamen samt Hersteller-Logo über der Buybox dar.
Der CMS-Block ist von Haus aus mit den vorgesehenen Standard-CMS-Elementen von Shopware befüllt. Wir raten davon ab, die Elemente auszutauschen.
Mehr Informationen zu den Shopware CMS-Elementen findest du in der Shopware-Dokumentation.
Anwendungsbeispiele findest du in unseren Demoshops:
Discount-Banner
Der ThemeWare® CMS-Block "Discount-Banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
...
Mehr Informationen zum CMS-Element findest du hier:
Eine Anwendungsbeispiel findest du in unseren Demoshops:
Demo folgt...
Grid 'Modern'
Der ThemeWare® CMS-Block "Grid 'Modern'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
Die kleinen Bild-Elemente haben eine minimale Höhe von 300 px.
Hero-Countdown
Der ThemeWare® CMS-Block "Hero-Countdown" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
Der CMS-Block "Hero-Countdown" besteht aus zwei CMS-Elementen:
Countdown-Banner (kompakt)
Der ThemeWare® CMS-Block "Countdown-Banner (kompakt)" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
...
Mehr Informationen zum CMS-Element findest du hier:
Eine Anwendungsbeispiel findest du in unseren Demoshops:
Demo folgt...
Zwei Spalten, 5-7
Der ThemeWare® CMS-Block "Zwei Spalten, 5-7" (ca. 41.667% | ca. 58.333%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Countdown-Banner
Der ThemeWare® CMS-Block "Countdown-Banner" hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
...
Mehr Informationen zum CMS-Element findest du hier:
Eine Anwendungsbeispiel findest du in unseren Demoshops:
Demo folgt...
Testimonial (Kundenrezension)
Der ThemeWare® CMS-Block "Testimonial (Kundenrezension)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.
Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
Mehr Informationen zum CMS-Element findest du hier:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
Breadcrumb-Navigation
Der ThemeWare® CMS-Block "Breadcrumb-Navigation" ist eine Variante vom Shopware CMS-Block "Breadcrumb-Navigation".
Der CMS-Block hat keine spezielle Funktion. Du musst diesen CMS-Block aber nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
Mehr Informationen zum CMS-Element findest du hier:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
Produktseite
Die ThemeWare® CMS-Blöcke für Produktseiten haben keine spezielle Funktion. Du kannst diese aber nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Drei Spalten, 8-2-2
Der ThemeWare® CMS-Block "Drei Spalten, 8-2-2" (ca. 66.667% | ca. 16.667% | ca. 16.667%) ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Grid 'One'
Der ThemeWare® CMS-Block "Grid 'One'" ist ein universeller CMS-Block. In diesen kannst du diverse CMS-Elemente platzieren.
Alle Bild-Elemente nutzen den Darstellungsmodus "Füllen".
Die kleinen Bild-Elemente haben eine minimale Höhe von 320 px.
Testimonials (Vier Spalten)
Der ThemeWare® CMS-Block "Testimonials (Vier Spalten)" hat keine spezielle Funktion. Der Block symbolisiert die Flexibilität des CMS-Elementes "Testimonial (Kundenrezension)", welches in verschiedenen (Spalten-) Blöcken genutzt werden kann.
Mehr Informationen zum CMS-Element findest du hier:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
Individueller Code (HTML/CSS/JS)
Der ThemeWare® CMS-Block "Individueller Code (HTML/CSS/JS)" hat keine spezielle Funktion und dient lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.
Du musst diesen CMS-Block nicht unbedingt nutzen um das entsprechende CMS-Element in deiner Erlebniswelt zu platzieren.
Mehr Informationen zum CMS-Element findest du hier:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Diese Blöcke findest du in der Rubrik "ThemeWare® Verschiedenes" [Pro]
Endpreis im Kauf-Dialog
Die im Hub angezeigten Preise sind Richtwerte. Der tatsächliche Endpreis inklusive länderspezifischer Anpassungen wird dir direkt im Shopware-Kauf-Modal vor der Bestätigung angezeigt.
Support zu Käufen, Lizenzen und Abrechnung
Bei Fragen zu Käufen, Lizenzen, Buchungen oder Abrechnungen wende dich bitte direkt an Shopware. Wir haben darauf keinen Einfluss.
Kauf-Modal
Gebuchte Add-ons
Support zu Käufen, Lizenzen und Abrechnung
Bei Fragen zu Käufen, Lizenzen, Buchungen oder Abrechnungen wende dich bitte direkt an Shopware. Wir haben darauf keinen Einfluss.
Hinweis: Mehr zu den ThemeWare® Elementen für Produktseiten findest du hier: Produktseite
Verfügbare Blöcke
Block hinzufügen
Das große Bild-Element nutzt die komplette Höhe und sollte eine minimale Höhe 2x der minimalen Höhe der beiden linken Bilde-Elemente haben (z.B. 640 px).
Hinweis: In älteren Versionen von ThemeWare® kann es nötig sein noch die Lücke (z.B. 20px) einem Element zu addieren.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® CMS-Block "Grid 'One'"
Wichtig: Dieser Block ist nur in der ThemeWare® Pro Edition verfügbar.
Standard-Einstellungen
Tipp: Die Spaltenabstände kannst du mit den ThemeWare® CSS-Abstandsklassen (siehe ) modifizieren.
Demo
Eine Anwendungsbeispiel findest du in unseren Demoshops:
Bedenken hinsichtlich der Barrierefreiheit: Das Aktivieren dieser Funktion kann dazu führen, dass Teile Deiner Storefront für Menschen mit Einschränkungen nicht zugänglich sind. Dies kann eine Nichteinhaltung der in Deiner Gerichtsbarkeit geltenden Barrierefreiheitsgesetze darstellen (z.B. des Europäischen Rechtsakts zur Barrierefreiheit).
Bitte beachte: Mit dem Aktivieren erkennst du dieses Risiko an und übernimmst die volle Verantwortung.
Der Backup-Manager sichert, überträgt und bearbeitet deine Theme-Konfiguration direkt im Tab "Backup" des ThemeWare® Hubs. Er bündelt drei Funktionen: den Export der Konfiguration als JSON-Datei, einen geführten Import mit verpflichtender Pre-Backup-Sicherung und einen erweiterten Modus mit Inline-JSON-Editor für die Direkt-Bearbeitung.
Wichtig: Der Backup-Manager ist ein Add-on und muss separat freigeschaltet werden.
Theme-Konfiguration
Exportieren
Lädt die Konfigurationswerte des Themes als JSON-Datei herunter. Geeignet für Sicherungen vor größeren Änderungen oder zum Übertragen zwischen Shops.
Schritt für Schritt:
Im Backup-Tab das gewünschte Theme suchen.
Auf "Exportieren" klicken.
Der Browser lädt eine Datei mit dem Schema tcinn-<theme-name>-<datum>.json.
Spielt eine zuvor exportierte JSON-Datei in das gewählte Theme ein. Bestehende Konfigurationswerte werden dabei vollständig ersetzt, daher führt der Import-Dialog vorab durch ein Backup.
Schritt für Schritt:
Im Backup-Tab beim Ziel-Theme auf "Importieren" klicken. Das Modal "Theme-Konfiguration importieren" öffnet sich.
Im Modal "Backup herunterladen" klicken (Schritt 1). Die aktuelle Konfiguration wird zur Sicherheit als JSON gespeichert.
"Datei wählen …" klicken (Schritt 2) und die zu importierende JSON-Datei auswählen.
Das Theme wird automatisch neu kompiliert.
Für fortgeschrittene Nutzer: ein JSON-Editor direkt unter jedem Theme, mit dem die Konfiguration ohne Umweg über die Standard-Oberfläche bearbeitet werden kann.
Schritt für Schritt:
Im Backup-Tab oben auf "Erweiterten Modus aktivieren" klicken.
Unter jedem Theme erscheint ein JSON-Editor mit der aktuellen Konfiguration.
Vor dem Speichern beim betroffenen Theme zwingend "Exportieren" klicken (Backup-Pflicht).
Änderungen im JSON-Feld vornehmen.
Das Theme wird automatisch neu kompiliert.
Typische Szenarien für die Backup-Funktionen:
Sicherung vor größeren Änderungen — Vor einem Plugin-Update, einer umfangreichen Theme-Anpassung oder dem Aktivieren des "Erweiterten Modus" eine Sicherung herunterladen.
Wiederherstellung nach einem Fehler — Eine Änderung hat das Theme beschädigt oder unerwünschte Effekte verursacht? Die zuvor exportierte JSON-Datei einfach in das betroffene Theme zurückimportieren.
Konfiguration in ein anderes Theme reinschreiben — Du hast ein bestehendes Custom-Duplikat und möchtest die Konfiguration einer anderen Variante (z.B. aus Plants) dort einfließen lassen. Im Quell-Theme exportieren, im Ziel-Theme importieren.
Setup von Test-Shop auf Live-Shop übertragen — Du entwickelst auf einem Test-Shop und möchtest das fertige Theme-Setup im Produktiv-Shop einspielen. Export auf Test, Datei herunterladen, Import auf Live.
Detail-Anpassungen am JSON für Power-User — Einzelne Konfigurationswerte sollen schnell und gezielt geändert werden, ohne den Umweg über die Standard-Oberfläche im Theme-Manager. Dafür den "Erweiterten Modus" aktivieren.
Block-Konfiguration
ThemeWare® erweitert ausgewählte CMS-Blöcke um eine Block-Konfiguration in der CMS-Sidebar (2). Die Block-Konfiguration ermöglicht es dir, das responsive Verhalten deiner CMS-Blöcke komfortabel zu steuern - ohne CSS-Klassen manuell eingeben zu müssen.
Die Konfiguration gliedert sich in zwei Bereiche: das Responsive Block-Layout (3 – Spaltenabstand und Ausrichtung) und das Responsive Spalten-Layout (4 – Spaltenanordnung, Sichtbarkeit und Experten-Modus).
Dies ist die erste Iteration dieser Funktion. Wir haben bereits weitere Ideen für zusätzliche Konfigurationen, möchten uns zunächst aber auf dein Feedback zur aktuellen Umsetzung konzentrieren.
Tipp: Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das ThemeWare Service Portal:
Wichtig: Diese Funktion ist nur in der ThemeWare® Pro Edition verfügbar.
Responsive Block-Layout
Im Bereich "Responsive Block-Layout" (3) konfigurierst du den Spaltenabstand (Gutter) und die Ausrichtung der Spalten innerhalb des Blocks.
Spaltenabstand (Gutter)
Legt den horizontalen und vertikalen Abstand zwischen den Spalten fest. Du kannst aus verschiedenen vordefinierten Abstandswerten oder "Standard" wählen.
Ausrichtung
Wähle die horizontale Ausrichtung der Spalten innerhalb der Zeile:
Standard (links) - Standardausrichtung
Zentriert - Spalten werden zentriert
Rechts - Spalten werden rechtsbündig ausgerichtet
Mit dem Schalter "Erweiterte Konfiguration" kannst du Gutter und Ausrichtung für jeden Viewport einzeln konfigurieren. Folgende Viewports stehen zur Verfügung:
Desktop Groß (≥1200px)
Desktop (≥992px)
Tablet (≥768px)
Im Bereich "Responsive Spalten-Layout"(4) konfigurierst du die Spaltenanordnung und Sichtbarkeit der einzelnen Spalten.
Spaltenanordnung
Legt fest, wie viele Spalten in einem bestimmten Viewport nebeneinander statt untereinander dargestellt werden. So kannst du z.B. auf einem Tablet drei Spalten auf zwei reduzieren.
Sichtbarkeit
Steuert, ob eine Spalte in einem bestimmten Viewport sichtbar oder ausgeblendet ist.
Asymmetrisch ab
Nur verfügbar bei asymmetrischen Spalten-Blöcken (z.B. Zwei Spalten 3-9, Drei Spalten 3-3-6). Legt fest, ab welchem Viewport die Spalten in der vordefinierten asymmetrischen Aufteilung des Blocks dargestellt werden. Unterhalb dieses Viewports werden die Spalten gleichmäßig oder untereinander angeordnet.
Experten-Modus
Mit dem Schalter "Erweiterte Konfiguration" kannst du Spaltenanordnung und Sichtbarkeit für jeden Viewport einzeln festlegen.
Nicht alle CMS-Blöcke unterstützen alle Bereiche der Block-Konfiguration. Die folgende Übersicht zeigt, welche Block-Typen welche Konfigurationsbereiche bieten:
Symmetrische Spalten-Blöcke wie "Zwei Spalten", "Drei Spalten", "Vier Spalten" und "Sechs Spalten" unterstützen:
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Grids" [Pro]
Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.
Wir empfehlen daher für Bild-Elemente in Grid-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Die Größe der Elemente selber kannst du über die Konfiguration "Minimale Höhe" definieren, mehr Informationen dazu findest du im folgenden Abschnitt.
Als Bild-Elemente kannst du die Teaser von ThemeWare® in den Grids nutzen. (Das Bild-Element von Shopware funktioniert ebenfalls.)
Die Größe der Elemente definierst du über die Konfiguration "Minimale Höhe" im Modus "Füllen" der entsprechenden Elemente. Damit Grids gut funktionieren ist hier etwas Mathematik nötig: Die "Minimale Höhe" der Elemente auf der linken Seite sollte in Summe dieselbe Höhe haben wie die Summe der "Minimale Höhe" aller Elemente auf der rechten Seite. Addiere etwaige Lücken (Standard: 40px) zwischen den Elementen noch dazu.
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Für die ThemeWare® Grid-Blöcke sind folgende CSS-Klassen für die Abstände der Elemente im Block interessant:
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Teaser
Die ThemeWare® Teaser-Blöcke haben keine spezielle Funktion und dienen lediglich der Übersicht in der Auswahl der CMS-Blöcke im Erlebniswelt-Editor.
Du musst diese CMS-Blöcke nicht unbedingt nutzen um die entsprechenden CMS-Elemente in deiner Erlebniswelt zu platzieren.
Hinweis: Mehr Informationen zu den ThemeWare® Teaser-Elementen findest du hier:
Verfügbare Teaser-Blöcke
Text-Teaser
Text-Teaser (verziert)
Button-Teaser
Call-to-Action
Hover-Box
Image-Teaser
Hero-Teaser
Advanced-Teaser
Classic-Teaser
Modern-Teaser
Runder Teaser
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" [Pro]
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren.
Für die ThemeWare® Teaser-Blöcke sind folgende CSS-Klassen besonders interessant:
Teaser
Die ThemeWare® CMS-Teaser sind unabhängig von ihrem CMS-Block. Du kannst die Teaser auch in anderen CMS-Blöcken (z.B. den ThemeWare® Spalten-Blöcken) verwenden.
Füge den CMS-Block des gewünschten Teaser-Elementes einfach per Drag’n’Drop deiner Erlebniswelt hinzu.
Mehr Informationen dazu findest du in der folgenden Anleitung:
Hinweis: Teaser-Blöcke findest du in der Rubrik "ThemeWare® Allgemein" [Pro]
Tausche alternativ ein bestehendes CMS-Element in einem CMS-Block gegen das gewünschte Teaser-Element aus.
Mehr Informationen dazu findest du in der folgenden Anleitung:
Hero-Slider
Die ThemeWare® Hero-Slider-Elemente (Slides) sind explizit für die Verwendung im CMS-Block "Hero-Slider (...)" (siehe Hero-Slider) vorgesehen. Die Elemente sind nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktionieren nicht in anderen CMS-Blöcken.
Füge den CMS-Block des gewünschten Hero-Slider einfach per Drag’n’Drop deiner Erlebniswelt hinzu. Mehr Informationen dazu findest du in der folgenden Anleitung:
Hinweis: Den Hero-Slider findest du in der Rubrik "ThemeWare® Allgemein" [Pro]
Der ThemeWare® Hero-Slider ist mit Elementen befüllt. Du kannst diese gegen austauschen:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
Klicke auf das "Austauschen"-Icon (3) um das CMS-Element zu konfigurieren
Du hast nun das CMS-Element ausgetauscht.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Varianten
Wechsle den Look deines Shops mit einer anderen Variante oder übernimm deine Anpassungen. Beide Funktionen legen ein Duplikat an — dein Theme bleibt unverändert.
Im Varianten-Tab siehst du alle 15 ThemeWare® Varianten. Beim Erstellen einer Variante entsteht ein neues Theme-Duplikat im Look der gewählten Variante. Dein bisheriges Theme bleibt natürlich unverändert bestehen.
Im Varianten-Tab im Hub kannst du die Übersicht nach folgenden Kategorien filtern:
Topseller — die meistverkauften fünf Varianten
CMS-Erweiterungen
Mit ThemeWare® 0.5.0 haben wir unser großes CMS-Update und damit unsere ersten ThemeWare® CMS-Erweiterungen veröffentlicht. Alle CMS-Erweiterungen wurden mit dem Schwerpunkt Verkaufsförderung und Anpassbarkeit ausgewählt und entwickelt. Die vielen Layout-Möglichkeiten sprechen für sich.
Wir haben extrem viel Herzblut in jede einzelne CMS-Erweiterung gesteckt und sind auf diese wirklich stolz. Besonders freuen wir uns daher über das positive Feedback. Vielen Dank!
Technisch gesehen gibt es seitens Shopware derzeit leider ein paar technische Einschränkungen, aber Shopware arbeitet bereits an grundlegenden Verbesserungen – auch im Hinblick auf die Möglichkeit CMS-Erweiterungen in der Shopware 6 Cloud bereitstellen zu können.
Sobald es möglich ist werden wir unsere CMS-Erweiterungen überarbeiten und diese auch in der Cloud-Edition verfügbar machen. Wann dies der Fall ist, können wir derzeit leider nicht sagen.
Wir arbeiten, wie du es wahrscheinlich bereits von uns gewohnt bist, fleißig weiter an neuen CMS-Erweiterungen bzw. an Verbesserungen für bestehende CMS-Erweiterungen. Freu dich also noch auf viel mehr.
CMS-Blöcke
In diesem Bereich findest du alles über die ThemeWare® CMS-Blöcke welche du in den "Block-Kategorien" auswählen und deiner Erlebniswelt hinzufügen kannst.
Mit ThemeWare® erhältst du eine umfangreiche und wachsende Auswahl an CMS-Blöcken um deinen Shop zu individualisieren. Die ThemeWare® CMS-Blöcke sind ab Version 0.5.0 in der Pro-Edition und teilweise in der Cloud-Edition verfügbar.
Weitere CMS-Blöcke sind sowohl für die Pro-Edition als auch für die Cloud-Edition in Arbeit und folgen mit kommenden Updates. Sei gespannt!
Klicke auf das Plus-Icon um einen CMS-Block auszuwählen.
Spalten
Die ThemeWare® Spalten-Blöcke sind universelle CMS-Blöcke. In diesen Blöcken kannst du verschiedene CMS-Elemente platzieren.
Die Spalten-Blöcke haben daher keine speziellen CMS-Elemente.
Was wird exportiert?
Nur die Theme-Konfigurationswerte (configValues) – also alle Anpassungen am Theme. Hochgeladene Medien (Logos, Bilder) sind als Verweise enthalten, die Mediendateien selbst werden im aktuellen Format nicht mit exportiert.
Importieren
Bestehende Konfiguration wird ersetzt
Der Import überschreibt die bisherigen Konfigurationswerte komplett. Deshalb ist das Backup in Schritt 1 verpflichtend – fehlt es, bleibt der Importieren-Button deaktiviert.
Cross-Variant-Import
Stammt die Import-Datei aus einer anderen ThemeWare®-Variante (z.B. Plants-Datei in Modern-Theme), erkennt der Import das automatisch und zeigt einen Hinweis. Deine Anpassungen werden übernommen, nicht angepasste Felder nutzen die Defaults der aktuellen Variante.
Medien-Hinweis
Enthält die Datei Verweise auf Medien-IDs (Logos, Bilder), existieren diese ggf. nicht im Ziel-Shop und müssen nach dem Import manuell zugewiesen werden.
Erweiterter Modus
Vorsicht beim Editieren
Fehlerhafte JSON-Eingaben können das Theme beschädigen oder die Storefront beeinträchtigen. Der "Speichern"-Button bleibt deshalb so lange deaktiviert, bis ein Backup für das Theme erstellt wurde und die Eingabe gültiges JSON ist.
Erweiterter Modus deaktivieren
Über "Erweiterten Modus beenden" oben auf der Seite. Die Editoren werden ausgeblendet, ungespeicherte Änderungen gehen dabei verloren.
Hinweis: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.
Responsive Spalten-Layout
Erweiterte Konfiguration
Hinweis: Ohne die erweiterte Konfiguration gelten die Werte für alle Viewports gleichermaßen.
Unterstützte Blöcke
Spalten-Blöcke (symmetrisch)
Asymmetrische Spalten-Blöcke
Grid-Blöcke
Eine Spalte
Tipp: Du hast Vorschläge für weitere Konfigurationen oder andere Funktionen für ThemeWare®? Dann sende uns deine Ideen jederzeit gern über das ThemeWare Service Portal:
Beliebt — beliebte Varianten quer durch alle Stile
Hell — Designs mit hellem, freundlichem Look
Dunkel — Designs mit dunkler Anmutung
Boxed — Designs im Box-Layout
Inklusive — die fünf bereits enthaltenen Varianten
Add-on — die zehn freischaltbaren Varianten
Optional: Filter wählen (z.B. Topseller, Hell, Dunkel, Boxed), um die Auswahl einzugrenzen.
Auf die gewünschte Variant-Karte klicken. Das Modal "Variante als Duplikat anlegen" öffnet sich.
Im Modal die Auswahl prüfen (Quelle und Ziel).
Auf "Variante anlegen" klicken.
Das neue Duplikat erscheint danach in deinem Theme-Manager.
Übernimm Look und Anpassungen aus einer anderen installierten ThemeWare® Variante (Pro oder Cloud) in dein aktuelles Theme. Sinnvoll zum Beispiel beim Wechsel von der Cloud-App auf die Pro-Variante oder wenn du eine andere Variante als Basis weiterführen möchtest.
Voraussetzung: Mindestens eine zweite ThemeWare® Variante (Pro oder Cloud) ist im Shop installiert. Andernfalls erscheint ein Hinweis statt der Auswahlfelder.
Schritt für Schritt:
Im Bereich "Konfiguration übernehmen" die Quelle aus dem Dropdown auswählen. Verfügbar sind alle anderen ThemeWare® Varianten (Pro/Cloud) sowie deren Duplikate.
Das Ziel ist automatisch dein aktuelles Theme (rechts daneben angezeigt).
Auf "Konfiguration übernehmen" klicken.
Es entsteht ein neues Duplikat unter deinem aktuellen Theme als Parent. Look und Anpassungen der Quelle (Logo, Farben, Typografie usw.) bleiben erhalten.
Details zu den verfügbaren Add-on-Varianten, Tags und Preisen findest du in der Add-ons-Übersicht.
Typische Szenarien für die beiden Funktionen:
Variante ausprobieren — Du möchtest sehen, wie eine andere Variante (z.B. Plants) bei deinem Setup aussehen würde, ohne dein bestehendes Theme zu verändern.
Verschiedene Looks pro Sales-Channel — Du betreibst mehrere Sales-Channels und möchtest jedem eine eigene Variante zuweisen.
Frischer Start — Du möchtest mit den Werks-Einstellungen einer Variante neu beginnen, ohne deine bisherigen Anpassungen.
Wechsel zwischen zwei Pro-Plugins — Du hast z.B. ThemeWare® Plants und Modern parallel installiert und möchtest deine Plants-Konfiguration in Modern weiterführen.
Wechsel von Cloud (App) auf Pro (Plugin) — Du hast die Cloud-App installiert, kaufst zusätzlich das Pro-Plugin und möchtest deine Cloud-Konfiguration übernehmen. Anschließend kann die Cloud-App deinstalliert werden.
Variante wird im Store nicht mehr angeboten — Deine bisherige Variante steht nicht mehr zum Kauf bereit. Du wechselst auf eine aktive Variante und nimmst dein Setup mit.
Custom-Duplikat als Basis weiterführen — Du hast ein gepflegtes Custom-Duplikat unter einer Variante und möchtest dessen Look unter einer anderen Variante weiterführen.
Welche Funktion brauchst du?
Variante erstellen — frische Variante anlegen, schnell und sauber, ohne deine bisherigen Anpassungen.
Konfiguration übernehmen — Variante anlegen und deine Anpassungen (Logos, Farben, Texte) aus einem bestehenden Theme mitnehmen.
Sales-Channel-Zuweisung
Das frisch angelegte Duplikat ist noch keinem Sales-Channel zugewiesen. Öffne den Theme-Manager und weise das Theme dem gewünschten Sales-Channel zu, damit es im Storefront aktiv wird.
Logos
Logos werden vom Plugin-Theme deiner aktuellen Variante übernommen — eigene hochgeladene Logos sind dabei enthalten. Du kannst sie im Theme-Manager nach dem Anlegen austauschen.
Wenn du in eine Variante ohne Hintergrund wechselst (z.B. Bike → Modern), bleibt das alte Hintergrundbild der Quell-Variante zunächst sichtbar — das ist eine , die wir aktuell nicht automatisch lösen können.
Du hast zwei einfache Wege, das Hintergrundbild im neuen Theme zu entfernen:
Konfiguration übernehmen (Migration)
Hinweis: Diese Funktion befindet sich noch in der Entwicklung. Wir freuen uns über konstruktives .
Sales-Channel-Zuweisung
Das frisch angelegte Duplikat ist noch keinem Sales-Channel zugewiesen. Öffne den Theme-Manager und weise das Theme dem gewünschten Sales-Channel zu, damit es im Storefront aktiv wird.
Cloud-App als Quelle
Auch ThemeWare® Cloud-Editionen (Apps) können als Quelle dienen. Praktisch beim Wechsel von Cloud auf Pro: Cloud-Konfiguration einmal übernehmen, danach die Cloud-App deinstallieren.
Quelle = Duplikat
Wenn du ein Duplikat als Quelle wählst, werden auch die Anpassungen des darunterliegenden Plugin- oder App-Themes mit übernommen.
Quelle deinstallieren
Nach erfolgreicher Übernahme wird das Quell-Plugin oder die Quell-App nicht mehr für das übernommene Theme benötigt — du kannst es bedenkenlos deinstallieren.
Premium-Varianten (Add-on)
Anwendungsfälle
Variante erstellen
Konfiguration übernehmen
Du möchtest in ein bestehendes Theme reinschreiben statt ein neues anzulegen?
Dafür gibt es den : Konfiguration aus der Quelle exportieren, in das Ziel-Theme importieren. Dort gibt es zudem ein Sicherheitsnetz mit verpflichtendem Backup vor dem Überschreiben.
In der Regel besteht eine CMS-Erweiterung aus einem CMS-Block und einem CMS-Element.
Ein CMS-Block bildet quasi den Rahmen bzw. Container für CMS-Elemente. CMS-Blöcke haben einen oder mehrere Slots. In jedem Slot wird ein CMS-Element platziert.
CMS-Block
CMS-Element
Element austauschen
In den meisten CMS-Blöcken kannst du nahezu jedes beliebige CMS-Element platzieren. Ein Beispiel dafür sind die ThemeWare® Grid- und Spalten-Blöcke.
Es gibt aber auch CMS-Blöcke in welchen das CMS-Element nicht ausgetauscht werden kann (z.B. die ThemeWare® "Unterkategorie-Navigation") und CMS-Elemente, welche nur mit bestimmten CMS-Blöcken funktionieren (z.B. die ThemeWare® "Hero-Slider"-Elemente).
Neben universellen CMS-Blöcken gibt es auch universelle CMS-Elemente. Diese funktionieren in nahezu allen CMS-Blöcken (z.B. die ThemeWare® "Teaser"-Elemente).
Da aber nicht zu jedem CMS-Block ein CMS-Element gehören muss und umgekehrt, sprechen wir von allgemein von "CMS-Erweiterungen". Und das schöne an den ThemeWare® CMS-Erweiterungen ist: Es sind keine weiteren Plugins oder Apps nötig! Du erhältst alles direkt mit deinem ThemeWare® Theme.
Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.
Erlebniswelt: Sprache wechseln
Stand: Shopware 6.5.x
Die CMS-Blöcke bzw. CMS-Element erhältst du mit entsprechenden ThemeWare®-Updates. Es gibt keine spezielle Update-/Installationsroutine in ThemeWare® – Shopware 6 regelt dies automatisch.
Sollten die CMS-Blöcke bzw. CMS-Elemente nicht im Erlebniswelt-Editor erscheinen, leere bitte einmal den Shopware- sowie die Browser-Cache vollständig. Hilft dies nicht, deaktiviere (nicht deinstallieren!) ThemeWare® einmal und aktiviere es danach wieder.
Grundsätzlich werden die CMS-Blöcke bzw. CMS-Elemente beim Aktivieren von Themes hinzugefügt bzw. werden beim Deaktivieren wieder aus der Administration entfernt.
Bei Theme-Updates aktualisieren sich die CMS-Blöcke bzw. CMS-Elemente ggf. automatisch.
Das Deaktivieren von Themes entfernt lediglich die CMS-Blöcke bzw. CMS-Elemente aus der Erlebniswelt, aber nicht aus der Datenbank.
Die Deinstallation von Themes löscht derzeit keine Daten von CMS-Blöcken bzw. CMS-Elementen aus der Datenbank. Auch die Option "Alle App-Daten endgültig entfernen" hat derzeit keinen Einfluss.
Wichtig: CMS-Blöcke bzw. CMS-Elemente sollten vor dem "Deaktivieren" von ThemeWare® aus allen CMS-Seiten entfernt werden damit sie nicht "leer" in der Storefront dargestellt werden!
Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" findest du in der ThemeWare® Wissensdatenbank:
Tipp: Wenn du einen Vorschlag für eine neue oder bestehende CMS-Erweiterung hast, senden uns gerne einen über unser Service Portal.
ThemeWare® CMS-Erweiterungen
Hinweis: Aufgrund von technischen Limitationen im App-System von Shopware gibt es die meisten CMS-Erweiterungen derzeit nur in der Pro-Edition.
Mehrsprachigkeit
Installation/Updates/Deinstallation
Installation
Updates
Deaktivieren
Deinstallation
Hinweis: 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
Wähle im Dropdown "Block-Kategorie" den gewünschten CMS-Block aus.
Ziehe den CMS-Block per Drag'n'Drop in deine Erlebniswelt.
ThemeWare® CMS-Block hinzufügen
In der ThemeWare® Pro-Edition haben die ThemeWare® CMS-Blöcke eigene Kategorien und sind nach dem folgenden Muster gegliedert:
ThemeWare® Allgemein
Enthält grundlegende Gestaltungsblöcke wir Slider, Teaser und Banner.
ThemeWare® Spalten
Enthält Spalten-Blöcke die beliebig befüllt werden können.
ThemeWare® Grids
Enthält Grid-Blöcke die mit Bildelementen befüllt werden können.
ThemeWare® Kategorieseite
Enthält CMS-Blöcke für Kategorieseiten.
ThemeWare® Produktseite
Enthält CMS-Blöcke für Produktseiten.
ThemeWare® Sidebar
Enthält CMS-Blöcke für die Sidebar.
ThemeWare® Verschiedenes
Enthält weitere seitenübergreifende CMS-Blöcke.
ThemeWare® Pro-Edition
In der ThemeWare® Cloud-Edition findest du die ThemeWare® CMS-Blöcke in den Standard-Kategorien von Shopware (siehe "Text & Bild").
ThemeWare® Cloud-Edition
Die CMS-Blöcke in Shopware 6 verfügen über verschiedene Konfigurationsfelder. Im Abschnitt "Layout" findest du beispielsweise die Möglichkeit "CSS-Klassen" zu ergänzen und das Padding des Blocks zu definieren.
Block-Einstellungen
In den Block-Einstellungen hast du die Möglichkeit CSS-Klassen für den entsprechenden CMS-Block zu definieren. ThemeWare® bietet dir eine Reihe von CSS-Klassen, die du in deinen Erlebniswelten nutzen kannst.
Für alle CMS-Blöcke sind folgende CSS-Klassen interessant:
Weitere Klassen findest du im Bereich "Anleitungen > Erlebniswelten" in der ThemeWare® Wissensdatenbank:
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.
Du kannst die CMS-Elemente in den meisten CMS-Blöcken austauschen. Mehr dazu erfährst du im Bereich CMS-Elemente.
Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Blöcken" findest du in der ThemeWare® Wissensdatenbank:
ThemeWare® CMS-Blöcke
Tipp: Wenn du weitere Ideen oder Wünsche zu bestehenden oder neuen Blöcken hast, sende uns gerne Verbesserungsvorschläge über unser Service Portal.
Wähle einen CMS-Block aus und ziehe diesen einfach per Drag’n’Drop in deine Erlebniswelt.
Hinweis: Spalten-Blöcke findest du in der Rubrik "ThemeWare® Spalten" [Pro] bzw. in der Rubrik "Text & Bild" [Cloud]
Pro Edition
Cloud Edition
Die ThemeWare® Spalten-Blöcke sind mit Platzhalter-Elementen befüllt. Du kannst diese Elemente durch beliebige CMS-Elemente austauschen:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Klicke auf das gewünschte Platzhalter-Element (2) um ein neues CMS-Element auszuwählen
Es öffnet sich das Pop-up "Element auswählen"
Wähle das gewünschte CMS-Element aus (3)
Du hast nun das CMS-Element ausgetauscht.
ThemeWare® Spalten-Blöcke: Element austauschen
Aufgrund des fluiden Webdesigns von Shopware 6 gibt es keine "perfekte" oder "richtige" Bildgröße. Die Größe der einzelnen Elemente ist variabel und abhängig vom verfügbaren Platz den die Elemente haben. Der verfügbare Platz unterliegt diversen Faktoren wie dem konfigurierbaren Padding des Blocks, der konfigurierbaren Container-Breite, dem Darstellungsmodus der Erlebniswelt und natürlich durch die Fensterbreite selbst in verschiedenen Viewports bestimmt. Dadurch kann es nicht den einen Wert geben.
Wir empfehlen daher für Bild-Elemente in Spalten-Blöcken den Darstellungsmodus "Füllen". Dabei wird das Bild so skaliert und ggf. abgeschnitten, dass der Bild-Container immer vollständig ausgefüllt ist. Alternativ funktioniert auch der Darstellungsmodus "Strecken" recht gut, wenn alle Bilder einer Spalte die selbe Größe/Proportion haben.
In den Block-Einstellungen hast du die Möglichkeit CSS-Klasssen für den entsprechenden CMS-Block zu definieren.
Für die ThemeWare® Spalten-Blöcke sind folgende CSS-Klassen besonders interessant:
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Hinweis: Ohne "vertikale" und "horizontale" Ausrichtung werden die ThemeWare® Teaser auf die volle Höhe gestreckt. Dadurch kannst du für einzelne Elemente in asymmetrischen Grids (z.B. "Grid 'One'") auch von der oben genannten Rechnung abweichen und musst nicht auf eine identische Höhe beider Spalten achten.
Wichtig: Diese Blöcke sind nur in der ThemeWare® Pro Edition verfügbar.
Teaser-Block hinzufügen
CSS-Klassen
Designvarianten
15 Looks für deinen Shop
Von der modernen Allzweck-Variante bis zum dunklen Outdoor-Look — gib deinem Shop mit einem Klick einen komplett neuen Charakter. Fünf Varianten sind direkt im Theme enthalten, zehn weitere Designs lassen sich als monatliches Add-on freischalten. Inkl. Cards-, Boxed- oder Clean-Layouts, hellen und dunklen Themes.
Add-on-Varianten
Zehn zusätzliche Designvarianten, einzeln freischaltbar.
Inklusive Varianten
Fünf Varianten sind im Theme ohne Aufpreis enthalten.
Add-on-Varianten kosten je 14,99 € pro Monat, jederzeit kündbar. Der Kauf läuft über deinen Shopware-Account.
Aus jeder Variante lässt sich im Hub mit einem Klick ein Theme-Duplikat erzeugen, das im Look der gewählten Variante erscheint. Dein bisheriges Theme bleibt dabei unverändert.
Image-Slide (Hero-Slider)
Das ThemeWare® CMS-Element "Image-Slide (Hero-Slider)" ist explizit für die Verwendung im CMS-Block "Hero-Slider (...)" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.
Das ThemeWare® Hero-Slider CMS-Element "Image-Slide (Hero-Slider)" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Button-Teaser
Der ThemeWare® "Button-Teaser" ist unabhängig von seinem CMS-Block. Du kannst den Teaser auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
Den ThemeWare® "Button-Teaser" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Hero-Teaser
Die ThemeWare® "Hero-Teaser" ist unabhängig von ihrem CMS-Block. Du kannst sie auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
Den ThemeWare® "Hero-Teaser" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Text-Teaser
Der ThemeWare® "Text-Teaser" ist unabhängig von seinem CMS-Block. Du kannst den Teaser auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
Den ThemeWare® "Text-Teaser" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Text-Teaser (verziert)
Der ThemeWare® "Text-Teaser (verziert)" ist unabhängig von seinem CMS-Block. Du kannst den Teaser auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
Den ThemeWare® "Text-Teaser (verziert)" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Anzeige ausschalten (empfohlen): Im Theme-Manager findest du zu jedem Hintergrundbild eine Anzeigen/Nicht-Anzeigen-Option. Setze sie auf "nicht anzeigen" — das Bild verschwindet sofort, ohne dass du das Medium löschen musst.
Eigenes Bild hochladen: Einfach ein anderes Bild im Theme-Manager hinterlegen — das überschreibt den vererbten Werks-Hintergrund.
Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
Klicke auf das "Zahnrad"-Icon (3) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Image-Slide" konfigurieren
Die Konfiguration vom "Image-Slide" ist recht selbsterklärend. Das Bild ist ein Pflichtfeld. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Slides. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du allgemeine Einstellungen und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du den Eckenradius (border-radius) konfigurieren.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Elemente vom "Image-Slide"
Im Tab "Responsive" kannst du die Darstellung für mobile Viewports optimieren. Hier kannst du den Breakpoint für den Bild-Anzeigemodus konfigurieren.
Bild
Im Abschnitt "Bild" kann der Anzeigemodus des Bildes konfiguriert werden. Mit dem Breakpoint kannst du definieren, ab wann der Anzeigemodus des Bildes wechseln soll (z.B. von 'cover' auf 'contain'). So kannst du beispielsweise eine minimale Höhe in mobilen Viewports gewährleisten.
Im Tab "Slide" kannst du das Slide-Intervall (Anzeigedauer in Millisekunden) konfigurieren. Außerdem kannst du im Abschnitt "Zeitsteuerung" optional ein Startdatum und Enddatum festlegen um den Slide nur in einem bestimmten Zeitraum anzuzeigen.
Im Tab "SEO & Pagespeed" kannst du das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Slides über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Das Bild der Hero-Slides wird üblicherweise im Anzeigemodus 'contain' (1) dargestellt. Es skaliert, unter Beibehaltung des Seitenverhältnisses, auf die volle Breite des Slides.
Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Anzeigemodus zu 'cover' (2) wechseln soll. Im Anzeigemodus 'cover' musst du ergänzend die minimale Höhe (3) des Slides konfigurieren. Diese gibt dann die Höhe des Slides vor und das Bild füllt, unter Beibehaltung des Seitenverhältnisses, die angegebene Größe aus. Das Bild wird ggf. beschnitten (4) damit es passt.
Anzeigemodus 'contain'
Anzeigemodus 'cover'
Anzeigemodus 'cover' im Detail
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® "Image-Slide (Hero-Slider)"
Info: Dieser Artikel ist in Arbeit...
Hinweis: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Konfiguration
Allgemein
Layout
Responsive
Slide
Wichtig: Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Mehr Informationen dazu findest du hier:
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Button-Teaser" konfigurieren
Die Konfiguration vom "Button-Teaser" ist recht selbsterklärend. Der Button-Text und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Button-Text (2) eingeben. Der Button-Text ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du den Button (2) und den Hover-Effekt vom Content und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe (1) konfigurieren.
Button
Im Abschnitt "Button" kannst du den Button-Stil (die Farbe) konfigurieren und festlegen ob der Button (2) gefüllt oder als Outline-Button dargestellt werden soll.
Zudem kannst du die horizontale Ausrichtung und die vertikale Ausrichtung vom Button im Teaser konfigurieren.
Bild
Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Hover
Im Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt (=Button) auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Elemente vom "Button-Teaser"
Im Tab "SEO & Pagespeed" kannst du das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® "Button-Teaser"
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Konfiguration
Allgemein
Layout
SEO & Pagespeed
Erweitert
Hinweis: Bitte beachte, dass Theme-Variablen nicht in der Administration zur Verfügung stehen. Die Button-Farbe der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
Demo
Fahre mit der Maus über das entsprechende CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Hero-Teaser" konfigurieren
Die Konfiguration vom "Hero-Teaser" ist recht selbsterklärend. Der Text, das Bild und die "Minimale Höhe" sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du die Überschrift (2), den Text (3) und den Button-Text (4) für den Banner eingeben. Der Text ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild des Banners. Die "Minimale Höhe" ist ein Pflichtfeld (Standard: 340px).
Link
Im Abschnitt "Link" definierst du das Ziel des Banners wenn dieser angeklickt wird.
Im Tab "Layout" kannst du das Overlay (2), die Überschrift (3), die Text (4), den Button (5), das Scrollverhalten vom Bild (1), einen Parallax-Effekt und ein Farb-Overlay (1) konfigurieren. Zudem stehen dir Konfigurationen für die Ausrichtung des Text-Inhaltes zur Verfügung.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen.
Überschrift
Im Abschnitt "Überschrift" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe für die Überschrift (3) konfigurieren.
Text
Im Abschnitt "Text" kannst du die Schriftart, die Textfarbe, Linkfarben für den Text (4) konfigurieren.
Button
Im Abschnitt "Button" kannst du den Button-Stil (die Farbe) konfigurieren und festlegen ob der Button (5) gefüllt oder als Outline-Button dargestellt werden soll.
Bild
Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Content-Overlay
Im Abschnitt "Content-Overlay" kannst du die horizontale Ausrichtung und die vertikale Ausrichtung sowie die Breite (z.B. auto oder 90%) und die maximale Breite (z.B. 90% oder 740px) vom "Content-Overlay" konfigurieren.
Mit der Konfiguration "Overlay-Styling anwenden" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die Hintergrundfarbe festlegen, einen Hintergrund-Effekt, einen Schlagschatten und abgerundete Ecken auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay (1) aktiviert und konfiguriert werden.
Elemente vom "Hero-Teaser"
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
Bild - z.B. Kategoriebild oder Produktbild
Überschrift - z.B. Kategoriename oder Produktname
Text - z.B. Kategoriebeschreibung oder Produktbeschreibung
ThemeWare® "Hero-Teaser"
Hinweis: Dieser Artikel ist in Arbeit.
Beta: Diese Funktion befindet sich in der Beta-Phase und kann sich mit einem kommenden Release noch ändern. – Wir freuen uns über dein Feedback.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Konfiguration
Allgemein
Layout
SEO & Pagespeed
Erweitert
Datenzuordnung (folgt)
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Text-Teaser" konfigurieren
Die Konfiguration vom "Text-Teaser" ist recht selbsterklärend. Der Titel und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Titel (2) und Zwischentitel eingeben. Der Titel ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du den Titel (2) und den Hover-Effekt vom Content und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe (1) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen und einen Text-Schatten konfigurieren.
Titel
Im Abschnitt "Titel" kannst du die Schriftart, die Strichstärke, die Textformatierung und die Textfarbe vom Titel (2) konfigurieren.
Untertitel
Im Abschnitt "Untertitel" kannst du die Schriftart und die Textfarbe vom Untertitel konfigurieren.
Layout
Im Abschnitt "Layout" kannst du die horizontale Ausrichtung, die vertikale Ausrichtung und die maximale Breite (z.B. 90%) des Inhaltes (=Text) im Teaser konfigurieren.
Bild
Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Hover
Im Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt (Titel) auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Elemente vom "Text-Teaser"
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel bzw. den Untertitel sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
Bild - z.B. Kategoriebild oder Produktbild
Titel - z.B. Kategoriename oder Produktname
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® "Text-Teaser"
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Konfiguration
Allgemein
Layout
SEO & Pagespeed
Erweitert
Datenzuordnung (folgt)
Demo
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Text-Teaser (verziert)" konfigurieren
Die Konfiguration vom "Text-Teaser (verziert)" ist recht selbsterklärend. Der Titel und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Titel (2) eingeben. Der Titel ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du den Titel (2) und den Hover-Effekt vom Content und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe (1) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen.
Titel
Im Abschnitt "Titel" kannst du die Schriftart, die Textfarbe und die Hintergrundfarbe vom Titel (2) konfigurieren.
Layout
Im Abschnitt "Layout" kannst du die horizontale Ausrichtung, die vertikale Ausrichtung und die maximale Breite (z.B. 90%) des Inhaltes (=Text) im Teaser konfigurieren.
Bild
Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Hover
Im Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt (=Text) auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Elemente vom "Text-Teaser (verziert)"
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für den Titel sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
Bild - z.B. Kategoriebild oder Produktbild
Titel - z.B. Kategoriename oder Produktname
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® "Text-Teaser (verziert)"
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Konfiguration
Allgemein
Layout
SEO & Pagespeed
Erweitert
Datenzuordnung (folgt)
Demo
Modern
Klares, helles Design mit reduzierten Akzenten — moderner Allrounder für Lifestyle-Shops.
Clean
Aufgeräumt und reduziert — viel Weißraum für Mode, Beauty und Lifestyle.
Strong
Kräftige Akzente und prägnante Typografie — für selbstbewusste Marken.
Outdoor
Dunkles, robustes Design — für Outdoor-, Sport- und Reise-Shops.
Variante anlegen ist eine Einmal-Aktion
Das Anlegen einer Variante als Duplikat ist ein Einmal-Vorgang. Da Shopware aktuell nur Abo-Modelle erlaubt (keine Einmalkäufe), läuft die Freischaltung als monatliches Abo. Wenn du deine Variante angelegt hast, kannst du das Abo in deinem Shopware-Account jederzeit kündigen — das angelegte Duplikat bleibt in deinem Shop bestehen.
Der ThemeWare® "Call-to-Action" ist unabhängig von seinem CMS-Block. Du kannst ihn auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
ThemeWare® "Call-to-Action"
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Den ThemeWare® "Call-to-Action"-Teaser kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
Die Konfiguration vom "Call-to-Action" ist recht selbsterklärend. Der Text, der Button-Text und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du die Überschrift (3), den Text (4) und den Button-Text (5) für den Teaser eingeben. Der Text und der Button-Text sind Pflichtfelder.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du das Overlay (2), den Text (3, 4) im Overlay, den Hover-Effekt vom Content und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe (1) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen.
Überschrift
Im Abschnitt "Überschrift" kannst du die Schriftart und Textfarbe für die Überschrift (3) konfigurieren.
Text
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Hover-Box
Die ThemeWare® "Hover-Box" ist unabhängig von ihrem CMS-Block. Du kannst sie auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
ThemeWare® "Hover-Box"
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Die ThemeWare® "Hover-Box" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
Die Konfiguration der "Hover-Box" ist recht selbsterklärend. Der Text und das Bild sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Content (Inhalt)
Im Abschnitt "Content" kannst du die Überschrift (3) und den Text (4) für den Teaser eingeben. Der Text ist ein Pflichtfeld.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Teasers. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du das Overlay (2), den Text (3, 4) im Overlay, und den Hover-Effekt vom Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe (1) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" kannst du die gewünschte Textausrichtung auswählen.
Überschrift
Im Abschnitt "Überschrift" kannst du die Schriftart und Textfarbe für die Überschrift (3) konfigurieren.
Text
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Auf Kategorie- und Produktseiten können folgende Felder per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
Bild - z.B. Kategoriebild oder Produktbild
Überschrift - z.B. Kategoriename oder Produktname
Text - z.B. Kategoriebeschreibung oder Produktbeschreibung
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Image-Teaser
Die ThemeWare® "Image-Teaser" ist unabhängig von ihrem CMS-Block. Du kannst sie auch in anderen CMS-Blöcken verwenden. Teste einfach unterschiedliche Blöcke (beispielsweise mit einer unterschiedlichen Spaltenanzahl) aus um deine Erlebniswelt individueller zu gestalten.
ThemeWare® "Image-Teaser"
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Element konfigurieren
Den ThemeWare® "Image-Teaser" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (2) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
Die Konfiguration vom "Image-Teaser" ist recht selbsterklärend. Das Bild ist ein Pflichtfeld. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild des Teasers. Dies ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du das Bild und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du die allgemeine Hintergrundfarbe konfigurieren.
Bild
Im Abschnitt "Bild" kann ein Bild-Effekt (siehe ) ausgewählt und festgelegt werden, wann der Bild-Effekt (sofern der Teaser verlinkt wurde) angewendet werden soll.
Du kannst außerdem die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein
Im Tab "SEO & Pagespeed" kannst du das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Teaser über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Derzeit stehen dir 7 verschiedene Bild-Effekte (siehe Screenshots unten) zur Verfügung:
Weichzeichnen
Helligkeit
Kontrast
Auf Kategorie- und Produktseiten kann folgendes Feld per Datenzuordnung dynamisch aus der aktuellen Kategorie bzw. dem aktuellen Produkt übernommen werden:
Bild - z.B. Kategoriebild oder Produktbild
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
Text-Slide (Hero-Slider)
Das ThemeWare® CMS-Element "Text-Slide (Hero-Slider)" ist explizit für die Verwendung im CMS-Block "Hero-Slider (...)" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.
Das ThemeWare® Hero-Slider CMS-Element "Text (Hero-Slider)" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Datenzuordnung
Mit der Datenzuordnung kannst du Felder eines CMS-Elements dynamisch mit Daten der aktuellen Seiten-Entität (z.B. Kategorie) befüllen. So zeigt z.B. ein Teaser auf einer Kategorieseite automatisch das Kategoriebild und den Kategorienamen an - ohne manuelle Eingabe.
Öffne die Erlebniswelt einer Kategorieseite im CMS-Editor
Füge ein unterstütztes CMS-Element ein (z.B. einen Teaser)
Im Abschnitt "Text" kannst du die Schriftart und Textfarbe sowohl für den Text (4) konfigurieren.
Button
Im Abschnitt "Button" kannst du den Button-Stil (die Farbe) konfigurieren und festlegen ob der Button (5) gefüllt oder als Outline-Button dargestellt werden soll.
Bild
Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Content-Overlay
Im Abschnitt "Content-Overlay" konfigurierst du, wie der Name schon sagt, das Overlay (2). Hier kannst du die horizontale Ausrichtung und die vertikale Ausrichtung vom Overlay konfigurieren. Zudem kannst du die Breite (z.B. auto oder 90%) und die maximale Breite (z.B. 90% oder 740px) für das Overlay festlegen.
Mit der Konfiguration "Overlay-Styling anwenden" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die Hintergrundfarbe festlegen, einen Hintergrund-Effekt, einen Schlagschatten und abgerundete Ecken auswählen.
Hover
Im Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt (=Text) auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
ThemeWare® "Call-to-Action" konfigurieren
Elemente vom "Call-to-Action"
Konfiguration
Allgemein
Hinweis: Das Textfeld ist HTML-fähig. Links <a> sollten allerdings nicht verwendet werden, da dies die eigentliche Verlinkung des Elementes stört.
Layout
SEO & Pagespeed
Erweitert
Hinweis: Bitte beachte, dass Theme-Variablen nicht in der Administration zur Verfügung stehen. Die Button-Farbe der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
Demo
Im Abschnitt "Text" kannst du die Schriftart und Textfarbe sowohl für den Text (4) konfigurieren.
Layout
Im Abschnitt "Layout" kannst du die horizontale Ausrichtung und vertikale Ausrichtung des Textes konfigurieren.
Bild
Im Abschnitt "Bild" kannst die gewünschte horizontale Positionierung des Bildes im Anzeigemodus 'Cover' auswählen.
Content-Overlay
Im Abschnitt "Content-Overlay" konfigurierst du, wie der Name schon sagt, das Overlay (2) der Hover-Box. Hier kannst du die Hintergrundfarbe vom Overlay konfigurieren.
Hover
Im Abschnitt "Hover" kannst du einen Hover-Effekt für den Inhalt bzw. das Overlay auswählen. Mit der Option Hover-Verhalten umkehren kannst du das Hover-Verhalten invertieren, sodass das Overlay standardmäßig angezeigt und beim Hover ausgeblendet wird.
ThemeWare® "Hover-Box" konfigurieren
Elemente der "Hover-Box"
Konfiguration
Allgemein
Hinweis: Das Textfeld ist HTML-fähig. Links <a> sollten allerdings nicht verwendet werden, da dies die eigentliche Verlinkung des Elementes stört.
Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
Klicke auf das "Zahnrad"-Icon (3) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Text-Slide" konfigurieren
Die Konfiguration vom "Text-Slide" ist recht selbsterklärend. Das Bild und der Text sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Slides. Dies ist ein Pflichtfeld.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Teaser-Text, die Überschrift (3) und den Text (4) für den Slide eingeben. Der Text ist ein Pflichtfeld.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du allgemeine Einstellungen, das Overlay (2), den Text (3, 4, 5) im Overlay und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du das Padding (Innenabstand) und den Eckenradius (border-radius) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" können Sie die Textausrichtung und den Textschatten konfigurieren.
Teaser
Im Abschnitt "Teaser" kannst du die Schriftart und Textfarbe vom Teaser (3) konfigurieren.
Überschrift
Im Abschnitt "Überschrift" kannst du die Schriftart und Textfarbe der Überschrift (4) konfigurieren.
Text
Im Abschnitt "Text" kannst du die Schriftart und Textfarbe vom Text (5) konfigurieren.
Content-Overlay
Im Abschnitt "Content-Overlay" konfigurierst du das Overlay (2). Hier kannst du die horizontale Ausrichtung und die vertikale Ausrichtung vom Overlay konfigurieren. Zudem kannst du eine Einblend-Animation auswählen und die Breite (z.B. 100%) sowie die maximale Breite (z.B. 50%) für das Overlay festlegen. Außerdem kannst du die Overlay-Größe konfigurieren und einen Hintergrund-Effekt (z.B. Blur) auswählen.
Mit der Konfiguration "Overlay-Styling anwenden" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die Hintergrundfarbe festlegen, einen Schlagschatten und abgerundete Ecken auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Elemente vom "Text-Slide"
Im Tab "Responsive" kannst du die Darstellung für mobile Viewports optimieren. Hier kannst du Breakpoints für den Bild-Anzeigemodus und das Text-Overlay konfigurieren.
Bild
Im Abschnitt "Bild" kann der Anzeigemodus des Bildes konfiguriert werden. Mit dem Breakpoint kannst du definieren, ab wann der Anzeigemodus des Bildes wechseln soll (z.B. von 'cover' auf 'contain'). So kannst du beispielsweise eine minimale Höhe in mobilen Viewports gewährleisten.
Text
Im Abschnitt "Text" kann der Breakpoint für den Text konfiguriert werden. Ab diesem Breakpoint überlagert der Text das Bild. Außerdem kannst du eine Hintergrundfarbe für den Textbereich konfigurieren, die angezeigt wird wenn der Text unterhalb des Bildes dargestellt wird.
Im Tab "Slide" kannst du das Slide-Intervall (Anzeigedauer in Millisekunden) konfigurieren. Außerdem kannst du im Abschnitt "Zeitsteuerung" optional ein Startdatum und Enddatum festlegen um den Slide nur in einem bestimmten Zeitraum anzuzeigen.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für die Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Slides über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Das Bild der Hero-Slides wird üblicherweise im Anzeigemodus 'contain' (1) dargestellt. Es skaliert, unter Beibehaltung des Seitenverhältnisses, auf die volle Breite des Slides.
Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Anzeigemodus zu 'cover' (2) wechseln soll. Im Anzeigemodus 'cover' musst du ergänzend die minimale Höhe (3) des Slides konfigurieren. Diese gibt dann die Höhe des Slides vor und das Bild füllt, unter Beibehaltung des Seitenverhältnisses, die angegebene Größe aus. Das Bild wird ggf. beschnitten (4) damit es passt.
Anzeigemodus 'contain'
Anzeigemodus 'cover'
Anzeigemodus 'cover' im Detail
Der Text in den Hero-Slides überlagert üblicherweise das Bild. In kleineren Viewports kann dies, insbesondere bei langen Texten, nicht mehr perfekt passen, daher wird der Text auf mobilen Geräten unterhalb des Bildes dargestellt.
Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Text das Bild überlagern soll.
Text unter dem Bild
Text überlagert das Bild
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® "Text-Slide (Hero-Slider)"
Info: Dieser Artikel ist in Arbeit...
Hinweis: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Hinweis: Das Textfeld ist HTML-fähig. Links <a> sollten allerdings nicht verwendet werden wenn das "Gesamte Element anklickbar" ist, da dies die eigentliche Verlinkung des Slides stört.
Konfiguration
Allgemein
Hinweis: Das Textfeld ist HTML-fähig. Links <a> sollten allerdings nicht verwendet werden wenn das "Gesamte Element anklickbar" ist, da dies die eigentliche Verlinkung des Slides stört.
Layout
Responsive
Slide
Wichtig: Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Mehr Informationen dazu findest du hier:
SEO & Pagespeed
Erweitert
Breakpoint
Bild
Text
Demo
Klicke in der Element-Konfiguration beim gewünschten Feld auf den Button "Datenzuordnung" (1)
Wähle die gewünschte Entitäts-Eigenschaft aus (2 – z.B. category.name für den Kategorienamen)
Speichere die Erlebniswelt
Das Feld wird nun auf jeder Kategorieseite automatisch mit den Daten der jeweiligen Kategorie befüllt.
Wurden Daten zugewiesen, wird anstelle der Konfiguration ein entsprechender Hinweis (3) in der Element-Konfiguration angezeigt.
Über den Button "Datenzuordnung entfernen" (4) kannst du die Zuweisung jederzeit wieder aufheben.
Die Datenzuordnung haben wir in möglichst vielen CMS-Elementen verfügbar gemacht. Ausgenommen sind nur die Elemente, die ohnehin eindeutig verlinkt werden müssen und bei denen eine dynamische Datenzuordnung deshalb keinen echten Mehrwert bringt.
Dazu kommen noch ein paar Grenzfälle – zum Beispiel Teaser mit Buttons oder Banner, die grundsätzlich verlinkt sein sollten. Hier möchten wir euch bewusst etwas Spielraum lassen: Nicht jedes Element muss die Datenzuordnung nutzen, wenn sie im jeweiligen Fall einfach keinen Sinn ergibt.
CMS-Element
Bild
Überschrift/Titel
Text
Advanced-Teaser
x
x
x
Classic-Teaser
CMS-Element
Bild
Überschrift/Titel
Text
Advanced-Banner
x
x
x
Hero-Banner
CMS-Element
Bild
Überschrift/Titel
Text
Bild & Text überlagernd
x
x
x
Die Datenzuordnung funktioniert nur auf Seiten mit einer zugewiesenen Entität (z.B. Kategorie- oder Produktseiten)
Auf statischen Erlebniswelten (z.B. Landingpages) steht keine Entität zur Verfügung - die Felder bleiben leer
Felder mit aktiver Datenzuordnung können nicht gleichzeitig manuell befüllt werden
Der "Datenzuordnung"-Button ist nur sichtbar, wenn die Erlebniswelt einem Seitentyp mit Entität zugewiesen ist (z.B. Kategorie- oder Produktseiten)
Wichtig: Diese Funktion ist nur in der ThemeWare® Pro Edition verfügbar.
Anleitung
Datenzuordnung zuweisen
Tipp: Du kannst in dem Dropdown auch Zusatzfelder (abhängig vom CMS-Layout-Typ) auswählen.
Datenzuordnung entfernen
Unterstützte Elemente und Felder
Teaser
Banner
Sonstiges
Neben den Standard-Eigenschaften (z.B. product.name oder category.media) kannst du auch ThemeWare® Zusatzfelder per Datenzuordnung mappen. So lässt sich z.B. die Kurzbeschreibung statt der Standard-Produktbeschreibung verwenden.
In diesem Bereich der Dokumentation findest du alle ThemeWare® CMS-Elemente die du CMS-Blöcken hinzufügen kannst.
ThemeWare® CMS-Elemente
Mit ThemeWare® erhältst du eine umfangreiche und wachsende Auswahl an CMS-Elementen um deinen Shop zu individualisieren. Die ThemeWare® CMS-Elemente sind ab Version 0.5.0 in der Pro-Edition verfügbar.
Weitere Elemente sind bereits in Arbeit und folgen bald. Sei gespannt!
Tipp: Wenn du weitere Ideen oder Wünsche zu bestehenden oder neuen Elementen hast, sende uns gerne über unser Service Portal.
Wichtig: CMS-Elemente sind in der Shopware Cloud derzeit grundsätzlich leider nicht möglich! Die ThemeWare® Cloud-Edition enthält daher derzeit keine CMS-Elemente.
ThemeWare® CMS-Element hinzufügen
Um ein CMS-Element platzieren zu können brauchst du einen geeigneten CMS-Block in deiner Erlebniswelt. Diesem CMS-Block kannst du dann ein CMS-Element zuweisen. Mehr dazu erfährst du im Abschnitt CMS-Blöcke.
ThemeWare® CMS-Element austauschen
Fahre mit der Maus über den CMS-Block
Klicke auf auf das "Austauschen"-Icon (1)
Es öffnet sich das Pop-up "Element auswählen"
Wähle hier das gewünschte CMS-Element aus (2)
Klicke auf den entsprechenden CMS-Block um den Bearbeitungsmodus zu aktivieren
Fahre mit der Maus über das gewünschte CMS-Element
Klicke auf das "Zahnrad"-Icon (1) um das CMS-Element zu konfigurieren
Viele CMS-Elemente von ThemeWare® sind ähnlich aufgebaut. Sie bestehen aus verschiedenen "Schichten".
Die unterste Ebene ist dabei oftmals das Bild bzw. Hintergrundbild (1). Darüber kann oftmals ein "Farb-Overlay" (2) gelegt werden. Diese vollflächige Farbfläche überlagert das Bild darunter. Noch eine Ebene darüber befindet sich das "Content-Overlay" (3) bzw. in denglisch ausgedrückt "Inhalts-Overlay". Der "Content" ist der eigentliche Inhalt, also der Text bzw. die Beschriftung des Elements.
Auch in der Konfiguration von CMS-Elementen gibt es Gemeinsamkeiten. Nachfolgend findest du Einstellungen die in vielen CMS-Elementen zu finden sind:
In vielen CMS-Elementen findest du den Tab "SEO & Pagespeed". Hier kannst du den HTML-Tag (p, h1, h2, ...) von Überschriften definieren und damit die HTML-Hierarchie deiner Erlebniswelten optimieren.
Im Abschnitt "Pagespeed" hast du die Möglichkeit das "Lazy Loading" des Bildes zu konfigurieren.
eager – Weist den Browser an, das Bild bevorzugt zu laden. Das wird vor allem bei Bildern "above the fold" (innerhalb des Sichtbereichs) eingesetzt.
lazy – Weist den Browser an, das Bild erst zu laden, wenn sich der Benutzer dem Bild beim Scrollen nähert. Das wird vor allem bei Bildern "below the fold" (außerhalb des Sichtbereichs) eingesetzt.
Einige CMS-Elemente verfügen über einen "Advanced Mode" (Erweiterter Modus). Dieser wird über einen Schalter in der Element-Konfiguration aktiviert und blendet zusätzliche Konfigurationsfelder ein, die im Standardmodus ausgeblendet sind.
Dazu gehören je nach Element z.B.:
Padding (Innenabstand) des Elementes
Eckenradius (Border-Radius) des Elementes
In vielen CMS-Elementen findest du den Tab "Erweitert". Hier kannst du CSS-Klassen konfigurieren und Experten-Einstellungen nutzen.
Du kannst zwar jedes HTML-Element in einem CMS-Element über passende CSS-Klassen selektieren, falls du hingegen eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Im Abschnitt "CSS-Klassen" kannst du verschiedenen Komponenten in einem CMS-Element eigene CSS-Klassen hinzufügen. Trenne mehrere CSS-Klassen jeweils mit einem Leerzeichen.
In einigen CMS-Elementen findest du im Tab "Erweitert" den Abschnitt "Experten-Einstellungen".
Diese Einstellungen richten sich an Experten die sich mit CMS-Blöcken, CMS-Elementen und dem Bootstrap Grid-System sehr gut auskennen!
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. 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:
Möchtest du eine alternative Sprache in einem CMS-Element konfigurieren, kannst du oben rechts im Editor der entsprechenden Erlebniswelt einfach die Sprache wechseln.
Weitere Informationen und Grundlagen zum Thema "Shopware 6 Erlebniswelten" und "CMS-Elementen" findest du in der ThemeWare® Wissensdatenbank:
Das ThemeWare® CMS-Element "Call-to-Action-Slide (Hero-Slider)" ist explizit für die Verwendung im CMS-Block "Hero-Slider (...)" vorgesehen. Das CMS-Element ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und funktioniert nicht in anderen CMS-Blöcken.
Das ThemeWare® Hero-Slider CMS-Element "Call-to-Action (Hero-Slider)" kannst du wie folgt konfigurieren:
Klicke auf den entsprechenden CMS-Block (1) um den Bearbeitungsmodus zu aktivieren
Tipp: Achte darauf, dass alle Pflichtfelder "*" befüllt sind, sonst kannst du die Erlebniswelt nicht speichern. ThemeWare® zeigt dir alle Pflichtfelder mit einem kleinen blauen Sternchen hinter dem Feldnamen an.
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 HTML Sanitzer)
Allgemeines
SEO- & Pagespeed-Einstellungen
Tipp: Den "Alt-Text" und das "Title"-Attribut von Bildern kannst du in Shopware 6 in der Meidenverwaltung definieren.
Pagespeed
Advanced Mode
Hinweis: Die zusätzlichen Felder im Advanced Mode richten sich an Nutzer die mehr Kontrolle über das Erscheinungsbild eines CMS-Elementes haben möchten.
Erweiterte Einstellungen
CSS-Klassen
Experten-Einstellungen
Hinweis: Mehr Informationen wie du diese nutzen kannst, erfährst du in der ThemeWare® Wissensdatenbank im Bereich "Profiwissen".
CMS-Element individuell stylen
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.
Mehrsprachigkeit
Weiterführende Informationen
Navigiere mit der Pfeil-Navigation (2) zum gewünschten CMS-Element
Klicke auf das "Zahnrad"-Icon (3) um das CMS-Element zu konfigurieren
Es öffnet sich das Pop-up "Element-Einstellungen"
Nehme die gewünschten Änderungen vor
Speichere deine Änderungen
Du hast das CMS-Element nun konfiguriert.
ThemeWare® "Call-to-Action-Slide" konfigurieren
Die Konfiguration vom "Call-to-Action-Slide" ist recht selbsterklärend. Das Bild, der Text und der Button-Text sind Pflichtfelder. Mehr brauchst du genau genommen nicht konfigurieren.
Im Tab "Allgemein" konfigurierst du den Content des Elementes.
Bild
Im Abschnitt "Bild" definierst du das Hintergrundbild (1) des Slides. Dies ist ein Pflichtfeld.
Content (Inhalt)
Im Abschnitt "Content" kannst du den Teaser-Text (3), die Überschrift (4), den Text (5) und den Button-Text (6) für den Slide eingeben. Der Text und der Button-Text sind Pflichtfelder.
Link
Im Abschnitt "Link" definierst du das Ziel des Teasers wenn dieser angeklickt wird.
Im Tab "Layout" kannst du allgemeine Einstellungen, das Overlay (2), den Text (3, 4, 5) im Overlay, den Button (6) und ein Farb-Overlay konfigurieren.
Allgemein
Im Abschnitt "Allgemein" kannst du das Padding (Innenabstand) und den Eckenradius (border-radius) konfigurieren.
Content (Inhalt)
Im Abschnitt "Content" können Sie die Textausrichtung und den Textschatten konfigurieren.
Teaser
Im Abschnitt "Teaser" kannst du die Schriftart und Textfarbe vom Teaser (3) konfigurieren.
Überschrift
Im Abschnitt "Überschrift" kannst du die Schriftart und Textfarbe der Überschrift (4) konfigurieren.
Text
Im Abschnitt "Text" kannst du die Schriftart und Textfarbe vom Text (5) konfigurieren.
Button
Im Abschnitt "Button" kannst du den Button-Stil (die Farbe) konfigurieren und festlegen ob der Button (6) gefüllt oder als Outline-Button dargestellt werden soll.
Content-Overlay
Im Abschnitt "Content-Overlay" konfigurierst du das Overlay (2). Hier kannst du die horizontale Ausrichtung und die vertikale Ausrichtung vom Overlay konfigurieren. Zudem kannst du eine Einblend-Animation auswählen und die Breite (z.B. 100%) sowie die maximale Breite (z.B. 50%) für das Overlay festlegen. Außerdem kannst du die Overlay-Größe konfigurieren und einen Hintergrund-Effekt (z.B. Blur) auswählen.
Mit der Konfiguration "Overlay-Styling anwenden" kannst du Konfigurationsfelder zum gestalten des Overlays aktivieren. Hier kannst du die Hintergrundfarbe festlegen, einen Schlagschatten und abgerundete Ecken auswählen.
Farb-Overlay
Im Abschnitt "Farb-Overlay" kann ein Farb-Overlay aktiviert und konfiguriert werden.
Elemente vom "Call-to-Action-Slide"
Im Tab "Responsive" kannst du die Darstellung für mobile Viewports optimieren. Hier kannst du Breakpoints für den Bild-Anzeigemodus und das Text-Overlay konfigurieren.
Bild
Im Abschnitt "Bild" kann der Anzeigemodus des Bildes konfiguriert werden. Mit dem Breakpoint kannst du definieren, ab wann der Anzeigemodus des Bildes wechseln soll (z.B. von 'cover' auf 'contain'). So kannst du beispielsweise eine minimale Höhe in mobilen Viewports gewährleisten.
Text
Im Abschnitt "Text" kann der Breakpoint für den Text konfiguriert werden. Ab diesem Breakpoint überlagert der Text das Bild. Außerdem kannst du eine Hintergrundfarbe für den Textbereich konfigurieren, die angezeigt wird wenn der Text unterhalb des Bildes dargestellt wird.
Im Tab "Slide" kannst du das Slide-Intervall (Anzeigedauer in Millisekunden) konfigurieren. Außerdem kannst du im Abschnitt "Zeitsteuerung" optional ein Startdatum und Enddatum festlegen um den Slide nur in einem bestimmten Zeitraum anzuzeigen.
Im Tab "SEO & Pagespeed" kannst du den HTML-Tag für der Überschrift sowie das "Lazy Loading" vom Bild konfigurieren.
Du kannst zwar jedes HTML-Element unserer Slides über passende CSS-Klassen selektieren, falls du eigene CSS-Klassen nutzen möchtest, kannst du diese im Tab "Erweitert" einfügen.
Das Bild der Hero-Slides wird üblicherweise im Anzeigemodus 'contain' (1) dargestellt. Es skaliert, unter Beibehaltung des Seitenverhältnisses, auf die volle Breite des Slides.
Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Anzeigemodus zu 'cover' (2) wechseln soll. Im Anzeigemodus 'cover' musst du ergänzend die minimale Höhe (3) des Slides konfigurieren. Diese gibt dann die Höhe des Slides vor und das Bild füllt, unter Beibehaltung des Seitenverhältnisses, die angegebene Größe aus. Das Bild wird ggf. beschnitten (4) damit es passt.
Anzeigemodus 'contain'
Anzeigemodus 'cover'
Anzeigemodus 'cover' im Detail
Der Text in den Hero-Slides überlagert üblicherweise das Bild. In kleineren Viewports kann dies, insbesondere bei langen Texten, nicht mehr perfekt passen, daher wird der Text auf mobilen Geräten unterhalb des Bildes dargestellt.
Ab ThemeWare® 2.1 hast du die Möglichkeit selber zu definieren ob und wenn ja ab welchem Viewport der Text das Bild überlagern soll.
Text unter dem Bild
Text überlagert das Bild
Anwendungsbeispiele findest du in den ThemeWare® Demoshops:
ThemeWare® "Call-to-Action-Slide (Hero-Slider)"
Info: Dieser Artikel ist in Arbeit...
Hinweis: Das Element ist explizit für die Verwendung in seinem eigenen CMS-Block vorgesehen. Es ist nicht für die Nutzung in anderen CMS-Blöcken ausgelegt und lässt sich daher nicht austauschen bzw. in anderen Blöcken platzieren.
Wichtig: Dieses Element ist nur in der ThemeWare® Pro Edition verfügbar.
Hinweis: Das Textfeld ist HTML-fähig. Links <a> sollten allerdings nicht verwendet werden wenn das "Gesamte Element anklickbar" ist, da dies die eigentliche Verlinkung des Slides stört.
Layout
Hinweis: Bitte beachte, dass die Theme-Variablen nicht in der Administration zur Verfügung stehen. Die Button-Farbe der Vorschau wird in der Storefront durch die entsprechenden Theme-Farbe ersetzt.
Responsive
Slide
Wichtig: Das "automatische Abspielen" (autoplay) ist aufgrund von Bedenken hinsichtlich der Barrierefreiheit (ab Version 3.7 bzw. 4.0) deaktiviert. Mehr Informationen dazu findest du hier:
