Salta ai contenuti
GloboGlobo Docs
Installa l’app
Italiano

Aggiungi una posizione personalizzata per il menu

Mostra il menu esattamente dove vuoi aggiungendo un tuo contenitore al codice del tema.

Guida pratica Tutti i piani 2 min di lettura

Usala quando il tuo tema non ha un elemento di menu nel punto in cui vuoi il menu, oppure il suo header è troppo personalizzato per le altre opzioni di Posizione. Aggiungi un contenitore vuoto al codice del tema, poi punta Mostra il menu su questo selettore CSS su di esso.

Aggiungi i contenitori e indirizza l’app verso di essi

  1. Apri il codice del tema

    Vai su Negozio online > Temi, fai clic su … sul tema e scegli Modifica codice.

  2. Aggiungi i contenitori del menu

    Incolla un contenitore vuoto nel punto in cui deve comparire ogni menu, poi fai clic su Salva. Va bene qualsiasi ID; questi sono esempi:

    <div id="GloboDesktopMenu"></div>
    <div id="GloboMobileMenu"></div>
    • Desktop: di solito nel file della sezione dell’header (ad esempio sections/header.liquid), dove dovrebbe stare la navigazione.
    • Mobile: di solito nel file del cassetto del menu del tuo tema, oppure in layout/theme.liquid.

  3. Inserisci i contenitori nell’app

    Nell’editor dei menu, apri la scheda Impostazioni e scegli Mostra il menu su questo selettore CSS in Posizione. Inserisci #GloboDesktopMenu in Selettore CSS del tuo menu principale e #GloboMobileMenu in Selettore CSS del tuo menu mobile.

    Inserisci gli ID dei tuoi contenitori nei due campi del selettore CSS

  4. Salva, pubblica e controlla

    Fai clic su Salva, poi pubblica il menu. Controlla il tuo negozio su desktop e su mobile.

Da sapere

  • Un solo layout — aggiungi un unico contenitore e lascia vuoto l’altro campo.
  • Il contenuto esistente viene sostituito — l’app riempie ogni contenitore e sostituisce tutto ciò che contiene.
  • Il menu del tuo tema resta — nascondilo o rimuovilo nel codice o nelle impostazioni del tema se non vuoi entrambi.
  • Per tema — le modifiche al codice valgono solo per il tema che hai modificato. Aggiungi di nuovo i contenitori se cambi o aggiorni il tema.

Risoluzione dei problemi

Il menu mobile non compare

Il tuo tema potrebbe costruire il suo cassetto più tardi con JavaScript. Sposta il contenitore mobile in codice sempre presente nella pagina, come layout/theme.liquid.

Non compare nulla

Assicurati che l’incorporamento dell’app sia attivo per questo tema. Nella console del browser, verifica che document.querySelector('#GloboDesktopMenu') trovi il tuo contenitore.

Questa pagina ti è stata utile?

Segnala un problema