Header

Hier findest du alle Einstellungsmöglichkeiten zur FGestalrtung deines Shopheaders.

Headerversion

Das Snackys-Template bringt 10 verschiedene vordefinierte Header mit sich. Du kannst zwischen folgenden Header-Varianten wechseln:

Standard Snackys:

Dies ist der Standard-Snackys Header. Die Suche ist direkt sichtbar und die Shopnavigation mit der gewählten Brandcolor hinterlegt.

Du möchtest das Logo links und die Suche in die Mitte?

Mit folgendem CSS-Befehlt kannst du das Logo und die Suche in der Desktopansicht tauschen. Trage den Code einfach im Tab CSS/HTML unter Eigenes CSS ein:

@media screen and (min-width: 768px){
  #logo{
    order: -1;
    justify-content: flex-start
  }
  #logo img{
    object-position: left center;
  }
  #search form{
    margin:auto;
  }
}

Navigation mittig:

In dieser Header-Version sitzt die Naviagtion Mitting zwischen Logo und den Shop-Actions. Diese Header-Version sollte nur bei wenigen kategoriepunkten verwendet werden, da die Menüpunkte sonst bei kleienren Auflösungen in das Logo und die Shop-Actions hineinragen können.

Schon gewusst?

Wenn du statt dem Megamenü das Dropdown-menü aktiviert hast, kannst du alle deine Kategorien in einen Oberpunkt zusammenfassen, um die Navigation zu verkürzen.


Light:

In dieser Header-Version werden bei aktivierter Option "Social-Media-Buttons im Header" links deine Social Media Kanäle angezeigt und die Suche hinter einem Icon versteckt. Die Naviagtion sitzt dezent auf weißem Hintergrund


Light mit Brandcolor:

Eine Erweieterung der Header-variante "LighT", bei der die Navigation mit deiner Brandcolor hinterlegt ist


Fullscreen Simple:

Bei dieser Header-Version wird auf der Startseite ein Fullscreen-Element eingefügt, auf dem auch dein header platziert ist. Der Header ist für dunkle Fullscreen-Elemente geeignet, da die SHop-Action-Icons hier in weiß dargestellt werden. Du kannst dabei zwischen folgenden Fullscreen-Elementen wählen:

  • Video (dafür musst du zusätzlich ein eigenes Video- und Video-Placeholder-Bild einfügen)
  • Slider (Den Slider pglegst du unter Darstellung / EIgene Inhalte / Slider)
  • Banner (Diesen pflegst du unter Darstellung / EIgene Inhalte / Banner)

Das Megamenü wechselt hier automatisch zu einem Fullscreen-Menü. 


Fullscreen Simple Light:

Eine Erweiterung des "Fullscrene Simple" hEaders. Während der "Fullscreen Simple" Header für dunkleFullscreen_Elemente optimiert ist, ist der Fullscren Simple Light Header für helle Fullscreen-Elemente geeignet, da hier die Shop-Action_Icons in schwarz angezeigt werden.


Fullscreen Navigation:

Auch bei diesem Header wird auf der Startseite ein Fullscreen_Element eingefügt. Im Gegensatz zum "Fullscreen Simple" Header, ist hier deine Shopnaviagtion direkt mittig zwischen dem Logo und den SHop-Actions sichtbar. Der Header ist für dunkle Fullscreen_Elemente geeignet, da die Naviagtion und die Shop-Action-Icons in weiß angezeigt werden. Wie der Header "Naviagtion Mittig" ist dieser für Shops mit wenig kategoriepunkten geeignet.


Fullscreen Navigation Light:

Eine Erweiterung des "Fullscreen Naviagtion" Headers. Dieser ist für helle FUllscreen-Elemente geeignet, da die Naviagtion und die Shop-Action-Buttons in Schwarz angezeigt werden.


Simple:

Du möchtest gerne das Fullscreen-Megamenü verwenden, jedoch kein FUllscreen-Element auf der Strartseite Dann ist dieser Header genau richtig für dich.


Ultralight:

