Ga naar inhoud
GloboGlobo Docs
App installeren
Nederlands

Mobiele onderste navigatiebalk

Voeg een vaste balk met pictogrammen toe, zoals in een app, met snelle links en acties voor je klanten.

Stappenplan Pro Navigation 9 min. leestijd

De balk blijft in beeld terwijl klanten scrollen, net als de tabbalk van een mobiele app, en geeft met één tik toegang tot de startpagina, het menu, de winkelwagen, zoeken, chat of een telefoongesprek. Een item kan ook een klein submenu openen, zoals een item Meer met links naar het account, contact en veelgestelde vragen.

De editor van de onderbalk: tabbladen met instellingen (1) en live voorbeeld (2). Wissel het apparaat van het voorbeeld met de knoppen linksonder in het voorbeeld.

De tabbladen met instellingen zijn Menu-items, Algemeen, Typografie, Kleuren, Positie, Geavanceerd en Versiegeschiedenis.

Een onderbalk maken

  1. De balk maken

    Klik op de Startpagina van de app op Ondernavigatie toevoegen, of klik in Menubeheer op Menu maken en kies Mobiele onderbalk.

    Startpagina: (1) snelle acties om een menu te maken of te importeren, (2) de knop die de app-insluiting activeert

  2. De items instellen

    Bewerk in Menu-items de standaarditems en voeg je eigen items toe. Zie Items toevoegen en bewerken.

    De editor van de onderbalk: tabbladen met instellingen (1) en live voorbeeld (2). Wissel het apparaat van het voorbeeld met de knoppen linksonder in het voorbeeld.

  3. De balk opmaken

    Pas de tabbladen Algemeen, Typografie en Kleuren aan. Zie De balk opmaken.

    Algemene instellingen, waaronder de positie en openingsstijl van het submenu.

  4. Kiezen waar de balk verschijnt

    Kies in Positie de apparaten en de plek op het scherm. Zie Kiezen waar de balk verschijnt.

    Zet de balk aan voor mobiel (1) en desktop (2) en kies daarna een positie.

  5. Opslaan en publiceren

    Klik op Opslaan en daarna rechtsboven op Publiceren. Zie De balk publiceren.

Items toevoegen en bewerken

  1. De acties voor items tonen

    Ga in Menu-items met de muis over een item om Bewerken, Dupliceren en Verwijderen te tonen. Sleep een item aan de greep om de volgorde te wijzigen.

    Ga met de muis over een item om het te bewerken, dupliceren of verwijderen.

  2. Items en submenu’s toevoegen

    Klik op Item toevoegen om een item op dat niveau toe te voegen, of op Submenu toevoegen bij een item om er items onder te nesten. Geneste items openen als submenu, tot drie niveaus diep.

  3. Klik op Bewerken om Menu-item bewerken te openen. Kies een Pictogram (klik op Wijzigen), vul een Titel in en klik daarna op het veld Link.

    Klik op het veld Link om de actie van het item te kiezen.

  4. Een actie kiezen

    Klik in Link selecteren op Selecteren naast een actie (1). Het vak Link (2) krijgt het begin van de link, bijvoorbeeld /collections/ voor Producten per collectie. Vul de link aan zoals in de kolom Syntaxis staat, zoals /collections/summer-sale, en klik op Bijwerken (3).

    Klik op Selecteren (1), vul de link aan (2) en klik daarna op Bijwerken (3).

Instellingen van items

