Storefront
Seiten, Navigation & UI
Zuletzt aktualisiert: 5. September 2026
Seiten #
Die folgenden öffentlichen Routen stehen in jeder STOAR-Storefront zur Verfügung.
| Route | Beschreibung |
|---|---|
/ |
Startseite – mit Hero-Bereich, hervorgehobenen Kategorien, hervorgehobenen Produkten und Werbeinhalten |
/about |
Über-uns-Seite – Informationen zum Shop und Markengeschichte |
/contact |
Kontaktseite – Kontaktformular und Kontaktdaten des Shops |
/support |
Support-Center – neues Support-Ticket einreichen oder bestehende Tickets durchsehen |
/support/tickets/{token} |
Ansicht eines einzelnen Support-Tickets – erreichbar über den eindeutigen Token aus der Ticket-Bestätigungs-E-Mail, kein Konto erforderlich |
/faq |
Häufig gestellte Fragen |
/shipping |
Versandbedingungen und Lieferinformationen |
/returns |
Rückgabe- und Erstattungsbedingungen |
/legal/privacy |
Datenschutzerklärung |
/legal/terms |
Allgemeine Geschäftsbedingungen |
Globale UI-Komponenten #
Fixierter Navigationsheader
Der Hauptnavigationsheader bleibt beim Scrollen am oberen Rand des Viewports fixiert. Er enthält das Shop-Logo (verlinkt auf die Startseite), Navigationslinks zu den Kategorien, einen Suchumschalter, der die Suchleiste inline öffnet, ein Warenkorb-Badge mit der aktuellen Artikelanzahl, ein Wunschlisten-Badge und einen Konto-Link. Auf kleineren Bildschirmen werden die Kategorielinks in die mobile Navigationsleiste eingeklappt.
Mini-Warenkorb-Panel
Ein Klick auf das Warenkorb-Badge öffnet ein von rechts einfahrendes Panel, ohne die aktuelle Seite zu verlassen. Das Panel listet alle Artikel auf, die sich aktuell im Warenkorb befinden, samt Bild, Name und den gewählten Variantenoptionen. Die Menge lässt sich direkt im Panel über die Schaltflächen + und − erhöhen oder verringern. Die laufende Zwischensumme wird bei jeder Mengenänderung sofort aktualisiert. Eine Checkout-Schaltfläche am unteren Rand des Panels führt die Kundschaft direkt in den Checkout-Ablauf.
Hinweisleiste
Ein schmales Banner oberhalb des Hauptheaders. Inhalt und Sichtbarkeit dieser Leiste werden im Admin-Panel gesteuert. Sie wird üblicherweise für zeitlich begrenzte Aktionen, Versandangebote oder shopweite Hinweise verwendet.
Globales Banner
Ein Banner über die volle Breite, das reines HTML akzeptiert und Shop-Betreibenden damit die vollständige Kontrolle über Layout und Gestaltung gibt. Nutze es für aufwendigere shopweite Ankündigungen wie Sale-Aktionen, den Start neuer Kollektionen oder Wartungsfenster.
Mobile Navigationsleiste
Auf Mobil- und Tablet-Viewports wird die Kategorienavigation durch ein bildschirmfüllendes Einschubmenü ersetzt. Die Leiste bietet Zugriff auf alle Kategorielinks, den Konto-Link sowie Zusatzlinks wie Wunschliste und Support. Sie wird über das Hamburger-Symbol im fixierten Header geöffnet und geschlossen.
Fixierte Flash-Leiste
Eine ausblendbare Meldungsleiste, die am oberen Bildschirmrand erscheint und nach Benutzeraktionen unmittelbares Feedback gibt. Sie unterstützt vier Varianten: Erfolg (grün), Fehler (rot), Warnung (orange) und Info (blau). Flash-Meldungen werden nach kurzer Zeit automatisch ausgeblendet, können aber auch manuell geschlossen werden.
Footer
Der Footer ist auf jeder Seite vorhanden und enthält:
- Newsletter-Anmeldung – ein E-Mail-Feld, das Abonnentinnen und Abonnenten zum Verteiler hinzufügt.
- Kontaktdaten – Anschrift, Telefonnummer und E-Mail-Adresse des Shops.
- Social-Links – Symbole, die auf die Social-Media-Profile des Shops verweisen.
- Navigation – gruppierte Links zu wichtigen Seiten (Richtlinien, Support, Konto usw.).