Plugin Dokumentation „Flex Header Premium“
1. Plugin / Verkaufskanal aktivieren
Aktivieren Sie Ihren Verkaufskanal im Plugin. Möchten Sie das Plugin in einen weiteren Verkaufskanal nutzen können Sie über die Plugin Card„Verkaufskanal“per Auswahlmenü ihre angelegten Verkaufskanäle mit HTML Storefront auswählen.
2. Eigene Kategorien, generelle Einstellungen, in der Topbar
Integrieren Sie in die Header Topbar eigene individuelle Dropdown-Menüs oder Links, mit oder ohne Kategorie Icons. Dazu erstellen Sie in ihrem Kategorie-Stammbaum ein weiteres, eigenes Kategoriemenü. Damit die eigenen Dropdown-Menüs in der Topbar erscheinen können, geben Sie hier bitte in der Plugin-Konfiguration den Hauptkategorienamen ein. Die Sortierung der Menüpunkte beschreiben wir Ihnen nachfolgend.
2.1 Button/Dropdown Einstellungen
Geben Sie in der Konfiguration "Auswahl der Anzeige der eigenen Topbar Kategorien Dropdown" an, in welchen Viewport die Topbar erscheinen darf. Beachten Sie, dass ab den Viewports Tablet Portrait und beiden Smartphone Viewports die Topbar Inhalte in das Mobile seitlich aufklappbare Menü verschoben werden.
2.1.1 - "Eigene Topbar Kategorien Dropdown einschalten"
Aktivieren Sie hier die Topbar im Flex Header Premium.
2.1.2 - "Geben Sie einen Haupt-Kategorienamen für eigene Topbar Kategorien Dropdown"
Geben Sie bitte in der Plugin-Konfiguration den zuvor von Ihnen im Kategoriebaum angelegten Haupt-Kategorienamen ein. Nur so kann das Plugin die von Ihnen angelegten Dropdown-Menüs und / oder Links erkennen.
Zum Beispiel den Namen "Service".
2.1.2 - "Geben Sie einen Haupt Kategorienamen für eigene Topbar Kategorien Dropdown"
Geben Sie in diesem Konfigurations Punkt an, in welchen Viewport ihre Topbar erscheinen darf. Beachten Sie, dass ab dem Viewports "Tablet Portrait" und den beiden Viewports "Smartphone Landscape" und "Smartphone Portrait" die Topbar Inhalte in das Mobile Menü verschiebt.
2.1.4 - "Auswahl Text und/oder Icon"
Über ein Zusatzfeld in den Kategorien ist es ihnen möglich jeder Dropdown Kategorie in der Topbar ein eigenes SVG Icon vor dem Kategorie Namen einzubinden. An dieser Stelle wählen Sie ob Sie aus, ob nur das "Icon" oder nur "Text" oder "Icon und Text" in den Dropdown Kategorien angezeigt werden.
2.1.5 - "Top Bar Höhe, in px"
Bestimmen Sie die Höhe der Topbar. Wir empfehlen Ihnen eine Höhe von mindestens 20 (ohne der Angabe px).
2.1.6 - "Top Bar padding links - Beispiel: 20"
Definieren Sie hier den Inneren Abstand der Topbar auf der linken Seite (ohne der Angabe px).
2.1.7 - "Top Bar padding rechts - Beispiel: 20"
Definieren Sie hier den Inneren Abstand der Topbar auf der rechten Seite (ohne der Angabe px).
2.1.8 - "Top Bar verstecken"
Geben Sie an ob die Topbar geöffnet oder geschlossen dargestellt wird.
2.1.9 - "Top Bar verstecken, wenn geöffnet, beim scrollen"
Definieren Sie ob die Topbar beim scrollen der Seite automatisch versteckt/geschlossen wird.
2.1.10 - "Top Bar verstecken Icon Farbe - Beispiel: #333333"
Wird die Topbar geschlossen dargestellt wird ein Icon mit 3 Punkten zum öffnen angezeigt.
Definieren Sie hier den Farbwert des 3 Punkte Icons.
2.1.11 - "Top Bar verstecken Icon Größe - Beispiel: 12"
Im Shopware Standard sind sämtliche Icons 22 Pixel groß. Definieren Sie hier die Pixelgröße des Icons (ohne Angabe px).
2.2 Positionen der standard Topbar Elemente
Die Topbar Kategorien positionieren Sie direkt in der jeweiligen Kategorie über die Card Zusatzfelder "Ultra Flex Header Premium" > Order-Nummer. Damit Sie aber auch das Währungsmenü und das Sprachauswahl-Menü in der Topbar positionieren können, setzen Sie hier einen Zahlenwert für die Menü-Punkte. Um so höher die Positionsnummer um so weiter rechts in der Topbar befindet sich dann das jeweilige Dropdown-Menü.
2.2.1 - "Dropdown Position 100, Sprache - Beispiel: 100"
Positionieren Sie das Sprachauswahlmenü in der Topbar mit Leichtigkeit!
Verwenden Sie einfach die Positionsnummer, um die Platzierung Ihrer Kategorien in der Header-Topbar zu bestimmen. Je höher die Zahl, desto weiter rechts befindet sich die Kategorie.
Tipp: Um das Shopware-Sprachauswahlmenü ganz links in der Topbar zu positionieren, verwenden Sie die kleinstmögliche Positionsnummer, z. B. 0. Für die Positionierung ganz rechts verwenden Sie hingegen eine hohe Zahl, z. B. 100 oder mehr.
2.2.2 - "Dropdown Position 110, Währung - Beispiel: 110"
Positionieren Sie Ihr Währungsauswahlmenü in der Topbar mit Leichtigkeit!
Verwenden Sie einfach die Positionsnummer, um die Platzierung Ihrer Kategorien in der Header-Topbar zu bestimmen. Je höher die Zahl, desto weiter rechts befindet sich die Kategorie.
Tipp: Um das Shopware-Währungsmenü ganz links in der Topbar zu positionieren, verwenden Sie die kleinstmögliche Positionsnummer, z. B. 0. Für die Positionierung ganz rechts verwenden Sie hingegen eine hohe Zahl, z. B. 100 oder mehr.
2.3 Aufteilen der Dropdowns vor Nummer
2.3.1 - "Aufteilen der Dropdowns vor Nummer - Beispiel: 3"
Einfache Anordnung Ihrer Menüpunkte in der Topbar
Mit dieser Funktion können Sie ganz einfach festlegen, wie Ihre Menüpunkte in der Topbar angezeigt werden sollen.
Beispiel: Möchten Sie zwei Menüpunkte links und den Rest rechts anzeigen? Dann geben Sie einfach die Positionsnummer ein, ab der die Aufteilung erfolgen soll. In unserem Beispiel wäre dies die Nummer 3.
Tipp: Um alle Menüpunkte rechtsbündig anzuordnen, lassen Sie das Eingabefeld einfach leer.
2.4 Farben Einstellungen
2.4.1 - "Header Topbar Hintergrundfarbe"
Gestalten Sie Ihren Header mit Ihrer individuellen Hintergrundfarbe
Verwenden Sie diese Option, um die Farbe des Hintergrunds Ihres Headers anzupassen. Geben Sie einfach den gewünschten Farbwert im HEX-Format ein, z. B. #ffffff für ein reines Weiß.
Beispiel:
- #ffffff: Weiß
- #000000: Schwarz
- #ff0000: Rot
- #00ff00: Grün
- #0000ff: Blau
2.4.2 - "Icon Farbe Top Level"
Definieren Sie hier den Farbwert des Top Level Icon
2.4.3 - "Text Farbe Top Level"
Definieren Sie hier den Farbwert des Top Level Icon
2.4.4 - "Pfeil Farbe Top Level"
Definieren Sie hier den Farbwert der kleinen dreieckigen Dropdown Menü Icon (Position rechtsseitig)
2.4.5 - "Hintergrundfarbe Dropdown Unterkategorien"
Definieren Sie hier den Farbwert der Hintergrundfarbe der Dropdownmenüs in der Topbar
2.4.6 "Icon Farbe Unterkategorien"
Definieren Sie hier den Farbwert der kleinen dreieckigen Unterkategorie Dropdown Menü Icon (Position rechtsseitig)
2.4.7 "Text Farbe Unterkategorien"
Definieren Sie hier den Farbwert der Schriftfarbe der Unterkategorie im Dropdownmenü der Topbar.
2.4.8 "Hintergrundfarbe Dropdown Unterkategorien, on hover"
Definieren Sie hier den Farbwert der Hintergrundfarbe beim hovern im Dropdown-Menü der Topbar.
3. Header Positionen
Alle Header-Elemente wie Icons, Suchleiste, Logo und das mobile Menü (nur im mobilen Viewport) können von Ihnen durch Zahleneingabe in der Plugin-Konfiguration neu positioniert werden.
3.1 Mobiles Menü Icon Position Einstellungen
Das Mobile Menü Icon (auch Hamburger Menü genannt) finden Sie ab dem Viewport Tablet Portrait, Smartphone Landscape und Smartphone Portrait. Stellen Sie nachfolgend die gewünschte Position per Zahlenwert ein.
3.1.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge des Mobiles Menü (im Smartphone und Tablet).
3.2 Logo Position Einstellungen
Das Logo ist bei den meisten Shops links aussen positioniert. Sie können es wenn Gewünscht aber auch an eine andere Position setzen. Stellen Sie dazu nachfolgend die Ausrichtung sowie die gewünschte Position per Zahlenwert ein.
3.2.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge des "Shop Logo".
Wir empfehlen hier Position "1".
3.2.2 - "Ausrichtung"
Wählen Sie hier nur eine Ausrichtung wenn die Shop Logo für sich alleine stehen soll.
Wir empfehlen hier die Einstellung "links"
3.3 Navigation Position Einstellungen
3.3.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge der "Shop Navigation"
Wir empfehlen hier Position "2".
3.3.2 - "Ausrichtung"
Wählen Sie hier nur eine Ausrichtung wenn die Navigation für sich alleine stehen soll.
Wir empfehlen hier die Einstellung "zentriert"
3.4 Suche Position Einstellungen
3.4.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge der "Shopsuche"
3.4.2 - "Ausrichtung"
Wählen Sie hier nur eine Ausrichtung wenn die Suche für sich alleine stehen soll.
Im Standard sollte hier keine Einstellung notwendig sein.
3.5 Merkzettel Position Einstellungen
3.5.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge des "Merkzettel"
3.5.2 - "Ausrichtung"
Wählen Sie hier nur eine Ausrichtung wenn das "Merkzettel" Icon für sich alleine stehen soll.
Im Standard sollte hier keine Einstellung notwendig sein.
3.6 Mein Konto Position Einstellungen
3.6.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge des "Mein Konto"
3.6.2 - "Ausrichtung"
Wählen Sie hier nur eine Ausrichtung wenn das "Mein Konto" Icon für sich alleine stehen soll.
Im Standard sollte hier keine Einstellung notwendig sein.
3.7 Warenkorb Position Einstellungen
3.7.1 - "Position"
Bestimmen Sie per Eingabe mit einer Positionszahl die Position/Reihenfolge den "Warenkorb"
3.7.2 - "Ausrichtung"
Wählen Sie hier nur eine Ausrichtung wenn das "Warenkorb" Icon für sich alleine stehen soll.
Im Standard sollte hier keine Einstellung notwendig sein.
3.8 Topbar Text/Icon versteckt Position Einstellungen
3.8.1 - "Position"
Bestimmen Sie per Eingabe einer Positionszahl die Position/Reihenfolge
3.9 Aufteilen Einstellungen
3.9.1 - "Aufteilen der Elemente, nach Nummer"
Das Prinzip ist ganz einfach. Sie möchten zum Beispiel 2 der angelegten Header Elemente linksseitig in der Navigation darstellen den Rest der weiteren Header Elemente rechtsseitig. Dann tragen sie hier ein ab welcher Positionsnummer die Elemente nach rechts aufgeteilt werden dürfen.
4. Header Einstellungen
4.1 Generelle Einstellungen
4.1.1 - "Maximale Breite des Logos beim scrollen, in px - Beispiel: 100"
4.1.2 - "Header über die volle Bildschirmbreite, mit Topbar und Suche"
4.1.3 - "Header padding"
Geben Sie den Inneren Abstand zu allen Seiten im Headerbereich an, Topbar nicht mit eingeschlossen (ohne Angabe px). die 4 Pixel Angaben beziehen sich dabei auf folgende Reihenfolge: oben, rechts, unten, links.
4.1.4 - "Header Hintergrundfarbe über die gesamte Desktop Breite, mit Topbar und Suche"
4.1.5 - "Header Rahmenfarbe unten"
Mit diesem Beispiel Wert "3px solid #f9cf81" erzeugen Sie am unteren Rand eine 3 Pixel starke Linie.
4.1.6 - "Rahmen Schatten"
Mit dem Beispiel Wert "0 1px 2px rgba(110, 110, 110, 0.41)" erzeugen Sie einen leichten Schatten am unteren Rand des Headers.
4.2 Sticky Header Einstellungen
4.2.1 - "Aktiviere sticky Header, pro viewport"
Geben Sie an in welchen Viewports der Header oben im Kopfbereich angedockt wird und angezeigt wird wenn auf der Seite nach unten gescrollt wird. Wählen Sie zwischen Desktop, Tablet Portrait, Tablet Landscape und Smartphone Portrait sowie Smartphone Landscape.
4.3 Farben Einstellungen
4.3.1 - "Header Hintergrundfarbe"
Geben Sie hier den Farbwert im Shopware Color-Element an. Zum Beispiel als Hex Wert #ffffff oder einfach per Farbauswahl.
4.3.2 - "Action Text Schriftfarbe, im Header"
Dem Header Icons Warenkorb, Mein Konto, Merkzettel, Topbar schließen und Suche kann eine eigene kurze Beschriftung hinzugefügt werden. Definieren Sie hier die Schriftfarbe.
4.3.3 - "Action Text Schriftfarbe beim hovern, im Header"
Definieren Sie hier die Hover Schriftfarbe.
4.3.4 - "Action Icon Farbe, im Header"
Definieren Sie hier die Icon Farbe (Warenkorb, Merkzettel, Mein Konto, Suche, Topbar).
4.3.5 - "Action Icon Farbe beim hovern, im Header"
Definieren Sie hier die Hover Farbe der Header Icons (Warenkorb, Merkzettel, Mein Konto, Suche, Topbar).
5. Navigation Einstellungen
5.1 Generelle Einstellungen
5.1.1 - "Nutzen Sie den vollen Header anstatt des minimalen Header"
Je nach Ihren Bedürfnissen und Präferenzen können Sie zwischen dem vollständigen und dem minimalen Header wechseln. Der vollständige Header (komplette Bildschirmbreite) bietet in der Regel mehr Platz für Menüs, Logos und andere Elemente im Vergleich zum minimalen Header (Shopware Standard 1400px).
5.1.2 - "Shopware standard Navigation einschalten"
Die Navigation in diesem Plugin ist optimiert auf eine Zeile mit dem Logo der Suche und den Header Icons. Es ist mit dieser Einstellung aber auch möglich wie im Shopware Standard die Navigation getrennt auf einer eigen Zeile zu setzen.
5.1.3 - "Einzeilige Navigation einschalten"
Bei zu vielen Kategorien brechen im Shopware Standard die Katgeorien in der Navigation in eine neue Zeile um. Mit dieser Einstellung können Sie jedoch weiter die Navigation auf einer Zeile belassen. Das Flex Header Premium Plugin erkennt zu viele Kategorien und blendet diese dann automatisch aus. Über die Navigationspfeile (links, rechts)können dann noch nicht angezeigte Kategorien eingeblendet werden.
5.1.4 - "Maximale Breite der Navigation, in px - Beispiel: 500"
Möchten Sie aus optischen Gründen die Navigation in der Breit einschränken, können Sie hier einen Wert eintragen. Zum Beispiel 500px dazu müsste dann von ihnen im Eingabefeld 500 eingetragen werden.
5.1.5 - "Anzahl der Elemente welche gescrollt werden, bei einzeiliger Navigation - Beispiel: 3"
Geben Sie an wieviele Kategorien gleichzeitig über die Navigationspfeile gescrollt werden dürfen.
5.1.6 - "Navigation Schriftgröße - Beispiel: 16"
Stellen Sie die Schriftgröße der Navigation wie gewünscht hiermit ein. Geben Sie den Pixel Wert bitte ohne px ein.
5.2 Home Einstellungen
5.2.1 - "Home ausschalten"
Im Flex Header Premium ist es ihnen möglich ein Home Icon mit Text (zum Beispiel Text: Home) zu aktivieren. Hier schalten Sie die Funktion Home ein bzw. aus.
5.2.2 - "Home Bezeichnung"
Setzen Sie eine eigene Bezeichnung über den Textbausteinen ein. Zum Beispiel: Home
5.2.3 - "Auswahl von Text und/oder Icon für Home"
Zur Auswahl stehen: "Nur Text - standard", "Nur Icon" oder "Text und Icon"
5.2.4 - "Eigenes Home Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
5.2.5 - "Home Icon"
Tragen Sie den Namen des SVG "Suche" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: home
5.2.6 - "Home Icon Größe"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
5.2.7 - "Home Icon Farbe"
Bestimmen Sie hier den Farbwert des SVG Icon. Zum Beispiel: #202020
5.2.8 - "Home Icon Farbe, beim hovern"
Bestimmen Sie hier den Hover Farbwert des SVG Icon. Zum Beispiel: #202020
5.2.9 - "Home Icon Farbe, aktiv"
Bestimmen Sie hier den Aktiv Farbwert des SVG Icon. Zum Beispiel: #202020
5.3 Farben Einstellungen
5.3.1 - "Navigation Text Farbe"
Bestimmen Sie hier die Schriftfarbe der Navigation. Zum Beispiel: #202020
5.3.2 - "Navigation Text Farbe, beim hovern"
Bestimmen Sie hier die Schriftfarbe der Navigation beim Hovern. Zum Beispiel: #333333
5.3.3 - "Navigation Text Farbe, aktiv"
Bestimmen Sie hier die Schriftfarbe der aktiven Navigation. Zum Beispiel: #4f89e7
5.3.4 - "Navigation Button Hintergrund Farbe, aktiv"
Bestimmen Sie hier die Hintergrundfarbe des aktiven Navigationsbutton. Zum Beispiel: #dadada
5.3.5 - "Aktive Navigation untere Rahmenfarbe - Beispiel: 2px solid #0b539b"
Bestimmen Sie hier die untere Rahmenfarbe des aktiven Navigationsbutton.
5.3.6 - "Pfeil Farbe - Beispiel: #bfbfbf"
Bestimmen Sie hier die Pfeilfarbe in der Navigation (rechts/links) wenn die Breite der Navigation nicht mehr ausreicht (Kategorie Teile ausgeblendet werden).
5.3.7 - "Pfeil Farbe, beim hovern - Beispiel: #333333"
Bestimmen Sie hier die Pfeilfarbe in der Navigation (rechts/links)beim hovern
6. Suche Einstellungen
6.1 Suche generelle Einstellungen
6.1.1 - "Suche maximale Breite"
Möchten Sie aus optischen Gründen die Suche in der Breit selbst bestimmen, können Sie hier einen Wert eintragen. Zum Beispiel 300px dazu müsste dann von ihnen im Eingabefeld 300 eingetragen werden.
6.1.2 - "Suche unter die Navigation verschieben"
Sie haben die Möglichkeit die Navigation nur als Suche Icon darzustellen. Die Suche fährt bei Klick auf das Suche Icon unter dem Header hervor.
6.1.3 - "Suche Hintergrundfarbe"
Bestimmen Sie hier die Hintergrundfarbe der ausfahrbaren Suche. Zum Beispiel: #ffffff Dabei können Sie auch mit leichten Transparent Farbwerten abeiten.
6.1.4 - "Verstecke die Suche, im Mobilen Bereich"
In den Mobilen Viewports wird die geschlossen Dargestellt.
6.2 Suche Text Einstellungen
6.2.1 - "Suche Text einschalten, im Header"
Aktivieren der eigene Beschriftung unter dem Header Suche Icon.
6.2.2 - "Suche Text"
Fügen Sie eine eigene Beschriftung unter dem Header Suche Icon.
6.2.3 - "Suche Text Schrift, im Header"
Name der Schriftart. Zum Beispiel: Open Sans
6.2.4 - "Suche Text Schriftgröße, im Header"
Größe der Schrift. Zum Beispiel: 20
6.2.5 - "Suche Text Schriftstärke, im Header"
Stärke der Schriftart. Zum Beispiel: 600
6.3 Suche Icon geschlossen im Header Einstellungen
6.3.1 - "Suche Icon"
Tragen Sie den Namen des SVG "Suche" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: search
6.3.2 - "Eigenes Suche Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
6.3.3 - "Suche Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
6.3.4 - "Suche Icon Abstand links"
Tragen Sie den Pixelwert für den Abstand links. Zum Beispiel: 5
6.3.5 - "Suche Icon Größe, in px"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
6.4 Suche Icon offen im Header Einstellungen
6.4.1 - "Suche schließen Icon"
Tragen Sie den Namen des SVG "Suche schließen" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: x
6.4.2 - "Eigenes Suche Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
6.4.3 - "Suche Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
6.4.4 - "Suche Icon Abstand links"
Tragen Sie den Pixelwert für den Icon Abstand links. Zum Beispiel: 5
6.4.5 - "Suche offen Icon Größe, in px"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
6.4.6 - "Suche offen Icon Farbe"
Bestimmen Sie hier den Farbwert des Suche offen SVG Icon. Zum Beispiel: #202020 Das Icon wird sichtbar sobald die Sucheingabe unter dem Header geöffnet wurde.
6.4.7 - "Suche offen Icon Farbe, on hover"
Bestimmen Sie hier den Farbwert des Suche offen SVG Icon beim hovern. Zum Beispiel: #bababa
6.5 Suche Text/Icon Eingabefeld Einstellungen
6.5.1 - "Suche Schrift"
Name der Schriftart. Zum Beispiel: Open Sans
6.5.2 - "Suche Schriftgröße"
Größe der Schrift. Zum Beispiel: 20
6.5.3 - "Suche Icongröße"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
6.5.4 - "Suche Eingabefeld Hintergrundfarbe"
Bestimmen Sie hier den Farbwert der Hintergrundfarbe des Suche-Eingabefelds. Zum Beispiel: #ffffff
6.5.5 - "Suche Eingabefeld Schriftfarbe"
Bestimmen Sie hier den Farbwert des Suche Einabefeld. Zum Beispiel: #ffffff
6.5.6 - "Suche Button Hintergrundfarbe"
Bestimmen Sie hier den Farbwert des Suche Button. Zum Beispiel: #202020
6.5.7 - "Suche Button Icon Farbe"
Bestimmen Sie hier den Farbwert des "Suche Button" SVG Icon. Zum Beispiel: #202020
6.5.8 - "Suche Linie unten einschalten"
Aktivieren Sie die untere Rahmen Linie
6.5.9 - "Suche Linie unten Farbe"
Bestimmen Sie hier den Farbwert der Suche Linienfarbe. Zum Beispiel: #8e8e8e
7. Merkzettel Einstellungen
7.0.1 - "Merkzettel Text einschalten"
Aktivieren der eigene Beschriftung unter dem Header Merkzettel Icon.
7.0.2 - "Merkzettel Text"
Setzen Sie eine eigene Bezeichnung über den Textbausteinen ein. Zum Beispiel: Merkzettel
7.0.3 - "Merkzettel Text Schrift"
Name der Schriftart. Zum Beispiel: Open Sans
7.0.4 - "Merkzettel Text Schriftgröße"
Größe der Schrift. Zum Beispiel: 20
7.0.5 - "Merkzettel Text Schriftstärke"
Stärke der Schriftart. Zum Beispiel: 600
7.0.6 - "Merkzettel Icon"
Tragen Sie den Namen des SVG "Merkzettel" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: heart
7.0.7 - "Eigenes Merkzettel Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
7.0.8 - "Merkzettel Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
7.0.9 - "Merkzettel Icon Abstand links"
Tragen Sie den Pixelwert für den Icon Abstand links. Zum Beispiel: 5
7.0.10 - "Merkzettel Icon Größe, in px"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
7.0.11 - "Badge Anzahl Merkzettel ausschalten"
Deaktivieren Sie das Badge der Mengen Anzeige des Merkzettel
7.0.12 - "Badge Anzahl Schriftfarbe"
Größe der Schrift. Zum Beispiel: 20
7.0.13 - "Badge Anzahl Hintergrundfarbe"
7.0.14 - "Merkzettel Badge Abstand oben"
Tragen Sie den Pixelwert für den Badge Abstand oben. Zum Beispiel: 5
7.0.15 - "Merkzettel Badge Abstand rechts"
Tragen Sie den Pixelwert für den Badge Abstand rechts. Zum Beispiel: 5
7.0.15 - "Merkzettel Badge Abstand rechts"
Tragen Sie den Pixelwert für den Badge Abstand rechts. Zum Beispiel: 5
8. Mein Konto Einstellungen
8.0.1 - "Mein Konto Text einschalten"
Aktivieren der eigene Beschriftung unter dem Header Mein Konto Icon.
8.0.2 - "Mein Konto Text"
Setzen Sie eine eigene Bezeichnung über den Textbausteinen ein. Zum Beispiel: Mein Konto
8.0.3 - "Mein Konto Text Schrift"
Name der Schriftart. Zum Beispiel: Open Sans
8.0.4 - "Mein Konto Text Schriftgröße"
Größe der Schrift. Zum Beispiel: 20
8.0.5 - "Mein Konto Text Schriftstärke"
Stärke der Schriftart. Zum Beispiel: 600
8.0.6 - "Anzeigen ob Kunde eingelogt ist"
Aktiviert das Icon Haken solange der Kunde im Mein Konto eingeloggt ist.
8.0.7 - "Haken Größe"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein.
8.0.8 - "Haken Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
8.0.9 - "Haken Icon Abstand rechts"
Tragen Sie den Pixelwert für den Abstand rechts. Zum Beispiel: 5
8.0.10 - "Haken Icon Farbe"
Bestimmen Sie hier den Farbwert des "Haken" SVG Icon. Zum Beispiel: #202020
8.0.11 - "Mein Konto Icon"
Tragen Sie den Namen des SVG "Mein Konto" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: avatar
8.0.12 - "Eigenes Mein Konto Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
8.0.13 - "Mein Konto Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
8.0.14 - "Mein Konto Icon Abstand links"
Tragen Sie den Pixelwert für den Abstand links. Zum Beispiel: 5
8.0.15 - "Mein Konto Icon Größe, in px"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
9. Warenkorb Einstellungen
9.0.1 - "Warenkorb Text einschalten"
Aktivieren der eigene Beschriftung unter dem Header Warenkorb Icon.
9.0.2 - "Warenkorb Text"
Setzen Sie eine eigene Bezeichnung über den Textbausteinen ein. Zum Beispiel: Warenkorb
9.0.3 - "Warenkorb Text Schrift"
Name der Schriftart. Zum Beispiel: Open Sans
9.0.4 - "Warenkorb Text Schriftgröße"
Größe der Schrift. Zum Beispiel: 20
9.0.5 - "Warenkorb Text Schriftstärke"
Stärke der Schriftart. Zum Beispiel: 600
9.0.6 - "Warenkorb Icon"
Tragen Sie den Namen des SVG "Warenkorb" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: cart
9.0.7 - "Eigenes Warenkorb Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
9.0.8 - "Warenkorb Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
9.0.9 - "Warenkorb Icon Abstand links"
Tragen Sie den Pixelwert für den Icon Abstand links. Zum Beispiel: 5
9.0.10 - "Warenkorb Icon Größe, in px"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
9.0.11 - "Gesamtpreis Warenkorb ausschalten"
Deaktivieren Sie die Gesamtpreis Anzeige.
9.0.12 - "Gesamtpreis Schriftgröße"
Größe der Schrift. Zum Beispiel: 20
9.0.13 - "Gesamtpreis Schriftfarbe"
Bestimmen Sie hier den Farbwert der Schriftfarbe. Zum Beispiel: #202020
9.0.14 - "Badge Artikel Anzahl Warenkorb ausschalten"
Deaktivieren Sie das Badge für die Warenkorb Mengen Anzeige.
9.0.15 - "Badge Artikel Anzahl Schriftfarbe"
Bestimmen Sie hier den Farbwert der Schriftfarbe. Zum Beispiel: #202020
9.0.16 - "Badge Artikel Anzahl Hintergrundfarbe"
Bestimmen Sie hier den Farbwert der Hintergrundfarbe. Zum Beispiel: #65b32e
9.0.17 - "Warenkorb Badge Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
9.0.18 - "Warenkorb Badge Abstand rechts"
Tragen Sie den Pixelwert für den Icon Abstand rechts. Zum Beispiel: 5
10. Mobil Einstellungen
10.0.1 - "Mehr/weniger Text einschalten"
Aktivieren der eigene Beschriftung unter dem Header Mehr/weniger Icon.
10.0.2 - "Mehr/weniger Title"
Setzen Sie eine Hover Text Title über den Textbausteinen ein. Zum Beispiel: Mehr/Weniger
10.0.3 - "Mehr Text"
Setzen Sie eine eigene Bezeichnung über den Textbausteinen ein. Zum Beispiel: Mehr
10.0.4 - "Weniger Text"
Setzen Sie eine eigene Bezeichnung über den Textbausteinen ein. Zum Beispiel: Weniger
10.0.5 - "Mobiles Hamburger Icon"
Tragen Sie den Namen des "Mobilen Hamburger" Icon ein den Sie in das "Eigene SVG Icon" Plugin geladen haben. Zum Beispiel: stack
10.0.6 - "Eigenes mobiles Hamburger Icon verwenden, nur verfügbar wenn "Eigene Svg Icons" installiert ist"
Aktivieren Sie die SVG Unterstützung im Flex Header Premium Plugin durch das "Eigene SVG Icon" Plugin
10.0.7 - "Mobile Icon Abstand oben"
Tragen Sie den Pixelwert für den Icon Abstand oben. Zum Beispiel: 5
10.0.8 - "Mobile Icon Abstand links"
Tragen Sie den Pixelwert für den Abstand links. Zum Beispiel: 5
10.0.9 - "Mobile Icon Größe, in px"
Bestimmen Sie die Icon Größe in px. Tragen sie den Zahlenwert ohne der Angabe px ein. Im Shopware Standard sind die SVG Icons 22px groß.
10.0.10 - "Logo in eigener Zeile - mobiler Bereich"
Aktivieren Sie das Ihr Logo mit den Header Icons automatisch auf eine Zeile (nur Mobile Ansicht) gesetzt wird.
11. Logo Einstellungen
11.0.1 - "Logo Größe Desktop"
Bestimmen Sie Ihre Logogröße für den Viewport Desktop
11.0.2 - "Logo Größe Tablet quer"
Bestimmen Sie Ihre Logogröße für den Viewport Tablet quer
11.0.3 - "Logo Größe Tablet hochkant"
Bestimmen Sie Ihre Logogröße für den Viewport Tablet hochkant
11.0.4 - "Logo Größe Mobile quer"
Bestimmen Sie Ihre Logogröße für den Viewport Smartphone quer
11.0.5 - "Logo Größe Mobile hochkant"
Bestimmen Sie Ihre Logogröße für den Viewport Smartphone hochkant
12. Debug
12.0.1 - "Nicht nachladen"
Der Header wird automatisch beim anpassen der Viewport Browser-Größe neu geladen um alle Einstellungen optimal anzeigen zu können. Das nachladen kann für Entwickler hilfreich sein abzuschalten bis es zum Livegang des Shops kommmt.