Pictogram
Klik op Wijzigen om een pictogram te kiezen of een afbeelding te uploaden.
Titel
De tekst onder het pictogram.
Link
Wat er gebeurt bij een tik. Klik erop om Link selecteren te openen (zie Acties voor items).
Openen in nieuw tabblad
Opent de link in een nieuw browsertabblad.
Beschrijving
Optionele korte tekst bij het item.
Pictogramgrootte
Grootte van het pictogram in px.
Vak > Hoekradius
Rondt de hoeken van het vak van het item af, 0 tot 100 px.
Vak > Binnenmarge van vak
Ruimte binnen het vak van het item, 0 tot 100 px.
Vak > Positie
Verschuift het item naar links (negatief) of rechts (positief), -100 tot 100 px.
Kleur
Kleuren voor tekst, pictogram, pictogramachtergrond en achtergrond van alleen dit item, elk met een hoverkleur. Instellingen wissen zet de kleuren van de balk terug.
Badge
Een klein label op het item, met Titel, Tekstkleur van badge en Achtergrondkleur van badge.
Zichtbaarheid
Verbergt het item op sommige apparaten of voor sommige klanten, of toont het alleen tussen twee datums. Zie Weergaveregels.
Geavanceerd
Extra klassenaam voegt een CSS-klasse toe voor aangepaste CSS. Scheiden voegt een scheidingslijn naast het item toe.

Acties voor items

Link selecteren groepeert acties in acht secties. Klik op het infopictogram naast een actie om een voorbeeld te zien.

