Plugin Dokumentation „Sticky Menü Premium - SW6“
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 Storefrontauswählen.
2. Logo Einstellungen
2.1 Logo Abstand oben - Beispiel: 5
Sollte ein wenig mehr Abstand nach oben gewünscht sein so können Sie hiermit den Wert eintragen damit das Sticky Logo mehr Abstand erhält.
2.2 Logo Abstand unten - Beispiel: 5
Im Shopware Standard ist ein Abstand unter dem Logo eingetragen. Möchten Sie jedoch das Sticky Menü schmal in der Höhe halten so sollte hier der Wert 0 eingetragen werden.
2.3 Logo anzeigen
Über das Multi Dropdown Menü bestimmen Sie in welchem Viewport das Logo ausgewählt werden darf. Ist der Viewport nicht ausgewählt wird auch kein Logo in diesem Viewport mehr angezeigt. Wir empfehlen hier das Sticky Logo nicht im Mobilen Portrait sowie im Tablet Portrait an zeigen zu lassen. Da das Logo aus Platzgründen eine eigen Zeile erhält und das Stick somit zu Viel Display Platz einnehmen könnte.
2.4 Sticky Logo Größe - Beispiel: 50
Mit diesem Wert geben Sie die maximale Höhe des Plugins in Pixel an. Wir empfehlen 50px als Wert zu nutzen. Tragen Sie dazu einfach nur den Wert 50 ohne Angabe von px ein. Das übernimmt das Plugin.
2.5 Sticky Logo auswählen
Durch Auswahl bzw. hochladen des zusätzlichen Logos für das Sticky Menü können Sie im Sticky Menü ein individuelles Logo einsetzen. Wir empfehlen ein deutlich kleineres Logo welches das Sticky nicht zu hoch werden lässt.
3. Viewport Einstellungen
4. Sticky Header
4.1 Sticky Header einschalten
Schalten Sie den Sticky Header (oberen Teil des Sticky Menü) an oder ab. Wenn der Sticky Header abgeschaltet ist wird nur noch die Sticky Navigation im Sticky Menü Shopware 6 Plugin angezeigt.
4.2 Sticky Header volle Breite
Wählen Sie aus ob der Sticky Header über die volle Bildschirmbreite angezeigt werden soll oder nur in Shopware Standard Containerbreite von 1400px.
4.3 Sticky Header volle Breite Hintergrundfarbe
Wählen Sie aus ob die Hintergrundfarbe über die volle Bildschirmbreite angezeigt werden soll.
4.4 Sticky Header Hintergrundfarbe Standard - Beispiel: #fdfdc3
Wählen Sie über den Color Picker einen Farbwert aus. Dabei kann auch ein Transparenz Wert gewählt werden.
4.5 Sticky Header Farbverlauf einschalten
Wenn Sie einen Farbverlauf im Sticky Header nutzen möchten dann schalten Sie hier den Farbverlauf ein und tragen in den nächsten Feldern die entsprechenden Werte dafür ein. Diese werden nur korrekt angezeigt wenn Sie hier in allen Feldern einen Wert eingetragen haben.
4.6 Sticky Header Hintergrundfarbe 1 - Beispiel: #ffffff
Wählen Sie über den Color Picker einen Farbwert für die erste Hintergrundfarbe (Farbverlauf) des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
4.7 Sticky Header Hintergrundfarbe 2 - Beispiel: #f5f5f6
Wählen Sie über den Color Picker einen Farbwert für die zweite Hintergrundfarbe (Farbverlauf) des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
4.8 Linear Gardient 1 - Beispiel: 0
Geben Sie hier den Prozentualen Wert für den Farbverlauf der ersten Hintergrundfarbe an.
4.9 Linear Gardient 2 - Beispiel: 100
Geben Sie hier den Prozentualen Wert für den Farbverlauf der zweiten Hintergrundfarbe an.
4.10 Auswahl Farbeverlauf von oben oder unten
Wählen Sie über das Dropdown Menü ob die Farbwerte für den Verlauf von oben oder von unten angezeigt werden soll.
4.11 Sticky Menü Schatten - Beispiel: 0 1px 5px rgba(110, 110, 110, 0.41)
Dem Sticky Header kann ein Schatten hinzugefügt werden. Dieser sollte wie im Beispiel in korrekter Schreibweise eingetragen werden.
5. Sticky Header Icon Einstellungen
5.1 Mein Konto anzeigen
Sollten Sie den "Mein Konto Button" (Icon) nicht benötigen so kann man mit dieser Einstellung den Button (Icon) im Sticky Header abschalten.
5.2 Mein Konto Icon Farbe - Beispiel: #878787
Wählen Sie über den Color Picker einen Farbwert für das Mein Konto Icon des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
5.3 Warenkorb anzeigen
Sollten Sie den "Warenkorb Button" (Icon) nicht benötigen so kann man mit dieser Einstellung den Button (Icon) im Sticky Header abschalten.
5.4 Warenkorb Icon Farbe - Beispiel: #878787
Wählen Sie über den Color Picker einen Farbwert für das Warenkorb Icon des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
5.5 Warenkorb Summe Icon Farbe - Beispiel: #ff6666
Wählen Sie über den Color Picker einen Farbwert für die Warenkorb Summe des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
5.6 Sticky Menü Icon anzeigen
Sollten Sie den "Menü Button" (Icon) für das ausklappen der Navigation nicht benötigen so kann man mit dieser Einstellung den Button (Icon) im Sticky Header abschalten.
5.7 Icon Auswahl Sticky Menü
Im nächsten Feld kann man den Icon Namen eintragen um ein eigenes Menü Icon zu nutzen. Mit dieser Einstellung wählen Sie ob es ein Shopware 6 Icon (diese sind bereits im Shopsystem eingebunden) oder ein i-Icon wie Font Awesome Icon bzw. Shopware 5 Icons ist. Diese Auswahl ist sehr wichtig damit der korrekte Code im Sticky Header eingetragen wird. Font Awesome Icons und auch Shopware 5 Icons müssen zur Nutzung jedoch erst in einem Theme Plugin eingebunden sein um angezeigt werden zu können. Eine Icon Übersicht finden Sie hier:
https://ultra-media.de/Unternehmen/Shopware-6-Icon-UEbersicht/
https://ultra-media.de/Unternehmen/Shopware-Icon-Uebersicht/
https://fontawesome.com/icons?d=gallery
5.8 Icon Name Sticky Menü - Beispiel: stack (Shopware 6 Icon)
Tragen Sie hier die Bezeichnung des Icon ein. Für das Menü Icon haben wir ein Shopware 6 Icon ausgewählt mit der Bezeichnung stack. Beachten Sie die korrekte Schreibweise da sonst das Icon nicht angezeigt werden kann.
5.9 Sticky Menü Icon Farbe - Beispiel: #878787
Wählen Sie über den Color Picker einen Farbwert für das Menü Icon des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
5.10 Icon Hover Farbe - Beispiel: #4fa9ee
Wählen Sie über den Color Picker einen Farbwert für die Warenkorb Summe des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
6. Suche Einstellungen
6.1 Suche anzeigen
Bestimmen Sie ob die Suche auch im Sticky Header beim scrollen angezeigt werden darf.
6.2 Suche Hintergrundfarbe - Beispiel: #F3F3F3
Wählen Sie über den Color Picker einen Farbwert für die Hintergrundfarbe der Suche des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
6.3 Rahmen Farbe - Beispiel: #e8e8e8
Wählen Sie über den Color Picker einen Farbwert für die Rahmenfarbe der Suche des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
6.4 Platzhalter und Schrift Farbe - Beispiel: #5c5c5c
Wählen Sie über den Color Picker einen Farbwert für die Schriftfarbe des Platzhalters in der Suche des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
6.5 Suche Icon Farbe - Beispiel: #878787
Wählen Sie über den Color Picker einen Farbwert für das Menü Icon des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
6.6 Nur ein Unterstrich, bei der Suche
Wählen Sie ob der Rahmen der Suche nur als Unterstrich angezeigt werden soll.
7. Sticky Navigation Einstellungen
7. 1 Sticky Navigation volle Breite
Wählen Sie aus ob die Sticky Navigation über die volle Bildschirmbreite angezeigt werden soll oder nur in Shopware Standard Containerbreite von 1400px.
7.2 Sticky Navigation volle Breite Hintergrundfarbe
Wählen Sie aus ob die Hintergrundfarbe über die volle Bildschirmbreite angezeigt werden soll.
7.3 Sticky Navigation Hintergrundfarbe - Beispiel: #fafafa
Wählen Sie über den Color Picker einen Farbwert für die Hintergrundfarbe des Sticky Headers aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.4 Sticky Navigation Farbverlauf einschalten
Wenn Sie einen Farbverlauf in der Sticky Navigation nutzen möchten dann schalten Sie hier den Farbverlauf ein und tragen in den nächsten Feldern die entsprechenden Werte dafür ein. Diese werden nur korrekt angezeigt wenn Sie hier in allen Feldern einen Wert eingetragen haben.
7.5 Sticky Navigation Hintergrundfarbe 1 - Beispiel: #ffffff
Wählen Sie über den Color Picker einen Farbwert für die erste Hintergrundfarbe (Farbverlauf) der Sticky Navigation aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.6 Sticky Navigation Hintergrundfarbe 2 - Beispiel: #f5f5f6
Wählen Sie über den Color Picker einen Farbwert für die zweite Hintergrundfarbe (Farbverlauf) der Sticky Navigation aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.7 Linear Gardient 1 - Beispiel: 0
Geben Sie hier den Prozentualen Wert für den Farbverlauf der ersten Hintergrundfarbe an.
7.8 Linear Gardient 2 - Beispiel: 100
Geben Sie hier den Prozentualen Wert für den Farbverlauf der zweiten Hintergrundfarbe an.
7.9 Auswahl Farbeverlauf von oben oder unten
Wählen Sie über das Dropdown Menü ob die Farbwerte für den Verlauf von oben oder von unten angezeigt werden soll.
7.10 Sticky Navigation einschalten
Schalten Sie die Sticky Navigation (unterer Teil des Sticky Menü) an oder ab. Wenn die Sticky Navigation abgeschaltet ist wird nur noch der Sticky Header im Sticky Menü Shopware 6 Plugin angezeigt.
7.11 Zeige Sticky Navigation geöffnet
Wählen Sie ob der Shop Kunde selbst die Navigation über das Icon Symbol öffnen soll oder aber ob die Sticky Navigation dauerhaft geöffnet dargestellt werde soll. Dabei kann der Kunde die Navigation immer noch selbständig wieder schließen.
7.12 Sticky Navigation Menüpunkte in Großschrift umwandeln
Wandeln Sie alle Menüpunkte in Großbuchstaben um. Diese Ansicht kann zu einer optischen Verbesserung für Ihre Kunden führen.
7.13 Abstand oben - Beispiel: 8
Bestimmen Sie den Abstand nach oben für die Kategorien des Navigationsmenü's. Dabei wird der Wert in Pixeln eingetragen. Tragen Sie hier bitte nur den Zahlenwert ein.
7.14 Abstand unten - Beispiel: 8
Bestimmen Sie den Abstand nach oben für die Kategorien des Navigationsmenü's. Dabei wird der Wert in Pixeln eingetragen. Tragen Sie hier bitte nur den Zahlenwert ein.
7.15 Sticky Navigation Menüpunkte Abstand rechts - Beispiel: 32
Bestimmen Sie den Abstand nach rechts für die einzelnen Kategorien des Navigationsmenü's. Dabei wird der Wert in Pixeln eingetragen. Tragen Sie hier bitte nur den Zahlenwert ein.
7.16 Navigation Schriftart - Beispiel: Open Sans
Wenn Sie andere Schriftarten in den Shop eingebunden haben können Sie die Schriftart hier eintragen. Die Schriftart Open Sans kann zum Beispiel über das Schriften Plugin "Schriften und Icons einbinden Premium - SW6 " eingesetzt werden.
7.17 Navigation Schrifgröße - Beispiel: 16
Hier wird die Schriftgröße in Pixel eingesetzt. Tragen Sie hier bitte nur den Zahlenwert ein.
7.18 Navigation Schriftfarbe - Beispiel: #5c5c5c
Wählen Sie über den Color Picker einen Farbwert für die Schriftfarbe der Sticky Navigation aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.19 Navigation Schriftfarbe, beim hovern - Beispiel: #858585
Wählen Sie über den Color Picker einen Farbwert für die Hover Schriftfarbe der Sticky Navigation aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.20 Navigation aktive Schriftfarbe - Beispiel: #f26e6e
Wählen Sie über den Color Picker einen Farbwert für die Schriftfarbe der aktiven Sticky Navigation aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.21 Navigation aktive Unterstrich Farbe - Beispiel: #5c5c5c
Wählen Sie über den Color Picker einen Farbwert für den aktiven Unterstrich der Sticky Navigation aus. Dabei kann auch ein Transparenz Wert mit ausgewählt werden.
7.22 Sticky Menü Schatten - Beispiel: 0 1px 5px rgba(110, 110, 110, 0.41)
Der Sticky Navigation kann ein Schatten hinzugefügt werden. Dieser sollte wie im Beispiel in korrekter Schreibweise eingetragen werden.
8. Einblenden beim scrollen Einstellungen
8.1 Animation Zeit in ms - Beispiel 300
Bestimmen Sie den Wert ab wann das Sticky Menü eingeblendet werden soll.
9. Ausblenden beim scrollen Einstellungen
9.1 Animation einschalten
Mit dieser Einstellung kann eine Animation für das Sticky Menü eingeschaltet werden welches das Menü ab einer definierten Bildschirmhöhe beim scrollen wieder ausgeblendet werden soll. Erst wenn der Kunde wieder nach oben zum definierten Wert scrollt wird das Sticky Menü wieder eingeblendet.
9.2 Animation Zeit in ms
Tragen Sie hier den Wert ein ab wann die Animation ausgelöst werden soll wenn der Wert der Animationsentfernung ausgelöst wurde.
9.3 Animationsentfernung vom Header in px, wenn das Sticky-Menü nicht mehr sichtbar ist
Bestimmen Sie ab welcher Entfernung vom Browser Kopfbereich das Sticky Menü aus bzw. eingeblendet werden soll.