Zum Inhalt springen
GloboGlobo Docs
App installieren
Deutsch

Mobile Bottom Bar

Fügen Sie eine fixierte, app-ähnliche Leiste mit Symbolen, Schnelllinks und Aktionen für Ihre Kundinnen und Kunden hinzu.

Anleitung Pro Navigation 9 Min. Lesezeit

Die Leiste bleibt beim Scrollen auf dem Bildschirm sichtbar, wie die Tab-Leiste einer mobilen App, und bietet mit einem Tipp Zugriff auf Startseite, Menü, Warenkorb, Suche, Chat oder einen Anruf. Ein Menüpunkt kann auch ein kleines Untermenü öffnen, zum Beispiel ein Menüpunkt Mehr mit Links zu Konto, Kontakt und FAQ.

Der Editor der Mobile Bottom Bar: Einstellungs-Tabs (1) und Live-Vorschau (2). Wechseln Sie das Vorschaugerät mit den Schaltflächen unten links in der Vorschau.

Die Einstellungs-Tabs sind Menüpunkte, Allgemein, Typografie, Farben, Position, Erweitert und Versionsverlauf.

Eine Mobile Bottom Bar erstellen

  1. Leiste erstellen

    Klicken Sie auf der Startseite der App auf Untere Navigation hinzufügen – oder klicken Sie im Menümanager auf Menü erstellen und wählen Sie Mobile Bottom Bar.

    Startseite: (1) Schnellaktionen zum Erstellen oder Importieren eines Menüs, (2) die Schaltfläche zum Aktivieren der App-Einbettung

  2. Menüpunkte einrichten

    Bearbeiten Sie unter Menüpunkte die Standard-Menüpunkte und fügen Sie eigene hinzu. Siehe Menüpunkte hinzufügen und bearbeiten.

    Der Editor der Mobile Bottom Bar: Einstellungs-Tabs (1) und Live-Vorschau (2). Wechseln Sie das Vorschaugerät mit den Schaltflächen unten links in der Vorschau.

  3. Leiste gestalten

    Passen Sie die Tabs Allgemein, Typografie und Farben an. Siehe Leiste gestalten.

    Allgemeine Einstellungen, einschließlich Position und Öffnungsstil des Untermenüs.

  4. Anzeigeort festlegen

    Wählen Sie unter Position die Geräte und die Position auf dem Bildschirm. Siehe Anzeigeort der Leiste festlegen.

    Schalten Sie die Leiste für Mobilgeräte (1) und Desktop (2) ein und wählen Sie dann eine Position.

  5. Speichern und veröffentlichen

    Klicken Sie auf Speichern und dann oben rechts auf Veröffentlichen. Siehe Leiste veröffentlichen.

Menüpunkte hinzufügen und bearbeiten

  1. Aktionen eines Menüpunkts anzeigen

    Fahren Sie unter Menüpunkte mit der Maus über einen Menüpunkt, um Bearbeiten, Duplizieren und Löschen anzuzeigen. Ziehen Sie einen Menüpunkt am Griff, um es neu anzuordnen.

    Fahren Sie mit der Maus über einen Menüpunkt, um ihn zu bearbeiten, zu duplizieren oder zu löschen.

  2. Menüpunkte und Untermenüs hinzufügen

    Klicken Sie auf Menüpunkte hinzufügen, um einen Menüpunkt auf dieser Ebene hinzuzufügen, oder bei einem Menüpunkt auf Untermenü hinzufügen, um Menüpunkte darunter zu verschachteln. Verschachtelte Menüpunkte öffnen sich als Untermenü, bis zu drei Ebenen tief.

  3. Klicken Sie auf Bearbeiten, um Menüpunkt bearbeiten zu öffnen. Wählen Sie ein Symbol (klicken Sie auf Ändern), geben Sie einen Titel ein und klicken Sie dann auf das Feld Link.

    Klicken Sie auf das Feld Link, um die Aktion des Menüpunkts auszuwählen.

  4. Aktion auswählen

    Klicken Sie unter Link auswählen neben einer Aktion auf Auswählen (1). Das Feld Link (2) enthält dann den Anfang des Links, zum Beispiel /collections/ bei Produkte nach Kollektion. Vervollständigen Sie ihn wie in der Spalte SYNTAX gezeigt, zum Beispiel /collections/summer-sale, und klicken Sie auf Aktualisieren (3).

    Klicken Sie auf Auswählen (1), vervollständigen Sie den Link (2) und klicken Sie dann auf Aktualisieren (3).

Einstellungen der Menüpunkte

