---
title: "Academy Article"
canonical_url: "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten"
locale: de
meta:
"og:title": "Academy Article"
---
[Zur Startseite](https://academy.laioutr.com/)
- [Storefront-Funktionen](https://academy.laioutr.com/bereiche/storefront-funktionen)
- [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)
- [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)
# Shop-Navigation und Footer einrichten
Header Shop, Mega Menu oder Menu Side by Side, Top Bar und Footer bilden die Navigation einer Storefront und werden meist als globale Sections gepflegt. In Studio werden Menüpunkte, Suche, Service-Links, Kontaktangaben und Footer-Spalten einmal eingerichtet und je Sprache angepasst.
## Bevor du startest
- Tarif
- Laioutr-UI-Lizenz für das Projekt (Plattform-Variante)
- Rolle
- Editor oder Admin im Projekt
- Dauer
- 10 Min.
### Voraussetzungen
- Header und Footer als globale Sections im Projekt
- Logo in der Mediathek
- Angebundenes Shop-System für Kategoriemenüs
Zuletzt geprüft am 15. Oktober 2026
Header und Footer rahmen jede Seite der Storefront. Laioutr UI liefert dafür fertige Sections, die in der Regel als globale Sections angelegt sind: Eine Änderung wirkt auf allen Seiten, die sie verwenden.
### Header Shop
Der **Header Shop** trägt Logo, Suche mit Vorschlägen und Symbole für Kundenkonto, Merkliste und Warenkorb mit Zähler. Für Desktop steht ein **Mega Menu** für breite Sortimente oder ein **Menu Side by Side** für tiefe Kategoriebäume bereit, mobil öffnet ein Off-Canvas-Menü. Beim Scrollen nach unten verschwindet der Header und kommt beim Scrollen nach oben zurück. Seiten ohne Shop nutzen den schlankeren **Header Basic**.
### Top Bar
Die **Top Bar** über dem Header zeigt auf Desktop Service-Links, Sprachauswahl und Dark-Mode-Schalter.
### Footer
Der **Footer** bündelt Logo, Telefon, E-Mail und Adresse, bis zu vier Menüspalten, Social-Media-Symbole und die Copyright-Zeile. Inhalte lassen sich je Sprache pflegen, sodass jeder Markt passende Links erhält.
## Schritt für Schritt
1. 1 ### Schritt 1: Header öffnen
In Studio eine beliebige Seite öffnen und im Ebenenbaum im Bereich Header die Header-Section auswählen. Ist der Header eine globale Section, gelten Änderungen für alle Seiten.
2. 2 ### Schritt 2: Menü wählen und befüllen
Für Desktop **Mega Menu** oder **Menu Side by Side** wählen und die Menüpunkte anlegen. Einzelne Menüpunkte, etwa Sale, lassen sich farblich hervorheben.
3. 3 ### Schritt 3: Mobile Suche festlegen
Festlegen, ob auf Mobilgeräten nur ein Such-Symbol oder ein sichtbares Suchfeld erscheint. Bei suchstarken Sortimenten ist das sichtbare Suchfeld meist die bessere Wahl.
4. 4 ### Schritt 4: Top Bar einrichten
Service-Links wie Hilfe, Filialen oder Kontakt eintragen und Sprachauswahl sowie Dark-Mode-Schalter nach Bedarf ein- oder ausblenden. Die Farbvariante grau passt meist, schwarz nur über hellen Hero-Bildern.
5. 5 ### Schritt 5: Footer pflegen
Im Bereich Footer Kontaktangaben, Menüspalten mit Links, Social-Media-Profile und den Copyright-Namen eintragen.
6. 6 ### Schritt 6: Je Sprache prüfen
In der oberen Leiste von Studio Markt oder Sprache wechseln und Menü- und Footer-Texte für jede Sprache kontrollieren.
7. 7 ### Schritt 7: Speichern und veröffentlichen
Mit **Save** den Entwurf sichern und mit **Publish** veröffentlichen, wenn alles passt.
## Ergebnis prüfen
In der Vorschau auf Desktop das Menü öffnen, nach unten und wieder nach oben scrollen und prüfen, ob der Header verschwindet und zurückkommt. Danach in der Mobilansicht das Off-Canvas-Menü öffnen, die Suche testen und im Footer Telefon- und E-Mail-Links antippen.
## Häufige Fragen
Mega Menu oder Menu Side by Side?
Das Mega Menu passt zu breiten Sortimenten mit vielen Hauptkategorien und bietet Platz für Aktionskacheln im aufgeklappten Menü. Menu Side by Side passt zu tiefen Kategoriebäumen, weil es Ebene für Ebene seitlich einblendet.
Warum ist die Top Bar auf dem Smartphone nicht zu sehen?
Die Top Bar erscheint nur auf großen Bildschirmen, damit mobil mehr Platz für das Einkaufen bleibt. Sprachauswahl und Dark-Mode-Schalter liegen auf Mobilgeräten im Off-Canvas-Menü.
Kann jeder Markt einen eigenen Footer haben?
Texte und Links im Footer lassen sich je Sprache pflegen. So erhält jeder Markt etwa eigene Links zu Impressum, Versand oder Kontakt, ohne einen zweiten Footer anlegen zu müssen.
Woher kommen die Menüpunkte?
Menüpunkte lassen sich aus der Kategoriestruktur des angebundenen Shop-Systems übernehmen oder von Hand anlegen. Von Hand angelegte Punkte erlauben zusätzlich eine eigene Textfarbe.
## Passend dazu
- [Globale Sections für Header, Footer und wiederkehrende Inhalte](https://academy.laioutr.com/artikel/globale-sections-fuer-header-footer-und-mehr)5 Min.
Eine globale Section wird einmal angelegt und auf beliebig vielen Seiten referenziert. Wer ihre Inhalte ändert, ändert sie auf allen Seiten, die sie nutzen, typisch für Header, Footer oder eine USP-Leiste.
- [Märkte und Übersetzungen in Studio pflegen](https://academy.laioutr.com/artikel/maerkte-und-uebersetzungen-in-studio-pflegen)6 Min.
Sprachen und Märkte werden in Cockpit unter Translations und Markets angelegt, Studio nutzt sie im Markt- und Sprachwähler. Übersetzbare Felder werden je Sprache gepflegt; leere Felder zeigen den Wert der Fallback-Sprache.
- [Suche und Suchergebnisseite einrichten](https://academy.laioutr.com/artikel/suche-und-suchergebnisseite-einrichten)6 Min.
Die Suche besteht aus dem Suchfeld mit Vorschlägen im Shop-Header und der Suchergebnisseite mit Suchbegriff, Trefferzahl, Filtern und Produktraster. Vorschläge und Treffer liefert die Such- oder Commerce-App über Orchestr, die Qualität der Suche hängt also vom angebundenen Suchdienst ab.
- [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
Laioutr UI bringt fertige Inhalts-Sections wie Hero Slider, CTA-Banner, Card Grids, Testimonials, USP Banner, Logo Slider, Galerie und Promotion Banner mit. Redaktionen platzieren sie in Studio, füllen sie mit eigenen Inhalten und passen Größe, Ausrichtung und Hintergrund an.
- [Vorschau prüfen und in Studio veröffentlichen](https://academy.laioutr.com/artikel/vorschau-pruefen-und-in-studio-veroeffentlichen)5 Min.
Studio speichert Änderungen als Entwurf und zeigt sie sofort in der Live-Vorschau. Publish in der oberen Leiste bringt den gespeicherten Stand über ein Deployment der Umgebung auf die Storefront.
## [Inhalt und Navigation](https://academy.laioutr.com/leitfaeden/inhalt-und-navigation)
In diesem Leitfaden suchen
1. [Inhalts-Sections: Hero, Banner, Grids, Zitate, Logos und Promotion](https://academy.laioutr.com/artikel/inhalts-sections-hero-banner-grids-zitate-logos)8 Min.
2. [Bild und Video, Popups, Hinweise und Navigation in der Seite](https://academy.laioutr.com/artikel/bild-video-popups-hinweise-inpage-navigation)7 Min.
3. [Shop-Navigation und Footer einrichten](https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten)10 Min.
4. [Blog mit Übersicht und Artikelseiten aufbauen](https://academy.laioutr.com/artikel/blog-mit-uebersicht-und-artikelseiten-aufbauen)8 Min.
5. [Standortsuche und Filialseiten einrichten](https://academy.laioutr.com/artikel/standortsuche-und-filialseiten-einrichten)8 Min.
6. [Preisseite mit Plan Cards und Vergleichstabelle bauen](https://academy.laioutr.com/artikel/preisseite-mit-plan-cards-und-vergleichstabelle)9 Min.
## Structured Data
```json
{
"@context": "https://schema.org",
"@graph": [
{
"@id": "https://academy.laioutr.com/#website",
"@type": "WebSite",
"inLanguage": "de",
"name": "Default",
"url": "https://academy.laioutr.com/",
"workTranslation": {
"@id": "https://academy.laioutr.com/#website"
}
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#webpage",
"name": "Academy Article",
"url": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten",
"@type": [
"WebPage",
"FAQPage"
],
"breadcrumb": {
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#breadcrumb"
},
"isPartOf": {
"@id": "https://academy.laioutr.com/#website"
},
"mainEntity": [
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/1"
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/2"
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/3"
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/4"
}
],
"potentialAction": [
{
"@type": "ReadAction",
"target": [
"https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten"
]
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#breadcrumb",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"name": "Home",
"item": "https://academy.laioutr.com/",
"position": 1
},
{
"@type": "ListItem",
"name": "Storefront-Funktionen",
"item": "https://academy.laioutr.com/bereiche/storefront-funktionen",
"position": 2
},
{
"@type": "ListItem",
"name": "Inhalt und Navigation",
"item": "https://academy.laioutr.com/leitfaeden/inhalt-und-navigation",
"position": 3
},
{
"@type": "ListItem",
"name": "Shop-Navigation und Footer einrichten",
"item": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten",
"position": 4
}
]
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/1",
"@type": "Question",
"inLanguage": "de",
"name": "Mega Menu oder Menu Side by Side?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Das Mega Menu passt zu breiten Sortimenten mit vielen Hauptkategorien und bietet Platz für Aktionskacheln im aufgeklappten Menü. Menu Side by Side passt zu tiefen Kategoriebäumen, weil es Ebene für Ebene seitlich einblendet.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/2",
"@type": "Question",
"inLanguage": "de",
"name": "Warum ist die Top Bar auf dem Smartphone nicht zu sehen?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Die Top Bar erscheint nur auf großen Bildschirmen, damit mobil mehr Platz für das Einkaufen bleibt. Sprachauswahl und Dark-Mode-Schalter liegen auf Mobilgeräten im Off-Canvas-Menü.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/3",
"@type": "Question",
"inLanguage": "de",
"name": "Kann jeder Markt einen eigenen Footer haben?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Texte und Links im Footer lassen sich je Sprache pflegen. So erhält jeder Markt etwa eigene Links zu Impressum, Versand oder Kontakt, ohne einen zweiten Footer anlegen zu müssen.
"
}
},
{
"@id": "https://academy.laioutr.com/artikel/shop-navigation-und-footer-einrichten#/schema/question/4",
"@type": "Question",
"inLanguage": "de",
"name": "Woher kommen die Menüpunkte?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Menüpunkte lassen sich aus der Kategoriestruktur des angebundenen Shop-Systems übernehmen oder von Hand anlegen. Von Hand angelegte Punkte erlauben zusätzlich eine eigene Textfarbe.
"
}
}
]
}
```