# Shopware 5 - Themes Doku Neben FAQ findest Du hier zu jedem Theme eine Dokumentation. ![](/files/-MZWJhy6yUDJweENfpEq) # Installation Grundsätzlich werden Themes genau so installiert wie andere Plugins aus dem Community Store. Dazu sind nur sehr wenige Schritte notwendig: 1. Öffne den Plugin-Manager unter *Einstellungen > Plugin-Manager* 2. Unter *Käufe* erscheint nun das gekaufte Plugin / Theme 3. Theme-Plugin installieren und aktivieren 4. Unter *Einstellungen > Theme-Manager* erscheint nun das neu installierte Theme 5. *Theme bearbeiten* anklicken und am besten mit einer der Theme-Vorlagen mit der Individualisierung beginnen. ## Optional - Erweitertes Menü aktivieren: 1. Öffne den Plugin-Manager unter *Einstellungen > Plugin-Manager* 2. Unter *Installiert* ist das Shopware Standard Plugin "Erweitertes Menü" gelistet 3. Aktiviere das Shopware Standard Plugin "Erweitertes Menü" für die Anzeige des Dropdown Menüs. ## Optional - Ableitung erstellen: Durch eine Ableitung des Themes über ein sogenanntes Child-Theme können Themes später auch über die Möglichkeiten der Konfiguration hinaus verändert werden. Solltest Du also die Absicht haben, später gewisse Teile des Themes updatesicher umzuprogrammieren, lege Dir ein Child-Theme an, in welchem die Konfiguration und mögliche Programmierungen updatesicher gemacht werden können. 1. Öffne den Theme Manager über *Einstellungen > Theme Manager* 2. Klicke auf die Schaltfläche "Theme erstellen" 3. Wähle bei "Ableiten von" das soeben installierte Theme aus 4. Vergebe einen individuellen Namen sowie eine Kurzbeschreibung für das Theme 5. Speichern und Theme zuweisen Weiterführend kann Dir die Dokumentation im Store weiterhelfen: # Erste Schritte Nachdem Du das Theme installiert hast, findest Du es im Theme-Manager unter *Einstellungen > Theme-Manager*. Damit Du es beim Gestalten einfacher hast, haben wir Vorlagen programmiert, welche Du als Grundlage Deines Designs verwenden kannst. Unter *Theme-Konfigurieren > Konfigurations-Vorlagen* findest Du einige **Vorlagen-Sets** mit denen das Bearbeiten des Themes leichter fällt. Dort findest Du auch die Vorlagen der Demos und kannst diese einfach verwenden und nach deinen Wünschen anpassen. Am besten wählst Du die Vorlage, die deinen Wünschen am nähesten kommt. Eine bebilderte Übersicht der verschiedenen Vorlagen findest Du hier: [Konfigurations Vorlagen](https://themes.zenitdesign.de) ![Beispiel: Auswahl von Konfigurationsvorlagen](/files/-MNyno8PCDJpEB1P__La) # Erweitertes Menü Beim Überfahren mit der Maus ist Dir sicher in unserer Demo schon das große Menü aufgefallen, welches die Unterkategorien Deines Shops, sowie das Kategorienbild und den Teaser Text der Kategorie darstellt. Hinter dieser Funktion zum Ausklappen der Kategorien in der Hauptnavigation verbirgt sich das Plugin "Erweitertes Menü" von Shopware. Das Plugin wird im Standard mit ausgeliefert und muss nur über den Plugin-Manager installiert und aktiviert werden. Navigiere zum Aktivieren des Plugins über Einstellungen > Plugin Manager und suche das Plugin aus der Liste der deinstallierten Plugins heraus. Durch Klicken auf das grüne Plus Symbol kannst Du dieses installieren und aktivieren. ![](/files/-MNyots7R221J5apacv1) Folgende Einstellungsmöglichkeiten findest Du im Plugin: * **Menü anzeigen (Ja/Nein):** Mit dieser Option kannst Du definieren, ob das Menü aufklappbar sein soll oder nicht. Dies kannst Du für jeden Subshop individuell einstellen. * **Anzahl Ebenen:** Hier kannst Du die Anzahl der angezeigten Ebenen im Erweiterten Menü angeben, wir empfehlen, nicht mehr als 3 Ebenen anzuzeigen. * **Caching aktivieren (Ja/Nein):** Bei aktiviertem Caching werden die Inhalte des Aufklapp-Menüs aus dem Cache geholt, anstatt live aus der Datenbank, was weniger Datenbankabfragen zur Folge hat. * **Cachezeit:** (Standard 86400 = 24h) Bei aktiviertem Caching wird der Datei-Cache für den jeweils gewählten Zeitraum im Cache gehalten. * **Breite des Teasers (0%/25%/50%/75%/100%):** Gibt die Breite des Teasers, also des Kategoriebildes an. Im Standard wird hier 50% verwendet. # Bildgrößen im Listing Das Theme unterstützt größere Bilder im Listing als das Responsive Theme von Shopware. Bilder werden in Shopware automatisch beim Upload berechnet und in verschiedenen Größen auf dem Server abgelegt. Diese Bildgrößen lassen sich in der Medienverwaltung bearbeiten. Öffne dazu unter *Inhalte > Medienverwaltung* den Medienmanager. Im Ordner "Artikel" liegen die Artikelbilder vor. Durch Klicken auf das Zahnrad kannst Du die Albumeinstellungen vornehmen: ![](/files/-MNypY3w9JoCJztyyKld) Stelle dazu die Größe für die kleinsten Thumbnails (Index 0) auf **300x300** um. Beachte, dass danach die Bilder neu berechnet werden müssen. Je nach Serverleistung und Artikelanzahl kann das sehr unterschiedlich viel Zeit in Anspruch nehmen. Führe dies daher nur durch, wenn kein sehr hohes Kundenaufkommen im Frontend zu erwarten ist. Eine Übersicht der Medienverwaltung und der Standard-Thumbnailgrößen findest Du hier:\ # Probleme beim Kompilieren Gelegentlich kann es vorkommen, dass Du eine Einstellung im Theme oder einem anderen Plugin verändert hast und es beim Speichern / Kompilieren daraufhin ein Fehler geworfen wird. Häufig sind die Fehlermeldungen von Shopware nicht verständlich und die Suche nach dem Fehler beginnt. Wir möchten Dir hier eine kleine Hilfestellung geben um häufige Fehlerquellen schneller aufzuspüren. ## Häufige Ursachen sind: 1. Du hast eine Variable falsch geschrieben 2. Du hast eine Variable verwendet, welche es nicht gibt 3. Du hast durch Sonderzeichen o.Ä. einen Syntaxfehler provoziert ### Was kannst Du tun? * [ ] Überlege was zuletzt im Shop geändert wurde. Hast du vll. ein neues Plugin hinzugefügt? * [ ] Versuche das Responsive Theme zuzuweisen: 1. Wird das **Responsive Theme gespeichert und erfolgreich kompiliert**, liegt der Fehler in der Theme Konfiguration des zuvor eingesetzten Themes oder Child-Themes. 1. Überprüfe dann nochmals alle Felder auf ihre Richtigkeit 2. Oder lade ein anderes oder das gleiche Vorlagen-Set und mach deine Bearbeitungen erneut (sichere dir Deine Einstellungen mit Screenshots) 2. Wird das **Responsive Themes gespeichert aber der Kompiler wirft einen Fehler**, liegt das Problem in der Konfiguration eines Plugins. 1. Deaktiviere nach und nach Plugins und kompiliere das Theme immer wieder, bis das Plugin mit der fehlerhaften Konfiguration gefunden wurde {% hint style="warning" %} **Immer in kleinen Schritten arbeiten - nicht zu viele Änderungen auf einmal durchführen.** Lieber nur wenige Veränderungen durchführen und zwischendurch immer wieder durch Speichern des Themes kompilieren. So kannst Du die Ursache leichter nachverfolgen, sollte eine Deiner Änderungen zu einem Fehler geführt haben. {% endhint %} # Child Theme Das Theme kann, genau wie das Responsive Theme, als Ausgangslage eines eigenen Themes genutzt werden. Dazu kannst Du die Schritte zum Anlegen eines eigenen Themes direkt bei Shopware in der Doku unter nachlesen. Durch eine Ableitung des Themes über ein sogenanntes Child-Theme können Themes später auch über die Möglichkeiten der Konfiguration hinaus verändert werden. Solltest Du also die Absicht haben, später gewisse Teile des Themes updatesicher umzuprogrammieren, lege Dir ein Child-Theme an, in welchem die Konfiguration und mögliche Programmierungen updatesicher gemacht werden können. 1. Öffne den Theme Manager über *Einstellungen > Theme Manager* 2. Klicke auf die Schaltfläche "Theme erstellen" 3. Wähle bei "Ableiten von" das soeben installierte Theme aus 4. Vergebe einen individuellen Namen sowie eine Kurzbeschreibung für das Theme 5. Speichern und Theme zuweisen # Konfiguration exportieren / importieren In Shopware gibt es derzeit noch keine Funktion zum Speichern und Wiederherstellen der Theme-Konfigurationen. Mit einem kostenlosen Plugin von simkli kannst Du aber schon heute die Konfiguration jedes Themes exportieren und wieder importieren. **Anleitung:** \ **Download:** # Eigenes CSS In den Theme-Einstellungen des Themes kannst Du zusätzlichen CSS Code hinterlegen ## Themes Stratus, Atmos, Gravity Für die Themes Stratus, Atmos und Gravity findest Du die Felder für Eigenen Code im Tab-Reiter **Erweitert**. ![](/files/-MK9MSGgcTBirArlMIJJ) Im Feld **individuelles CSS** kannst Du direkt CSS Code hinterlegen. Beispiel: ```css body { background: #ffffff; } ``` Im Feld für **Weitere CSS-Dateien** kannst du auch auf externe CSS Dateien verweisen. Beispiel: ```css ``` ## Themes Horizon, Sphere Für die Themes Horizon und Sphere findest Du die Felder für Eigenen Code im Tab-Reiter **Konfiguration**. ![](/files/-Md_nOE1wF6iySuq6f3P) Im Feld für **Weitere CSS-Dateien** kannst du auf externe CSS Dateien verweisen oder direkt CSS Code hinterlegen. Beispiel - externe CSS Datei: ```css ``` Beispiel - CSS Code: ```css ``` {% hint style="warning" %} Die style-Tags sind hier zwingend erforderlich. {% endhint %} # SVG Logo wird nicht angezeigt ## **Problembeschreibung** Das eingebundene Logo als SVG-Grafik wird nicht angezeigt. ## **Erläuterung** Eine SVG Grafik wird auf eine Art Leinwand (engl. canvas) angelegt. Dies ist ein eigentlich unendlich große Fläche, die aber in einem Viewport mit festen Maßen angezeigt wird. Teile des canvas außerhalb des Viewports werden abgeschnitten und sind nicht sichtbar. Beim Einbinden des Logos ist es nötig eine vorhandene SVG so zu skalieren, dass diese in ein bestimmtes Elternelement passt - dem Headerbereich. Mit dem viewBox-Attribut kannst Du ein Rechteck mit fester Pixelbreite bestimmen, das dann innerhalb des verfügbaren Viewports des Header skaliert werden kann. Voraussetzung für eine korrekte Darstellung von SVGs ist also, dass diese für das Web korrekt angelegt werden: Soll eine SVG Datei wie eine JPG oder PNG Grafik behandelt werden, benötigt diese eine **viewbox**, eine **width** sowie eine **height** Angabe. Weitere Inforamtionen dazu findest Du hier: In der SVG Datei fehlen daher möglicherweise Angaben zu Breite und Höhe der Grafik. Falls du die Datei aus Illustrator gespeichert hast, werden diese nicht standardmäßig mitgegeben. ## **Lösungsvorschlag** Öffne die SVG-Grafik in einem Editor und setze die Werte für viewbox, width und height nachträglich. Hilfe: # Vorlagen Übersicht {% embed url="" %} Übersicht {% endembed %} ### Konfigurationsvorlage SET 1 ![](/files/-MNypxEy0nkedduGFH_D) ### Konfigurationsvorlage SET 2 ![](/files/-MNypzn4GwWKrafLzBfP) ### Konfigurationsvorlage SET 3 ![](/files/-MNyq1Ace4pJeHNS9nHl) ### Konfigurationsvorlage SET 4 ![](/files/-MNyq3bfIQT5nV48iOhR) # Konfiguration # Grundeinstellungen Wir haben für Dich eine komplett eigene Theme-Konfiguration erstellt, welche es Dir ermöglicht mit einem Theme ganz unterschiedliche Layouts zu erstellen. ## Grundlayout ![](/files/-MNyqWJebEjwLNsjAcBj) ## Header > ab Theme Version 1.9.0 [Sprachauswahl und Währungsauswahl ](/stratus/konfiguration/wahrungs-und-sprachauswahl)können zusätzlich über die neue Funktion ["Shop Menü Widget"](/stratus/konfiguration/wahrungs-und-sprachauswahl) in die Shopnavigation integriert werden. ![](/files/-MNyqZi3HYkFyh5vvbkR) ## Footer ![](/files/-MNyqcb_VucIx-ZgdJ-s) ## Navigation ![](/files/-MNyqgbbc3IMRaC6vQQz) ## Inhalt ![](/files/-MNyqjS3OTWVVzAHenQ2) ## Detailseite ![](/files/-MNytBNV1ME_9dItuHuq) # Typografie & Farben ## Header ![](/files/-MNytK043uRZ31zVlZ7v) ## Navigation ![](/files/-MNytM_0mhotcPqasP_2) ## Footer ![](/files/-MNytPPb9LjxIobooNss) # Header Hintergrundbilder im Listing In diesem Theme kannst Du in den Kategorien-Seiten (Listings) Hintergrundbilder hinterlegen. So kannst Du in Deinem Shop die gewünschte Atmosphäre und Kaufanregungen schaffen. 1. Lege in der Theme Konfiguration ein Standardbild fest welches in jeder Kategorie angezeigt wird (optional!) 2. Zusätzlich kannst du in den Kategorien-Einstellungen des Shops für jede Kategorie einzelne Einstellungen und Bilder festlegen. Die Theme-Konfiguration kann so für jede Kategorie einzeln überschrieben werden. ## 1. Einstellungen in der Theme- Konfiguration (optional) ![](/files/-MNytVTiLaD4EA56rgtW) ## 2. Individuelle Einstellung in den Kategorien ![](/files/-MNz-8jnXUel3cIUkHm7) # Text Slider im Offcanvas Menü Das Theme verfügt über einen integrierten Text-Slider in der ein- und ausklappbaren Topbar (hier als Offcanvas Element). Hier kannst Du Informationen für den Kunden darstellen oder unter dem Logo eine kurze Beschreibung des Shop oder die Firmenphilosophie animiert darstellen. Den Text-Slider pflegst Du in der Plugin-Konfiguration des Themes (nicht in der Theme-Konfiguration). **Achtung: Der Marketing-Banner ist auf Grund seiner Mehrsprachigkeit in der Plugin-Konfiguration zu finden.** ![](/files/-MNz09NUVUjYRKyJcGaP) # Schriftarten editieren Besuche die Seite [Google Fonts](https://fonts.google.com/) {% embed url="" %} ### Schriftart aussuchen Suche Dir eine Schriftart, die zu Deinen Produkten und deinem Theme passt. ### Theme Konfiguration Als erstes benötigst Du die Verlinkung der Schriftfamilie, damit Dein Shop weiß, wo die Schriftart liegt. z.B.: `` Kopiere diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](/files/-MJBo7P69izbjFSM8gVw) Notiere Dir nun den Namen der Schriftfamilie - z.B.: `'Domine', serif`. Kopiere auch diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](/files/-MJBoLBWAIwJW7yYXPIq) # Einkaufswelt überlagernden Header erstellen In diesem Theme kannst du Deinen Header so einstellen, dass dieser auf der Startseite die Einkaufswelt überlagert und beispielsweise über einem Banner-Slider liegt. Damit sind moderne Designs möglich, welche Du so mit keinem anderen Theme realisieren kannst. Achte darauf, dass Du diese Option nur wählst, wenn Du auf der Startseite einen Banner oder Banner-Slider mit Hilfe der Einkaufswelt anzeigen möchtest. 1\. Stelle unter *Grundeinstellungen > Header* die Option *Header Positionierung* auf "Absolute Positionierung" ![](/files/-MNyu5vfPPvnjGoPvram) 2\. Passe unter *Typografie & Farben > Header* die Hintergrundfarbe des **Header Hintergrundes**, die Hintergrundfarbe der **Kategorien-Navigation** und die Hintergrundfarbe der **Shop-Navigation** nach Deinen Wünschen an. Hier kannst Du mit den verschiedenen Werten sehr unterschiedliche Looks erstellen. ![](/files/-MNyurYlxzICliPu9ior) **Achtung Transparenter Header:** Wenn Du den **Header transparent** gestalten willst, sodass die Kategorien, das Logo und die Shop-Navigation ohne Hintergrundfarbe auf dem Banner oder Banner-Slider liegen, trage bitte nicht "transparent" in das Feld für den **Header Hintergrund** ein. Die Farbe **Header Hintergrund** wird für den **Sticky Header** benötigt. Verwende die Funktion "Transparenter Header" weiter unten. ## Funktion Transparenter Header: 3\. Sollen die Kategorien, das Logo sowie die Shop-Navigation auf dem Banner Bild oder Banner-Slider Bild ohne eine Hintergrundfarbe dargestellt werden, kannst Du das unter *Grundeinstellungen > Header* im Feld *Header Transparenz* einstellen. Achte hierzu auf ausreichenden Kontrast zu den eingestellten Bildern. In diesem Beispiel-Bild (unten) kann man die Farbe der aktiven Kategorie "Home" auf dem gleichfarbigen Hintergrund nicht mehr lesen. Hierzu sollte das Banner-Bild oder die aktive Farbe der Kategorien angepasst werden um die Bedienbarkeit nicht zu verschlechtern. ![](/files/-MNyuMZoXIf6HMDhKjf-) # Transparenten Header auf der Startseite Wenn Du ausreichend Kontrast zwischen Vordergrund und Hintergrund herstellst, kannst Du die Hintergrundfarbe des Headers durch Anhaken der Option "Header Background Transparenz" transparent machen. Erst beim Herunterscrollen bekommt der Header dann die von Dir gewählte Hintergrundfarbe. Du findest die Option unter: **Grundeinstellungen > Header > "Header Transparenz"** ![](/files/-MNyuMZoXIf6HMDhKjf-) Stelle sicher, dass die Schriftfarbe des Headers einen ausreichenden Kontrast zum Seitenhintergrund herstellt. Dazu kannst du dem gesamten Header**bereich** einen Hintergrund geben. # Schlagwortwolke im Footer Das Theme unterstützt das Standard-Plugin für "Schlagwortwolken" (TagCloud) von Shopware und kann eine Tag-Cloud optional im Fußbereich der Seite anzeigen. Wähle dazu in der Theme Konfiguration im Reiter *Footer > Footer* *Spalten* die Option "Zeige Schlagwortwolke" aus: ![](/files/-MNyvDHr_4jHzcUEcQcF) Damit die Schlagwortwolke angezeigt wird, musst Du nur noch das Shopware Plugin "Schlagwortwolke" aktivieren. Gehe dazu unter *Einstellungen > Plugin-Manager >* "Installiert" und aktiviere das Plugin "Schlagwortwolke". Nun musst Du nur noch das Shopware Plugin aktivieren. Gehe dazu in den Plugin-Manager und aktiviere das Plugin Schlagwortwolke. Für ein besseres Ergebnis reduziere die Maximale Anzahl der Begriffe auf ca. 15. ![](/files/-MNz4hdU68YWzgwzMz8U) Achte darauf, zur Darstellung der Tag-Cloud auf der Detailseite eines Produktes auch den entsprechenden Controller im Feld "Controller-Auswahl" hinzuzufügen. Die Tag-Cloud wird nur auf den angegebenen Seitentypen dargestellt. Beispiel: **Controller-Auswahl:** *index, listing, detail* für die Ausgabe auf der Startseite, Listings und Detailseiten. Beispiel: **Controller-Auswahl:** *index, listing, detail* für die Ausgabe auf der Startseite, Listings und Detailseiten. # Währungs- und Sprachauswahl > ab Theme Version 1.9.0 Zusätzlich zur Darstellung der Sprachauswahl und Währungsauswahl in der Offcanvas-TopBar kann die Shopnavigation um diese Auswahlen erweitert werden. ![](/files/ntR5rsDbfhyvFWvJJ1CB) Beispiel: ![](/files/UVJkCyljIBSIqcrdELur) # Vorlagen Übersicht {% embed url="" %} ### Konfigurationsvorlage SET 1 ![](/files/-MNyvVCb86hRxkEoKRab) ### Konfigurationsvorlage SET 2 ![](/files/-MNyvXXZH4Ou0RhtdVHS) ### Konfigurationsvorlage SET 3 ![](/files/-MNyvZYfiZO5YqEYIirs) ### Konfigurationsvorlage SET 4 ![](/files/-MNyvap-pDIAnyq1WRpL) # Konfiguration # Grundeinstellungen Wir haben für Dich eine komplett eigene Theme-Konfiguration erstellt, welche es Dir ermöglicht mit einem Theme ganz unterschiedliche Layouts zu erstellen. ## Grundlayout ![](/files/-MNyvjrDEpbAlkhpgCB9) ## Header > ab Theme Version 1.7.0 [Sprachauswahl und Währungsauswahl](/atmos/konfiguration/wahrungs-und-sprachauswahl) können zusätzlich über die neue Funktion ["Shop Menü Widget"](/atmos/konfiguration/wahrungs-und-sprachauswahl) in die Shopnavigation integriert werden. ![](/files/-MNyvnO_W0fzQ5GBoBNn) ![](/files/-MNyw-Iczy7cvHB8waFz) ## Navigation ![](/files/-MNyw2ylJoQVsH5NtGre) ## Inhalt ![](/files/-MNyw60kLAMoPStRV4c6) ## Detailseite ![](/files/-MNyw9XpvMvfcBVvX4L3) ## Blog ![](/files/-MNywCFrKFjGYYlcWVKE) # Typografie & Farben ## Header: ![](/files/-MNywJNI6vJUz4y3eoHE) ## Navigation: ![](/files/-MNywLl3BTdlOSU4ZUth) ## Footer: ![](/files/-MNywNuAr8yueQL7Hfld) # Header Hintergrundbilder im Listing In diesem Theme kannst Du in den Kategorien-Seiten (Listings) Hintergrundbilder hinterlegen. So kannst Du in Deinem Shop die gewünschte Atmosphäre und Kaufanregungen schaffen. 1. Lege in der Theme Konfiguration ein Standardbild fest welches in jeder Kategorie angezeigt wird (optional!) 2. Zusätzlich kannst du in den Kategorien-Einstellungen des Shops für jede Kategorie einzelne Einstellungen und Bilder festlegen. Die Theme-Konfiguration kann so für jede Kategorie einzeln überschrieben werden. ## 1. Einstellungen in der Theme- Konfiguration (optional) ![](/files/-MNyw-Iczy7cvHB8waFz) ## 2. Individuelle Einstellung in den Kategorien ![](/files/-MNz-8jnXUel3cIUkHm7) # Text Slider im Offcanvas Menü Das Theme verfügt über einen integrierten Text-Slider in der ein- und ausklappbaren Topbar (hier als Offcanvas Element). Hier kannst Du Informationen für den Kunden darstellen oder unter dem Logo eine kurze Beschreibung des Shop oder die Firmenphilosophie animiert darstellen. Den Text-Slider pflegst Du in der Plugin-Konfiguration des Themes (nicht in der Theme-Konfiguration). **Achtung: Der Marketing-Banner ist auf Grund seiner Mehrsprachigkeit in der Plugin-Konfiguration zu finden.** ![](/files/-MNz-V0ykP182k71RuuZ) # Schriftarten editieren Besuche die Seite [Google Fonts](https://fonts.google.com/) ## Schriftart aussuchen Suche Dir eine Schriftart, die zu Deinen Produkten und deinem Theme passt. ## Theme Konfiguration Als erstes benötigst Du die Verlinkung der Schriftfamilie, damit Dein Shop weiß, wo die Schriftart liegt. z.B.: `` Kopiere diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](https://gblobscdn.gitbook.com/assets%2F-MJBhnpY7VUjuGoE5PIr%2F-MJBnHdHptuVMpKDAgt9%2F-MJBo7P69izbjFSM8gVw%2FwUfjxJ5Tolyh_pFeGs1h58CBNDPs5yxxHA.png?alt=media\&token=ce23d78c-15ab-46ef-b919-7630062e941d) Notiere Dir nun den Namen der Schriftfamilie - z.B.: `'Domine', serif`. Kopiere auch diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](https://gblobscdn.gitbook.com/assets%2F-MJBhnpY7VUjuGoE5PIr%2F-MJBnHdHptuVMpKDAgt9%2F-MJBoLBWAIwJW7yYXPIq%2FRczupMJcJUXH3jJkJVyOGHujRKaBIJWuwg.png?alt=media\&token=565cef86-3ea7-4d0d-9028-9a6cb8d678a7) # Einkaufswelt überlagernden Header erstellen In diesem Theme kannst du Deinen Header so einstellen, dass dieser auf der Startseite die Einkaufswelt überlagert und beispielsweise über einem Banner-Slider liegt. Damit sind moderne Designs möglich, welche Du so mit keinem anderen Theme realisieren kannst. Achte darauf, dass Du diese Option nur wählst, wenn Du auf der Startseite einen Banner oder Banner-Slider mit Hilfe der Einkaufswelt anzeigen möchtest. 1\. Stelle unter *Grundeinstellungen > Header* die Option *Header Positionierung* auf "Absolute Positionierung" ![](/files/-MNyu5vfPPvnjGoPvram) 2\. Passe unter *Typografie & Farben > Header* die Hintergrundfarbe des **Header Hintergrundes**, die Hintergrundfarbe der **Kategorien-Navigation** und die Hintergrundfarbe der **Shop-Navigation** nach Deinen Wünschen an. Hier kannst Du mit den verschiedenen Werten sehr unterschiedliche Looks erstellen. ![](/files/-MNyurYlxzICliPu9ior) **Achtung Transparenter Header:** Wenn Du den **Header transparent** gestalten willst, sodass die Kategorien, das Logo und die Shop-Navigation ohne Hintergrundfarbe auf dem Banner oder Banner-Slider liegen, trage bitte nicht "transparent" in das Feld für den **Header Hintergrund** ein. Die Farbe **Header Hintergrund** wird für den **Sticky Header** benötigt. Verwende die Funktion "Transparenter Header" weiter unten. ## Funktion Transparenter Header: 3\. Sollen die Kategorien, das Logo sowie die Shop-Navigation auf dem Banner Bild oder Banner-Slider Bild ohne eine Hintergrundfarbe dargestellt werden, kannst Du das unter *Grundeinstellungen > Header* im Feld *Header Transparenz* einstellen. Achte hierzu auf ausreichenden Kontrast zu den eingestellten Bildern. In diesem Beispiel-Bild (unten) kann man die Farbe der aktiven Kategorie "Home" auf dem gleichfarbigen Hintergrund nicht mehr lesen. Hierzu sollte das Banner-Bild oder die aktive Farbe der Kategorien angepasst werden um die Bedienbarkeit nicht zu verschlechtern. ![](/files/-MNyuMZoXIf6HMDhKjf-) # Transparenten Header auf der Startseite Wenn Du ausreichend Kontrast zwischen Vordergrund und Hintergrund herstellst, kannst Du die Hintergrundfarbe des Headers durch Anhaken der Option "Header Background Transparenz" transparent machen. Erst beim Herunterscrollen bekommt der Header dann die von Dir gewählte Hintergrundfarbe. Du findest die Option unter: **Grundeinstellungen > Header > "Header Transparenz"** ![](/files/-MNyuMZoXIf6HMDhKjf-) Stelle sicher, dass die Schriftfarbe des Headers einen ausreichenden Kontrast zum Seitenhintergrund herstellt. Dazu kannst du dem gesamten Header**bereich** einen Hintergrund geben. # Schlagwortwolke im Footer Das Theme unterstützt das Standard-Plugin für "Schlagwortwolken" (TagCloud) von Shopware und kann eine Tag-Cloud optional im Fußbereich der Seite anzeigen. Wähle dazu in der Theme Konfiguration im Reiter *Footer > Footer* *Spalten* die Option "Zeige Schlagwortwolke" aus: ![](/files/-MNyyBCMl6-uzEDdkOkE) Nun musst Du nur noch das Shopware Plugin aktivieren. Gehe dazu in den Plugin-Manager und aktiviere das Plugin Schlagwortwolke. Für ein besseres Ergebnis reduziere die Maximale Anzahl der Begriffe auf ca. 15. ![](/files/-MNz4hdU68YWzgwzMz8U) Achte darauf, zur Darstellung der Tag-Cloud auf der Detailseite eines Produktes auch den entsprechenden Controller im Feld "Controller-Auswahl" hinzuzufügen. Die Tag-Cloud wird nur auf den angegebenen Seitentypen dargestellt. Beispiel: **Controller-Auswahl:** *index, listing, detail* für die Ausgabe auf der Startseite, Listings und Detailseiten. # Währungs- und Sprachauswahl > ab Theme Version 1.7.0 Zusätzlich zur Darstellung der Sprachauswahl und Währungsauswahl in der Offcanvas-TopBar kann die Shopnavigation um diese Auswahlen erweitert werden. ![](/files/ntR5rsDbfhyvFWvJJ1CB) Beispiel: ![](/files/AJE27WAczaOwUcYgbKoS) # Vorlagen Übersicht {% embed url="" %} ## Konfigurationsvorlage SET 0 - Reset ![](/files/-MNxE24Z_9s_oXiY2Ezp) ## Konfigurationsvorlage SET 1 - Reset ![](/files/-MNxE5GVKE2LBxmzLLmr) ## Konfigurationsvorlage SET 2 - Reset ![](/files/-MNxE8k9Wqcw2lZZ6SMQ) ## Konfigurationsvorlage SET 3 - Reset ![](/files/-MNxEAuQQVwYwW39cK-U) ## Konfigurationsvorlage SET 4 - Reset ![](/files/-MNxEEJRvKMcao6JY86O) ## Konfigurationsvorlage SET 5 - Reset ![](/files/-MNxEHFCQP9yggZlVHxk) ## Konfigurationsvorlage SET 6 - Reset ![](/files/-MNxEJQgyj2pjQ1wNSCP) ## Konfigurationsvorlage SET 7 - Reset ![](/files/-MNxELt-EQcxqm7Srb_J) ## Konfigurationsvorlage SET 8 - Reset ![](/files/-MNxENziJomD812Q6kzv) # Konfiguration # Grundeinstellungen In "Gravity" haben wir für Dich eine komplett eigene Theme-Konfiguration erstellt, welche es Dir ermöglicht mit einem Theme ganz unterschiedliche Themes zu erstellen. ## Grundlayout ![](/files/-MNxAIezdS8qRhwk89vV) ## Header ![](/files/-MNxATXp--K7FmVo3OZU) ## Footer ![](/files/-MNxAWYTcKQ9yGvMz6Ao) ## Navigation ![](/files/-MNxA_52RrRFWjPOgvJp) ## Inhalt ![](/files/-MNxAbU8yeObsT_OCsQF) ## Detailseite ![](/files/-MNxAeMRx5aALgidFYo5) # Typografie & Farben ## Header ![](/files/-MNxAlbYCsBJUUNnxe0o) ## Navigation ![](/files/-MNxAp4CevYzroYiU0El) ## Footer ![](/files/-MNxArc_iSAMaIw87MSW) # Header Hintergrundbilder im Listing In Gravity kannst Du in den Kategorien Hintergrundbilder hinterlegen. 1. Lege in der Theme Konfiguration ein Standardbild fest welches in jeder Kategorie angezeigt wird (optional!) 2. Zusätzlich kannst du in den Kategorien-Einstellungen des Shops durch die Zusatzfelder für jede Kategorie einzelne Einstellungen und Bilder festlegen. Die Theme-Konfiguration wird so überschrieben. ## 1. Einstellungen in der Theme- Konfiguration (optional) ![](/files/-MNxB9dayxvMKwnRWrIj) ## 2. Individuelle Einstellung je Kategorie ![](/files/-MNz-8jnXUel3cIUkHm7) # Marketing Banner Das Theme "Gravity" verfügt über einen integrierten Marketing-Banner in der ein- und ausklappbaren Topbar. Hier kannst Du Informationen für den Kunden darstellen. Den Marketing-Banner pflegst Du in der Plugin-Konfiguration des Themes. **Achtung: Der Marketing-Banner ist auf Grund seiner Mehrsprachigkeit in der Plugin-Konfiguration zu finden.** ![](/files/-MNxBZdYiDzULHk6LOiQ) # Schriftarten editieren Besuche die Seite [Google Fonts](https://fonts.google.com/) ## Schriftart aussuchen Suche Dir eine Schriftart, die zu Deinen Produkten und deinem Theme passt. ## Theme Konfiguration Als erstes benötigst Du die Verlinkung der Schriftfamilie, damit Dein Shop weiß, wo die Schriftart liegt. z.B.: `` Kopiere diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](https://gblobscdn.gitbook.com/assets%2F-MJBhnpY7VUjuGoE5PIr%2F-MJBnHdHptuVMpKDAgt9%2F-MJBo7P69izbjFSM8gVw%2FwUfjxJ5Tolyh_pFeGs1h58CBNDPs5yxxHA.png?alt=media\&token=ce23d78c-15ab-46ef-b919-7630062e941d) Notiere Dir nun den Namen der Schriftfamilie - z.B.: `'Domine', serif`. Kopiere auch diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](https://gblobscdn.gitbook.com/assets%2F-MJBhnpY7VUjuGoE5PIr%2F-MJBnHdHptuVMpKDAgt9%2F-MJBoLBWAIwJW7yYXPIq%2FRczupMJcJUXH3jJkJVyOGHujRKaBIJWuwg.png?alt=media\&token=565cef86-3ea7-4d0d-9028-9a6cb8d678a7) # Einkaufswelt überlagernden Header erstellen In "Gravity" kannst du Deinen Header so einstellen, dass dieser auf der Startseite die Einkaufswelt überlagert und beispielsweise über einem Banner-Slider liegt. Damit sind moderne Designs möglich, welche Du so mit keinem anderen Theme realisieren kannst. Achte darauf, dass Du diese Option nur wählst, wenn Du auf der Startseite einen Banner oder Banner-Slider mit Hilfe der Einkaufswelt anzeigen möchtest. ![](/files/-MNxBnNdWOiWLO5ZBYoz) Wähle einfach im Reiter Grundeinstellungen > Header im Feld "Header Positionierung" die Absolute Positionierung aus. ![](/files/-MNzAk9Qd8E7ff8CGgM1) # Transparenten Header auf der Startseite Die Vorlage SET 8 des responsiven shopware Themes Gravity zeigt den Header der Seite ohne Hintergrund über dem Einkaufswelten-Banner und auch auf Unterseiten. Wenn Du ausreichend Kontrast zwischen Vordergrund und Hintergrund herstellst, kannst Du die Hintergrundfarbe des Headers durch Anhaken der Option "Header Background Transparenz" transparent machen. Erst beim Herunterscrollen bekommt der Header dann die von Dir gewählte Hintergrundfarbe. Du findest die Option unter: **Grundeinstellungen > Header > "Header Transparenz"** ![](/files/-MNxCLVgHFnTI_aQK4z4) ![](/files/-MNxBnNdWOiWLO5ZBYoz) Stelle sicher, dass die Schriftfarbe des Headers einen ausreichenden Kontrast zum Seitenhintergrund herstellt. Dazu kannst du dem gesamten Header**bereich** einen Hintergrund geben. Du findest die Option unter: **Typografie & Farben > Header > Headerbereich Standard Hintergrundfarbe > "Headerbereich Hintergrundfarbe" (@gravity-header-wrap-bg-color-default)** ![](/files/-MNzBGQGMt9A7aMlupyo) # Ausklappbare Topbar In "Gravity" kann die Topbar eingeklappt oder ausgeklappt dargestellt werden. Der Kunde kann die Topbar nach Wunsch ein- oder ausklappen. In der Theme-Konfiguration kannst Du einstellen ob die Topbar beim ersten Laden der Seite ein- oder ausgeklappt dargestellt werden soll. \ Dabei kannst Du zwischen vier verschiedenen Modi wählen: Versteckt, Sichtbar, Versteckt auf Startseite, Sichtbar auf Startseite Ändert der Kunde die Ansicht der Topbar, wird dies in der laufenden Session des Kunden gespeichert, sodass nicht auf jeder Seite die Leiste erneut minimiert oder maxmimiert werden muss. Du findest die Option unter: **Grundeinstellungen > Grundlayout > "Topbar Modus"** ![](/files/-MNxCmhSsALho8TVwMui) # Schlagwortwolke im Footer Das Gravity Theme unterstützt das Standard-Plugin für Schlagwortwolken (TagCloud) und kann eine TagCloud zusätzlich auf Wunsch im Fußbereich der Seite anzeigen. ![](/files/-MNxCsQmLOyeCxDsf09M) Wähle in der Theme Konfiguration im Reiter Footer > Footer Spalten die Option "Zeige Schlagwortwolke" ![](/files/-MNxCx0b62zprL1CjMm3) Nun musst Du nur noch das Shopware Plugin aktivieren. Gehe dazu in den Plugin-Manager und aktiviere das Plugin Schlagwortwolke. Für ein besseres Ergebnis reduziere die Maximale Anzahl der Begriffe auf ca. 15. ![](/files/-MNz4hdU68YWzgwzMz8U) Achte darauf, zur Darstellung der Tag-Cloud auf der Detailseite eines Produktes auch den entsprechenden Controller im Feld "Controller-Auswahl" hinzuzufügen. Die Tag-Cloud wird nur auf den angegebenen Seitentypen dargestellt. Beispiel: **Controller-Auswahl:** *index, listing, detail* für die Ausgabe auf der Startseite, Listings und Detailseiten. # Konfiguration # Grundeinstellungen In der Theme-Konfiguration findest Du einen zusätzlichen Reiter "Sphere Konfiguration". Hier findest Du eine Übersicht der verschiedenen Variablen. ## Allgemein Im Bereich *Sphere Konfiguration > Allgemein* findest Du die globalen Einstellungen des Themes. **Layout:** * *Grundlayout* gibt die allgemeine Breite des Shops wieder. Hier kann entschieden werden, ob das Layout die gesamte Browserbreite (full-width) füllt oder auf eine maximale Breite beschränkt wird (boxed) * *Icon Set wählen* bietet Dir die Möglichkeit die Icons des Themes auszutauschen. Wir haben hier mehrere Icon-Sets integriert. * *Topbar Modus* gibt den initialen Zustand der Topbar des Shops an. Die Topbar ist als besonderes Feature in diesem Shop einklappbar. Du kannst entscheiden, ob die Topbar beim ersten Laden der Seite ein- oder ausgeklappt dargestellt wird. * *Verstecke Container Hintergrund* versteckt den weißen Seitenhintergrund vieler Flächen im Shop. Die Elemente liegen dann auf der Hintergrundfarbe @body-bg, welche Du in den Farbeinstellungen des Themes einstellen kannst. **Nach oben Button:** * *Nach oben Button* ist ein kleiner Hilfsbutton, welcher die Seite wieder nach oben scrollt, sobald der Kunde auf diesen Button klickt. * *Nach oben Button Position* lässt dich die Platzierung des Buttons anpassen, sodass keine Überlagerungen mit anderen Plugins stören, da die Position am unteren rechten Bildschirmrand sehr beliebt ist. **Preloader**: * *Preloader Aussehen* bietet Dir verschiedenen Aussehenseinstellungen für die Ladeanimation des Themes. * *Preloader Anzeige:* zeige den Preloader auf allen Seiten, auf der Startseite oder gar nicht an, du hast die Wahl. **Abgerundete Ecken:** * In einem Onlineshop haben viele Elemente abgerundete Ecken. Das betrifft beispielsweise Buttons, Formularfelder und andere Elemente. Du kannst hier einstellen, ob du lieber ein eckigen oder abgerundetes Layout bevorzugst. ![](/files/-MNz0_LIoFY7OMZkTgP7) ## Farben Im Bereich *Sphere Konfiguration > Farben* findest Du die durch das Theme zusätzlich hinzugefügten Farben. Die Konfiguration erweitert die Standard Farben des Shops, welche unter dem Hauptreiter "Farbkonfiguration" zu finden ist.\ Wir haben hier eine Zuordnung der einzelnen Farben in einem Bild dargestellt: ![](/files/-MNz0cqp5Pw6B855kG2A) ## Header Im Bereich *Sphere Konfiguration > Header* liegen die Einstellungen für den Theme-Header. **Basiskonfiguration:** * Hier findest Du die einzelnen Höhen und Textgrößen in Pixeln. **Logo:** * Das Logo nimmt die Größe des Eltern-Containers in Prozent an. Du kannst also bestimmen, wie groß das Logo in Prozent in Abhängigkeit der Header-Höhe ist. **Header Background Konfiguration:** * In Theme Sphere kannst Du den Headerbereich ein Hintergrundbild verpassen. Das Bild soll Dir helfen Emotionen in Deinem Shop zu transportieren. Im Theme pflegst Du das Fallback-Bild. In den Kategorien Deines Shops kannst Du für jede Kategorie ein eigenes Bild auswählen. * Über die verschiedenen Einstellungen kannst Du das mit Hilfe verschiedener Sichtbarkeitseinstellungen dämpfen und positionieren. * *Kategorienbeschreibung im Header* erlaubt es Dir die Kategorienbeschreibung aus den Kategorieneinstellungen in den oberen Bereich des Themes zu verlegen. So liegt die Kategorienbeschreibung auf dem Headerbild. * *Header Background Transparenz* ermöglicht es Dir den Header transparent zu gestalten. Eine ausführlichere Beschreibung findest Du hier: ![](/files/-MNz0kS4GaHIVWunmhA8) ## Footer Unter Sphere *Konfiguration > Footer* findest Du die Einstellungen für den Fußbereich Deiner Seite. **Basiskonfiguration:** * Der vertikale Abstand gibt an, wie viel Weißraum vertikal zwischen den Elemente liegt. Wir haben das in der unten stehenden Grafik visualisiert. **Footer Spalten:** * *Zeige Über uns* erlaubt es Dir einen Über Uns Abschnitt anstelle der Service Hotline darzustellen. Du kannst den Text über die Textbausteine im Backend des Shops bearbeiten. Du musst dazu einfach einen Teil der Phrase in die Suche eingeben. Beispiel: "Lorem ipsum dolor" gibt Dir den gewünschten Textbaustein in der Textbausteinverwaltung aus. * *Zeige Schlagwortwolke* zeigt die Shopware Schlagwortwolke an. Bitte beachte die Einstellungshinweise in der Theme-Konfiguration. **Footer Logo:** * Theme Sphere erlaubt Dir die Darstellung eines weiteren Logos im Footer. So kannst Du Deine Marke auch optimal im Footer präsentieren. Durch die zusätzlichen Felder kannst Du hier auch ein vom Hauptlogo abweichendes Logo darstellen. Das ist insbesondere dann wichtig, wenn das Logo für eine andere Hintergrundfarbe im Fußbereich der Seite optimiert bzw. invertiert werden muss. **Zeige Footer Newsletter:** * Der Newsletterbereich lässt sich über die Theme-Konfiguarion ausschalten. Wird die Anzeige deaktiviert entfällt der gesamte Bereich. **Footer Social Media Icons:** * Sobald ein Link in dem jeweiligen Bereich eingefügt wird, erscheint im unteren Bereich des Footers das entsprechende Icon des Social Media Dienstes. ![](/files/-MNz0q3GYQVM5N7-HBW_) ## Menüs Unter Sphere Konfiguration > Menüs findest Du die Einstellungen zu allen Shopware-Menüs. **Main Navigation / Kategorien:** * Für die Kategorien Deines Shops stehen Dir in Sphere verschiedene Hover-Effekte bereit. Einige Effekte profitieren von einer auffälligen Hover-Hintergrundfarbe; andere Effekte wiederrum benötigen eine auffällige Hover-Vordergrundfarbe. Texte einfach einige Effekte aus! * *Abstand zwischen Kategorien* gibt den Abstand zwischen den Kategorien in Pixeln an. Solltest Du besonders viele Kategorien haben, kannst Du hier den Abstand zwischen den Kategorien verringern um mehr Kategorien darstellen zu können. * *Kategorien mit Pfeilen* stellt einen Pfeil nach unten neben dem Kategoriennamen dar, wenn es Unterkategorien gibt. * *Text Transform* ist die Option um die Kategorien in Kapitälchen (Großbuchstaben) oder Versalien (Kleinbuchstaben) oder eben ganz normal anzuzeigen. **Advanced Menü:** * Das Erweiterte Menü ist über das Standard-Plugin von Shopware im Plugin-Manager zu aktivieren. Das Plugin bietet ein großes ausklappbares Menü. * *Erweitertes Menü volle Breite:* Du kannst die Breite des Erweiterten Menüs bestimmen. *Achtung:* Das Menü kann nicht breiter als das eingestellte Grundlayout werden. Im Boxed Modus (Sphere *Konfiguration > Allgemein > Grundlayout)* ist das Menü nicht breiter als die Seite selbst. * *Erweitertes Menü Kopfzeile anzeigen:* Das Erweiterte Menü hat eine Kopfzeile, welche Du über diese Option ausschalten kannst. Dadurch wirkt das Menü etwas schlanker. **Shop-Navigation:** In der Shopnavigation liegen in Shopware die Menüpunkte für den Merkzettel, das Konto sowie der Warenkorb. * *Navigation Text Transform* ist die Option um die Texte in Kapitälchen (Großbuchstaben) oder Versalien (Kleinbuchstaben) oder eben ganz normal darzustellen. * Wir haben *Tooltips* eingeführt, welche beim Überfahren mit der Maus erscheinen. So soll der Kunde im Zweifel eine Erklärung des Menüpunktes erhalten. Du kannst die Position und das Erscheinen dieser Tooltips bestimmen. * *Zeige Mobiles Menu Icon + Text:* In der mobilen Ansicht kannst Du einen Text zum Menü-Icon ausgeben lassen. ![](/files/-MNz0v6YRqFttJBjQl-O) ## Inhalte Unter Sphere *Konfiguration > Inhalte* befinden sich die Einstellungen für Listings und Content-Seiten. * Lege hier Abstände zwischen dem Inhaltsbereich und dem Kopfbereich sowie zwischen den Produktboxen im Listing fest. ![](/files/-MNz13o-ti2Nz-FiykZs) # Marketing Banner Das Theme "Sphere" verfügt über einen integrierten Marketing-Banner in der ein- und ausklappbaren Topbar. Hier kannst Du Informationen für den Kunden darstellen. Den Marketing-Banner pflegst Du in der Plugin-Konfiguration des Themes im Theme-Manager. {% hint style="warning" %} Der Marketing-Banner ist auf Grund seiner Mehrsprachigkeit in der Plugin-Konfiguration zu finden. {% endhint %} ![](/files/-MNz1AItPMxuin0GS62y) # Header Hintergrundbilder im Listing In Sphere kannst Du in den Kategorien Hintergrundbilder hinterlegen. 1. Lege in der Theme Konfiguration ein Standardbild fest welches in jeder Kategorie angezeigt wird (optional!) 2. Nun kannst du in den Kategorien-Einstellungen durch die Zusatzfelder für jede Kategorie einzelne Einstellungen und Bilder festlegen. Die Theme-Konfiguration wird so überschrieben. ## 1. Einstellungen in der Theme- Konfiguration (optional) ![](/files/-MNz1QmdbifCwbcHVYXR) ## 2. Individuelle Einstellung je Kategorie ![](/files/-MNz1Om9h1E5u8yRxIIr) # Schriftarten editieren Besuche die Seite [Google Fonts](https://fonts.google.com/) ## Schriftart aussuchen Suche Dir eine Schriftart, die zu Deinen Produkten und deinem Theme passt. ## Theme Konfiguration Als erstes benötigst Du die Verlinkung der Schriftfamilie, damit Dein Shop weiß, wo die Schriftart liegt. z.B.: `` Kopiere diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](/files/-MJBxXl2yJkYl3lbmaUl) Notiere Dir nun den Namen der Schriftfamilie - z.B.: `'Dosis', sans-serif`. Kopiere auch diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](/files/-MJBxaO5d4QhYzDnywhF) # Einkaufswelt überlagernden Header erstellen In Sphere kannst du Deinen Header so einstellen, dass dieser auf der Startseite die Einkaufswelt überlagert. Damit sind moderne Designs möglich, welche Du so mit keinem anderen Theme realisieren kannst. Achte darauf, dass Du diese Option nur wählst, wenn Du auf der Startseite einen Banner mit Hilfe der Einkaufswelt anzeigen möchtest. ![](/files/-MNz1eOsvTCbCisIjFcS) Wähle einfach im Reiter Sphere Konfiguration -> Header im Feld "Header Positionierung" die Absolute Positionierung aus. ![](/files/-MNz1idxnZmu2E9PfZeb) # Transparenten Header auf der Startseite erstellen Die Vorlage 2 des responsiven shopware Themes Sphere zeigt den Header der Seite ohne Hintergrund über dem Einkaufswelten-Banner und auch auf Unterseiten. Wenn Du ausreichend Kontrast zwischen Vordergrund und Hintergrund herstellst, kannst Du die Hintergrundfarbe des Headers durch Anhaken der Option "Header Background Transparenz" transparent machen. Erst beim Scrollen bekommt der Header dann die von Dir gewählte Hintergrundfarbe. ![](/files/-MNz3JjTR_28CPaMmUwR) Du kannst diese Einstellzung auch auf jede Kategorie einzeln anwenden und abweichende Einstellungen von der Theme-Konfiguration tätigen. {% hint style="info" %} Möchtest Du nur auf wenigen Seiten einen transparenten Header darstellen, bietet es sich an diese Einstellung nur in der jeweiligen Kategorie einzustellen. {% endhint %} ![](/files/-MNz3wsLufSoFuWTKEIp) Beispiel Startseite: ![](/files/-MNz2-boI4yKcML3hAAz) ### Unterseiten Stelle sicher, dass die Schriftfarbe des Headers einen ausreichenden Kontrast zum Seitenhintergrund herstellt. Dazu kannst du dem gesamten Header**bereich** einen Hintergrund geben. ("Sphere Konfiguration > Farben > Header Farben > "Headerbereich Hintergrundfarbe" (@sphere-header-wrap-bg-color-default)) ![](/files/-MNz2yFkAg9cnR1DpD8h) Beispiel Unterseite: ![](/files/-MNz2i__uzhOAoB4ExRO) # Ausklappbare Topbar In Sphere kann die Topbar eingeklappt und ausgeklappt dargestellt werden. Der Kunde kann die Topbar nach Wunsch ein- oder ausklappen. In der Theme-Konfiguration kannst Du einstellen ob die Topbar beim ersten Laden der Seite ein- oder ausgeklappt dargestellt wird. \ Dabei kannst Du zwischen vier verschiedenen Modi wählen. Ändert der Kunde die Ansicht der Topbar, wird dies in der laufenden Session des Kunden gespeichert, sodass nicht auf jeder Seite die Leiste erneut minimiert oder maxmimiert werden muss. ![](/files/-MNz4ZzS3CjipJYnTug0) # Schlagwort Wolke im Footer Das Sphere Theme unterstützt das Standard-Plugin für Schlagwortwolken (TagCloud) ![](/files/-MNz4rCHhFb8oE7aK_p6) Wähle in der Theme Konfiguration im Reiter Footer > Footer Spalten die Option "Zeige Schlagwortwolke" ![](/files/-MNz4kK4MCB5nrHdaf-Q) Nun musst Du nur noch das Shopware Plugin aktivieren. Gehe dazu in den Plugin-Manager und aktiviere das Plugin Schlagwortwolke. Für ein besseres Ergebnis reduziere die Maximale Anzahl der Begriffe auf ca. 15. ![](/files/-MNz4hdU68YWzgwzMz8U) Achte darauf, zur Darstellung der Tag-Cloud auf der Detailseite eines Produktes auch den entsprechenden Controller im Feld "Controller-Auswahl" hinzuzufügen. Die Tag-Cloud wird nur auf den angegebenen Seitentypen dargestellt. Beispiel: **Controller-Auswahl:** *index, listing, detail* für die Ausgabe auf der Startseite, Listings und Detailseiten. # Konfiguration # Grundeinstellungen Unter dem Reiter Horizon-Konfiguration können zusätzliche Horizon-spezifische Konfigurationen vorgenommen werden. ## Allgemein - allgemeine Einstellungen Hier kannst Du Einstellungen zur Seitenbreite (Seitenlayout), Icon-Set und Schriftarten machen. ![](/files/-MNz5Peh1fYbgtxgjyVF) ## Farben Im Horizon Theme gibt es einige zusätzliche Farben - dabei kannst Du auch die Variablen aus den Standard-Konfigurationen des Shopware Responsive Themes verwenden. ### Farben Header ![](/files/-MNz5Wb-4czAZnXc52Uh) ### Farben Content ![](/files/-MNz5ZxXSbpNnMPqG_PJ) ### Farben Footer ![](/files/-MNz5rwuvhEC5wsohFYO) ## Header Die Einstellungen für den Header findest Du unter dem Reiter Header. Dort kannst Du grundlegende Höhen und Größen des Kopfbereichs einstellen, die Größe des Logos anpassen uvm. ![](/files/-MNz5yecUh7mntOfPmIl) Ferner kannst du Einstellen, welche Animation abgespielt werden soll, wenn über die Hauptnavigation gesteuert wird, wie das erweiterte Menü angezeigt werden soll uvm. Probier einfach mal ein paar Navigation Hover Effekte aus - beachte, dass je nach Effekt die Hover-Farben unter Farben geändert werden sollten um beste Ergebnisse zu erzielen. ![](/files/-MNz60aY_BtCkbK2y6LR) ## Footer Der Fußbereich des Horizon-Themes bietet verschiedene Vorteile wie die Anzeige von Features, einem Newsletterbereich, einer Schlagwortwolke, Footer-Logos, Social-Media Icons uvm. ![](/files/-MNz69WspJMP47QLq6De) ![](/files/-MNz6Bfm62qKKQeOYpWu) ![](/files/-MNz6EKtZ8q3B4lGdX--) ![](/files/-MNz6HCT5bA1OhXDEB3a) ## Inhalte ![](/files/-MNz6L-g8L51yAEcghUE) # Schriftarten editieren Besuche die Seite [Google Fonts](https://fonts.google.com/)​ ## Schriftart aussuchen Suche Dir eine Schriftart, die zu Deinen Produkten und deinem Theme passt. ## Theme Konfiguration Als erstes benötigst Du die Verlinkung der Schriftfamilie, damit Dein Shop weiß, wo die Schriftart liegt. z.B.: `` Kopiere diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](https://gblobscdn.gitbook.com/assets%2F-MJBhnpY7VUjuGoE5PIr%2F-MJBx19m1HEavRFO55D2%2F-MJBxXl2yJkYl3lbmaUl%2FvOXohaQUfnEVQuBxmYxLtLstYZ28qdcvVQ.png?alt=media\&token=72508ea5-9bb1-4d1c-99ba-81b4d6545940) Notiere Dir nun den Namen der Schriftfamilie - z.B.: `'Dosis', sans-serif`. Kopiere auch diesen Text in das entsprechende Feld deiner Theme-Konfiguration: ![](https://gblobscdn.gitbook.com/assets%2F-MJBhnpY7VUjuGoE5PIr%2F-MJBx19m1HEavRFO55D2%2F-MJBxaO5d4QhYzDnywhF%2FwI3xXETOOffSJJf1XAjZaiWG6i91cD5oDA.png?alt=media\&token=88d92e1e-4f94-4041-9c30-272a6d376491)