Zum Inhalt springen
GloboGlobo Docs
App installieren
Deutsch

Eine benutzerdefinierte Menüposition hinzufügen

Zeigen Sie das Menü genau dort an, wo Sie es möchten, indem Sie Ihren eigenen Container zum Theme-Code hinzufügen.

Anleitung Alle Tarife 2 Min. Lesezeit

Verwenden Sie das, wenn Ihr Theme dort, wo Sie das Menü möchten, kein Menüelement hat oder sein Header für die anderen Position-Optionen zu stark angepasst ist. Sie fügen dem Theme-Code einen leeren Container hinzu und richten dann Menü an diesem CSS-Selektor anzeigen darauf aus.

Container hinzufügen und die App darauf ausrichten

  1. Theme-Code öffnen

    Gehen Sie zu Onlineshop > Themes, klicken Sie beim Theme auf … und wählen Sie Code bearbeiten.

  2. Menü-Container hinzufügen

    Fügen Sie dort, wo jedes Menü erscheinen soll, einen leeren Container ein und klicken Sie dann auf Speichern. Jede ID funktioniert; dies sind Beispiele:

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • Desktop: meist in der Datei des Header-Abschnitts (zum Beispiel sections/header.liquid), dort, wo die Navigation stehen soll.
    • Mobil: meist in der Datei der Menüleiste (Drawer) Ihres Themes oder in layout/theme.liquid.

  3. Container in der App eingeben

    Öffnen Sie im Menü-Editor den Tab Einstellungen und wählen Sie unter Position die Option Menü an diesem CSS-Selektor anzeigen. Geben Sie #GloboDesktopMenu in CSS-Selektor Ihres Hauptmenüs und #GloboMobileMenu in CSS-Selektor Ihres mobilen Menüs ein.

    Geben Sie die IDs Ihrer Container in die beiden CSS-Selektor-Felder ein

  4. Speichern, veröffentlichen und prüfen

    Klicken Sie auf Speichern und veröffentlichen Sie dann das Menü. Prüfen Sie Ihren Shop auf dem Desktop und auf Mobilgeräten.

Gut zu wissen

  • Nur ein Layout – Fügen Sie einen einzelnen Container hinzu und lassen Sie das andere Feld leer.
  • Vorhandener Inhalt wird ersetzt – Die App füllt jeden Container und ersetzt alles darin.
  • Das Menü Ihres Themes bleibt – Blenden Sie es im Code oder in den Theme-Einstellungen aus oder entfernen Sie es, wenn Sie nicht beide möchten.
  • Pro Theme – Code-Änderungen gelten nur für das Theme, das Sie bearbeitet haben. Fügen Sie die Container erneut hinzu, wenn Sie das Theme wechseln oder aktualisieren.

Fehlerbehebung

Das mobile Menü erscheint nicht

Ihr Theme baut seine Menüleiste (Drawer) möglicherweise erst später per JavaScript auf. Verschieben Sie den mobilen Container in Code, der immer auf der Seite vorhanden ist, etwa layout/theme.liquid.

Es wird nichts angezeigt

Stellen Sie sicher, dass die App-Einbettung für dieses Theme eingeschaltet ist. Prüfen Sie in der Browser-Konsole, ob document.querySelector('#GloboDesktopMenu') Ihren Container findet.

War diese Seite hilfreich?

Problem melden