LogoLogo
To the themeOur Shopware agencyOrder setup
English
English
  • Entry
  • Welcome
  • Theme
  • Setup
  • Theme Configuration
    • Allgemein
      • Verwaltung
      • Theme-Farben
      • Status-Ausgaben
      • Typografie
      • E-Commerce
      • Medien
      • Layout
      • Produktbilder
      • Formulare
      • Google Bewertungen
      • Social
    • Header
      • Ankündigungsleiste
      • Top Bar
      • Header
      • Such Overlay
      • Navigation
      • Flyout Navigation
    • Footer
      • Top Bar
      • Layout
      • Spalten
      • Zeile
      • Abschluss
    • Produkt Detailseite
      • Layout
      • Galerie
      • Buy Box
      • Tabs
      • Cross Selling
    • Erlebniswelten
      • Breadcrumb
      • Filter
      • Sidebar
      • Kategorie-Navigation
      • Listing
      • Produkt Box
    • Checkout
      • Layout
      • Warenkorb
      • Registrierung
      • Abschluss
    • Offcanvas
      • Navigation
    • Benutzerdefiniert
  • Included Extensions
    • Breadcrumb
    • Checkout
    • Datenblätter
    • Erlebniswelten Blöcke
    • FAQs
    • Features
    • Flyout Navigation
    • Google Bewertungen
    • Produktbild Hover
    • Aufgeklappte Sidebar-Filter
    • Unterkategorie-Navigation
    • Zusätzlicher Tab
  • Payment and Shipping Methods Icons
  • Apps
  • Blog
  • SEO URL Manager
  • Product Configurator
  • Expandable & sticky fixable sidebar
  • Newsletter Pop-Up
  • Cross Selling Pop-Up
  • Wishlist Manager
  • Academy
    • Technical terms
      • Ankündigungsleiste
      • Anzeigemodus
      • Button
      • Breadcrumb
      • Checkout
      • Conversion
      • Cross Selling
      • Flyout Navigation
      • Footer
      • Header
      • Hover Effekt
      • Icon
      • Kategorieseite
      • Landingpage
      • Offcanvas
      • Produkt Detailseite
      • Sidebar
      • Storefront
      • Top Bar
      • Variable
      • Warenkorb
      • Widget
  • Support
    • Assistance
    • Error message
    • Feature Request
Bereitgestellt von GitBook

© Atloss GmbH. All rights reserved.

Auf dieser Seite

War das hilfreich?

Als PDF exportieren
  1. Academy
  2. Technical terms

Offcanvas

VorherigeLandingpageNächsteProdukt Detailseite

War das hilfreich?

Ein Offcanvas im Online-Shop bezieht sich auf eine Design- und Benutzeroberflächen-Technik, bei der zusätzlicher Inhalt außerhalb des sichtbaren Bildschirmbereichs platziert wird und bei Bedarf eingeblendet werden kann. Dabei wird der zusätzliche Inhalt in der Regel seitlich oder unten außerhalb des Hauptinhaltsbereichs positioniert.

Der Zweck eines Offcanvas besteht darin, zusätzliche Informationen bereitzustellen, ohne dass der Hauptinhalt der Seite verdeckt wird. Wenn der Benutzer auf einen speziellen oder ein klickt, wird das Offcanvas animiert und der zusätzliche Inhalt wird sichtbar. Durch Klicken auf einen Schließen-Button oder außerhalb des Offcanvas-Bereichs kann das Element wieder ausgeblendet werden.

In Shopware wird ein Offcanvas beispielsweise für folgende Zwecke verwendet:

  1. Mobile Navigation: Auf kleinen Bildschirmen wie Smartphones wird das Offcanvas-Menü als Alternative zur herkömmlichen horizontalen Navigationsleiste genutzt. Es ermöglicht eine platzsparende und zugleich leicht zugängliche Navigation für mobile Benutzer.

  2. Zusätzliche Filteroptionen: In einer Kategorie Seite kann ein Offcanvas-Menü verwendet werden, um erweiterte Filteroptionen anzuzeigen. Der Benutzer kann das Offcanvas-Element öffnen, um spezifischere Filter wie Preisbereiche, Farben, Größen usw. auszuwählen, ohne den Hauptinhalt der Seite zu überladen.

Die Verwendung von Offcanvas-Elementen im Online-Shop kann die Benutzerfreundlichkeit verbessern, indem zusätzlicher Inhalt bereitgestellt wird, der bei Bedarf sichtbar wird, ohne den Hauptinhalt zu überlasten oder die Benutzererfahrung negativ zu beeinflussen.

Warenkorbvorschau: Ein Offcanvas-Warenkorb zeigt dem Benutzer eine Vorschau auf den aktuellen Inhalt seines Warenkorbs, ohne dass er die Seite verlassen muss. Der Benutzer kann den Warenkorb öffnen, um den Inhalt anzuzeigen, Artikel hinzuzufügen oder zu entfernen und den zu starten.

Checkout-Prozess
Button
Icon
Offcanvas-Warenkorb