1. Linken naar interne pagina's van je winkel
Exacte korte url /[your-url], Startpagina /, Alle producten /collections/all, Producten per collectie /collections/[collection-handle], Een productpagina /products/[your-product-shorturl], Alle blogberichten /blogs/news, Een blogbericht /blogs/news/[your-blog-shorturl], Een pagina /pages/[your-page-shorturl], Winkelwagenpagina /cart, Zoekpagina /search, Contactformulier /pages/contact.
2. Panelen openen (compatibel met populaire thema's)
Menu openen (mobiel) gm-open:MobileMenu, Winkelwagen openen gm-open:Cart, Zoeken openen gm-open:Search.
3. Andere applicaties openen (bijv. Shopify Inbox...)
Chatbox openen gm-open:Inbox opent de chat van Shopify Inbox.
4. Scrollen op de pagina
Scroll naar boven gm-scroll:Top, Scroll naar beneden gm-scroll:Bottom, Scroll naar een element op de pagina gm-scroll:OnPage(htmlElement).
5. JavaScript-functie aanroepen
gm-javascript:Function voert een JavaScript-functie uit op je site.
6. Supporttools
Bellen tel:, Een sms sturen sms:, Een e-mail sturen mailto:, Chatten via Messenger, WhatsApp, Telegram, Line of Zalo.
7. Delen
Huidige URL kopiëren gm-share:CopyUrl, Delen op Facebook gm-share:Facebook, Delen op X (Twitter) gm-share:X.
8. Linken naar externe websites
Volledige url (elk volledig webadres), Niet doorsturen #.
Secties 2 tot 4: panelen openen, andere applicaties en scrollen.
Secties 5 en 6: JavaScript en supporttools.
Secties 7 en 8: delen en externe links.

Voorbeelden:

  • gm-scroll:Top(150): scrolt naar boven, met een marge van 150 px.
  • gm-scroll:OnPage(#page-title): scrolt naar het element met de ID page-title.
  • tel:+0123456789: belt dit nummer.
  • sms:+012345678?body=I need help: opent een sms met de tekst al ingevuld.
  • https://wa.me/0123456789: opent een WhatsApp-chat. Gebruik de landcode, zonder +.

De balk opmaken

Algemene instellingen, waaronder de positie en openingsstijl van het submenu.

Hoofdmenu (niveau 1)

Menu afgerond
Hoekradius van de balk, 0 tot 50 px.
Itemafstand
Ruimte tussen items, 0 tot 50 px.
Binnenmarge horizontaal · Binnenmarge verticaal
Horizontale en verticale ruimte binnen elk item, 0 tot 100 px.
Schaduw gebruiken
Voegt een schaduw rond de balk toe.

Submenu (niveau 2, 3)

Positie van submenu
Links, Rechts, Midden of Volledige breedte.
Openingsstijl van submenu
Dropdown of Uitschuifpaneel.
Breedte van submenu
100 tot 900 px.
Binnenmarge horizontaal · Binnenmarge verticaal
Horizontale en verticale ruimte binnen elk submenu-item, 0 tot 100 px.

Pictogram en tekst

Pictogramgrootte · Pictogramgrootte van submenu
Grootte van de pictogrammen in de balk en de submenu’s, 0 tot 100 px.
Ruimte hoofdmenu: tekst - pictogram · Ruimte submenu: tekst - pictogram
Ruimte tussen pictogram en tekst, 0 tot 50 px.

Geavanceerd

Menutekst verbergen
Alleen pictogrammen in de balk.
Submenutekst verbergen
Alleen pictogrammen in submenu’s.
Submenubeschrijving verbergen
Verbergt de beschrijvingen van items in submenu’s.

Kiezen waar de balk verschijnt

  1. De apparaten kiezen

    Schakel in Positie de optie Weergeven op mobiel (1), Weergeven op desktop (2) of beide in.

    Zet de balk aan voor mobiel (1) en desktop (2) en kies daarna een positie.

  2. Een positie kiezen

    Klik onder elke schakelaar op een indeling:

    • Mobiel: Onder, Boven, Midden links, Midden rechts, Linksonder of Rechtsonder.
    • Desktop: Middenonder, Linksonder, Rechtsonder, Onder over volledige breedte, Midden links of Midden rechts.

  3. Verbergen tijdens het scrollen (optioneel)

    Selecteer Hide when scrolling down (verbergen bij naar beneden scrollen), zodat de balk geen inhoud bedekt terwijl de klant naar beneden scrolt.

Geavanceerde instellingen

Beschikbaarheid per markt
Toont de balk alleen in geselecteerde markten. Zie Menu’s per markt tonen.
Z-index van menu
Stapelvolgorde. Verhoog de waarde als andere elementen de balk bedekken; verlaag hem als de balk pop-ups bedekt.
Dekking van menu
Transparantie van de balk, 0 tot 100%.
Ondermarge
Ruimte tussen de balk en de onderkant van het scherm.
Stijlblad / CSS
Aangepaste CSS voor de balk.
JavaScript
Aangepaste JavaScript voor de balk.

Weergaveregels

Waar Instelling Effect
Tabblad Positie Weergeven op mobiel, Weergeven op desktop Toont of verbergt de hele balk per apparaat.
Tabblad Geavanceerd Beschikbaarheid per markt Toont de hele balk alleen in geselecteerde markten.
Item > Zichtbaarheid Verbergen op desktop, Verbergen op mobiel Verbergt één item op een apparaat.
Item > Zichtbaarheid Verbergen wanneer ingelogd, Alleen tonen wanneer ingelogd Toont één item alleen aan gasten, of alleen aan ingelogde klanten.
Item > Zichtbaarheid Publicatie plannen Toont één item alleen tussen Startdatum en Einddatum.

De balk publiceren

  1. Publiceren

    Klik op Opslaan en daarna rechtsboven op Publiceren, kies het thema en bevestig. Het venster werkt zoals bij een megamenu (zie Een menu publiceren). De status verandert van Concept in Actief.

    Venster Menu publiceren: (1) Thema kiezen, (2) Voorbeeld en Publiceren

  2. Je webwinkel controleren

    Open je webwinkel op een telefoon, of in een smal browservenster.

Wijzigen of verwijderen

  • Van je webwinkel halen: klik bovenaan de editor op Uitschakelen.
  • Een eerdere versie herstellen: open het tabblad Versiegeschiedenis. Zie Versiegeschiedenis.

Problemen oplossen

De balk verschijnt niet in mijn webwinkel

De balk laadt via de app-insluiting, net als alle menu’s. Zorg dat de app-insluiting voor dat thema aan staat. Zie De app-insluiting inschakelen.

Een actie onder Panelen openen doet niets

Acties onder Panelen openen openen de eigen menulade, winkelwagenlade of zoekfunctie van je thema, dus ze werken met populaire thema’s. Gebeurt er in jouw thema niets, link dan naar de pagina (bijvoorbeeld Winkelwagenpagina /cart), of neem contact met ons op.

De balk overlapt een chatknop of cookiebanner

Verhoog Ondermarge of wijzig Z-index van menu op het tabblad Geavanceerd, of kies een andere positie op het tabblad Positie.

Was dit nuttig?

Probleem melden