Symbol
Klicken Sie auf Ändern, um ein Symbol auszuwählen oder ein Bild hochzuladen.
Titel
Der Text unter dem Symbol.
Link
Was beim Tippen passiert. Klicken Sie darauf, um Link auswählen zu öffnen (siehe Aktionen der Menüpunkte).
In neuem Tab öffnen
Öffnet den Link in einem neuen Browser-Tab.
Beschreibung
Optionaler kurzer Text, der beim Menüpunkt angezeigt wird.
Symbolgröße
Symbolgröße in px.
Box > Randradius
Rundet die Ecken der Box des Menüpunkts ab, 0 bis 100 px.
Box > Innenabstand
Abstand innerhalb der Box des Menüpunkts, 0 bis 100 px.
Box > Position
Verschiebt den Menüpunkt nach links (negativ) oder rechts (positiv), -100 bis 100 px.
Farbe
Text-, Symbol-, Symbolhintergrund- und Hintergrundfarben nur für diesen Menüpunkt, jeweils mit einer Hover-Farbe. Einstellungen zurücksetzen kehrt zu den Farben der Leiste zurück.
Badge
Ein kleines Label am Menüpunkt, mit Titel, Badge-Textfarbe und Badge-Hintergrundfarbe.
Sichtbarkeit
Blendet den Menüpunkt auf manchen Geräten oder für manche Kundinnen und Kunden aus oder zeigt es nur zwischen zwei Daten an. Siehe Anzeigeregeln.
Erweitert
Zusätzlicher Klassenname fügt eine CSS-Klasse für benutzerdefiniertes CSS hinzu. Teilen fügt neben dem Menüpunkt eine Trennlinie hinzu.

Aktionen der Menüpunkte

Link auswählen gruppiert Aktionen in acht Abschnitte. Klicken Sie auf das Info-Symbol neben einer Aktion, um ein Beispiel zu sehen.

1. Link zu den internen Seiten Ihres Shops
Genaue Kurz-URL /[your-url], Startseite /, Alle Produkte /collections/all, Produkte nach Kollektion /collections/[collection-handle], Produktdetailseite /products/[your-product-shorturl], Alle Blogbeiträge /blogs/news, Blogbeitrag im Detail /blogs/news/[your-blog-shorturl], Seitendetail /pages/[your-page-shorturl], Warenkorbseite /cart, Suchseite /search, Kontaktformular /pages/contact.
2. Panels öffnen (kompatibel mit gängigen Themes)
Menü öffnen (mobil) gm-open:MobileMenu, Warenkorb öffnen gm-open:Cart, Suche öffnen gm-open:Search.
3. Andere Anwendungen öffnen (z. B. Shopify Inbox)
Chat öffnen gm-open:Inbox öffnet den Chat von Shopify Inbox.
4. Auf der Seite scrollen
Nach oben scrollen gm-scroll:Top, Nach unten scrollen gm-scroll:Bottom, Zu einem Element auf der Seite scrollen gm-scroll:OnPage(htmlElement).
5. JavaScript-Funktion aufrufen
gm-javascript:Function führt eine JavaScript-Funktion auf Ihrer Website aus.
6. Support-Tools
Jemanden anrufen tel:, SMS senden sms:, E-Mail senden mailto:, Chat mit Messenger, Whatsapp, Telegram, Line oder Zalo.
7. Teilen
Aktuelle URL kopieren gm-share:CopyUrl, Auf Facebook teilen gm-share:Facebook, Auf X (Twitter) teilen gm-share:X.
8. Link zu externen Websites
Vollständige URL (jede vollständige Webadresse), Nicht weiterleiten #.
Abschnitte 2 bis 4: Panels öffnen, andere Anwendungen und Scrollen.
Abschnitte 5 und 6: JavaScript und Support-Tools.
Abschnitte 7 und 8: Teilen und externe Links.