Dieser ultra schmale Header setzt deinen Shop-Inhalt in den Fokus. Der Header nimmt dabei nur einen minimalen Platz ein und mehr Content vomM Shop ist direkt beim Seitenaufruf sichtbar.

Fullscreen Element

Wenn du einen der vier Fullscreen-Header ausgewählt hast, bestimmst du über diese Einstellung, welches Element auf der Startseite auf voller Fläche angezeigt werden soll. Du kannst dabei aus folgenden Elementen wählen:

  • Video (wird in den nachfolgenden zwei EInstellungen gepflegt)
  • Slider (wird unter Darstellung / Eigene Inhalte / Slider gepflegt)
  • Banner (wird unter Darstellung / EIgen Inhalte / Banner gepflegt)

Hintergrund Video

Wenn du einen der Fullscreen-header verwendest und das Fullscreen Element auf "Video" gestellt hast, trägst du hier den Pfad zu deinem gewünschten Video ein. Über das Lupen-Symbol kannst du auch direkt ein Video über die Dateiverwaltung hochladen. Zur Unterstützung aller modernen Browser empfehlen wir, das Video im "MP$" Format abnzulegen.


Video Placeholder Bild

Wenn du ein Fullscreen-Video verwendest, solltest du hier ein Video-Placeholder-Bild einfügen. DIeses wird gezeigt, solange das Video lädt. Damit in dieser zeit nicht nur eine graue Fläche angezeigt wird, solltest du hier ein Bild hinterlegen

Topbar anzeigen

Die Topbar enthält je nach deinen Shop- und Plugin-Einstellungen den Sprach- und Währunsgwechsler, deine Social Media Kanäle und die Links aus der Linkgruppe "kopf". Auf Wunsch kannst du die Topbar über diese Einstellung komplett abschalten.

Alert Überschrift

Wenn du einen Sprach- und/oder Währungswechsler hast und die Topbar ausblendestr, stelle sicher, dass du EisntellunG Sprach- und Währungswechsler im Footer aktiovierst, damit deine Besucher auch weiterhin ihre Sprache- und Währung wechseln könnenb.

Vorteile im Header anzeigen

Mit dieser Einstellung hast du die Möglichkeit bis zu vier Vorteile deines Shops in einer eigenen leiste im header anzuzeigen. Die Leiste wird über der Topbar platziert. Den Inhalt der Vorteile steuerst du über folgende Sprachvcariablen:

  • headerBenefit1
  • headerBenefit2
  • headerBenefit3
  • headerBenefit4

Snackys Template mit drei aktiven Vorteilen im Header

Erscheinungsbild der eiste anpassen

Im Tab Farben unter der Einstellung Styling Vorteile Header kannst du zwischen drei verschiedenen Styles für die Vortiuelsleiste wählen

Promotion-Leiste im Header anzeigen

Mit der Promotionleiste hast du die Möglichkeit, auf Aktionen oder bla bla hinzuweisen. Die leiste wird noch über den Vorteilen angezeihgt und kann vom Besiucher auf Wunsch geschlossen werden. Den Inhalt der Leiste pflegst du über die folgende Sprachvariable:

  • headerPromo

Aktivierte Promotion-Leiste im Snackys-Template

Erscheinmungsbild der Leiste anpassen

Im Tab Farben kannst du über die Einstellung "Hintergrund Promotion-Leiste" selbst die Hintergrundfarbe dieser leiste festlegen. Die Schrift darauf wird immer in weiß dargestellt, achte also auf einen guten Kontrast zwischen Hintergudn und Textfarbe.

Mobiles Logo

Du hast ein recht detailreiches Logo, welches Mobil nur noch sachwer zu erkennen ist? Dann hast du hier die Möglichkeit, ein separates Logo für Mobilgeräte zu hinterlegen. Rufe dazu einfach über das Lupen-Symbol die Dateiverwaltung auf, lade dein Logo hoch und wähle es aus.

Das Logo wird ab eriner Bildschrimgröße von kleiner als 768px ausgegeben.

Loading ...