Ga naar inhoud
GloboGlobo Docs
App installeren
Nederlands

Een aangepaste menupositie toevoegen

Toon het menu precies waar je wilt door je eigen container aan de themacode toe te voegen.

Stappenplan Alle abonnementen 2 min. leestijd

Gebruik dit als je thema geen menu-element heeft op de plek waar je het menu wilt, of als de header te aangepast is voor de andere opties van Positie. Je voegt een lege container toe aan de themacode en laat Menu weergeven op deze CSS-selector daarnaar verwijzen.

De containers toevoegen en de app ernaar laten verwijzen

  1. De themacode openen

    Ga naar Webwinkel > Thema’s, klik bij het thema op … en kies Code bewerken.

  2. De menucontainers toevoegen

    Plak een lege container op elke plek waar een menu moet verschijnen en klik op Opslaan. Elke ID werkt; dit zijn voorbeelden:

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • Desktop: meestal in het bestand van de headersectie (bijvoorbeeld sections/header.liquid), waar de navigatie moet komen.
    • Mobiel: meestal in het bestand van de menulade van je thema, of in layout/theme.liquid.

  3. De containers invullen in de app

    Open in de menu-editor het tabblad Instellingen en kies onder Positie de optie Menu weergeven op deze CSS-selector. Vul #GloboDesktopMenu in bij CSS-selector van je hoofdmenu en #GloboMobileMenu bij CSS-selector van je mobiele menu.

    Vul de ID's van je containers in de twee velden voor CSS-selectors in

  4. Opslaan, publiceren en controleren

    Klik op Opslaan en publiceer daarna het menu. Controleer je webwinkel op desktop en op mobiel.

Goed om te weten

  • Maar één weergave: voeg één container toe en laat het andere veld leeg.
  • Bestaande inhoud wordt vervangen: de app vult elke container en vervangt alles wat erin staat.
  • Het menu van je thema blijft staan: verberg of verwijder het in de code of in de thema-instellingen als je ze niet allebei wilt.
  • Per thema: codewijzigingen gelden alleen voor het thema dat je hebt bewerkt. Voeg de containers opnieuw toe als je van thema wisselt of je thema bijwerkt.

Problemen oplossen

Het mobiele menu verschijnt niet

Je thema bouwt de menulade misschien later op met JavaScript. Verplaats de mobiele container naar code die altijd op de pagina staat, zoals layout/theme.liquid.

Er verschijnt niets

Controleer of de app-insluiting voor dit thema aan staat. Controleer in de console van je browser of document.querySelector('#GloboDesktopMenu') je container vindt.

Was dit nuttig?

Probleem melden