Beispiele:

  • gm-scroll:Top(150) – scrollt nach oben und lässt dabei 150 px Abstand.
  • gm-scroll:OnPage(#page-title) – scrollt zum Element mit der ID page-title.
  • tel:+0123456789 – ruft diese Nummer an.
  • sms:+012345678?body=I need help – öffnet eine SMS mit vorausgefülltem Text.
  • https://wa.me/0123456789 – öffnet einen WhatsApp-Chat. Verwenden Sie die Landesvorwahl ohne +.

Leiste gestalten

Allgemeine Einstellungen, einschließlich Position und Öffnungsstil des Untermenüs.

Hauptmenü (Ebene 1)

Menü abgerundet
Eckenradius der Leiste, 0 bis 50 px.
Abstand der Menüpunkte
Abstand zwischen den Menüpunkten, 0 bis 50 px.
Innenabstand horizontal · Innenabstand vertikal
Horizontaler und vertikaler Abstand innerhalb jedes Menüpunkts, 0 bis 100 px.
Kastenschatten verwenden
Fügt der Leiste einen Schatten hinzu.

Untermenü (Ebene 2, 3)

Position des Untermenüs
Links, Rechts, Mitte oder Voll (volle Breite).
Öffnungsstil des Untermenüs
Dropdown-Menü (Ausklappmenü) oder Slide.
Untermenübreite
100 bis 900 px.
Innenabstand horizontal · Innenabstand vertikal
Horizontaler und vertikaler Abstand innerhalb jedes Untermenü-Menüpunkts, 0 bis 100 px.

Symbol und Text

Symbolgröße · Größe des Untermenüsymbols
Symbolgrößen für die Leiste und ihre Untermenüs, 0 bis 100 px.
Abstand Text – Symbol im Hauptmenü · Abstand Text – Symbol im Untermenü
Abstand zwischen Symbol und Text, 0 bis 50 px.

Erweitert

Menütext ausblenden
Nur Symbole in der Leiste.
Untermenütext ausblenden
Nur Symbole in Untermenüs.
Untermenübeschreibung ausblenden
Blendet Beschreibungen von Menüpunkten in Untermenüs aus.

Anzeigeort der Leiste festlegen

  1. Geräte auswählen

    Schalten Sie unter Position Anzeige auf Mobilgeräten (1), Anzeige auf dem Desktop (2) oder beides ein.

    Schalten Sie die Leiste für Mobilgeräte (1) und Desktop (2) ein und wählen Sie dann eine Position.

  2. Position auswählen

    Klicken Sie unter jedem Schalter auf ein Layout:

    • Mobil – Unten, Oben, Mitte links, Mitte rechts, Unten links oder Unten rechts.
    • Desktop – Unten mittig, Unten links, Unten rechts, Unten in voller Breite, Mitte links oder Mitte rechts.

  3. Beim Scrollen ausblenden (optional)

    Aktivieren Sie Beim Herunterscrollen ausblenden, damit die Leiste beim Herunterscrollen keine Inhalte verdeckt.

Erweiterte Einstellungen

Marktverfügbarkeit
Zeigt die Leiste nur in ausgewählten Märkten an. Siehe Menüs nach Markt anzeigen.
Menü Z-Index
Stapelreihenfolge. Erhöhen Sie den Wert, wenn andere Elemente die Leiste verdecken; verringern Sie ihn, wenn die Leiste Pop-ups verdeckt.
Menüopazität
Transparenz der Leiste, 0 bis 100 %.
Unterer Rand
Abstand zwischen der Leiste und dem unteren Bildschirmrand.
Stylesheet / CSS
Benutzerdefiniertes CSS für die Leiste.
JavaScript
Eigenes JavaScript für die Leiste.

Anzeigeregeln

Wo Einstellung Wirkung
Tab Position Anzeige auf Mobilgeräten, Anzeige auf dem Desktop Zeigt oder blendet die gesamte Leiste je Gerät aus.
Tab Erweitert Marktverfügbarkeit Zeigt die gesamte Leiste nur in ausgewählten Märkten an.
Menüpunkt > Sichtbarkeit Auf dem Desktop ausblenden, Auf Mobilgeräten ausblenden Blendet einen Menüpunkt auf einem Gerät aus.
Menüpunkt > Sichtbarkeit Ausblenden, wenn angemeldet, Nur anzeigen, wenn angemeldet Zeigt einen Menüpunkt nur Gästen oder nur angemeldeten Kundinnen und Kunden.
Menüpunkt > Sichtbarkeit Zeitgesteuert veröffentlichen Zeigt einen Menüpunkt nur zwischen Startdatum und Enddatum.

Leiste veröffentlichen

  1. Veröffentlichen

    Klicken Sie auf Speichern und dann oben rechts auf Veröffentlichen, wählen Sie das Theme und bestätigen Sie. Der Dialog funktioniert wie bei einem Mega-Menü (siehe Ein Menü veröffentlichen). Der Status wechselt von Entwurf zu Aktiv.

    Dialog Menü veröffentlichen: (1) Theme auswählen, (2) Vorschau und Veröffentlichen

  2. Shop prüfen

    Öffnen Sie Ihren Shop auf einem Smartphone oder in einem schmalen Browserfenster.

Ändern oder entfernen

  • Aus Ihrem Shop entfernen – klicken Sie oben im Editor auf Deaktivieren.
  • Eine frühere Version wiederherstellen – öffnen Sie den Tab Versionsverlauf. Siehe Versionsverlauf.

Fehlerbehebung

Die Leiste erscheint nicht in meinem Shop

Die Leiste wird wie alle Menüs über die App-Einbettung geladen. Stellen Sie sicher, dass die App-Einbettung für dieses Theme eingeschaltet ist – siehe App-Einbettung aktivieren.

Eine Aktion „Panels öffnen“ bewirkt nichts

Aktionen unter Panels öffnen öffnen die eigene Menüschublade, Warenkorbschublade oder Suche Ihres Themes, daher funktionieren sie mit gängigen Themes. Wenn bei Ihrem Theme nichts passiert, verlinken Sie stattdessen auf die Seite (zum Beispiel Warenkorbseite /cart) oder kontaktieren Sie uns.

Die Leiste überlagert eine Chat-Schaltfläche oder ein Cookie-Banner

Erhöhen Sie den Unteren Rand oder ändern Sie den Menü Z-Index im Tab Erweitert oder wählen Sie im Tab Position eine andere Position.

War diese Seite hilfreich?

Problem melden