Legg til en egendefinert menyposisjon

Veiledning Alle planer 2 min lesing

Bruk dette når temaet ikke har noe menyelement der du vil ha menyen, eller når toppteksten er for tilpasset for de andre alternativene for Posisjon. Du legger til en tom beholder i temakoden, og peker deretter Vis menyen på denne CSS-velgeren til den.

Advarsel

Dupliser temaet før du redigerer koden (Nettbutikk > Temaer > … > Dupliser). Er du ikke komfortabel med kode? Kontakt oss, så installerer vi menyen gratis for deg.

Legg til beholderne og pek appen til dem

1. Åpne temakoden

   Gå til Nettbutikk > Temaer, klikk på … for temaet og velg Rediger kode.

2. Legg til menybeholderne

   Lim inn en tom beholder der hver meny skal vises, og klikk deretter på Lagre. Alle ID-er fungerer. Dette er eksempler:

   <div id="GloboDesktopMenu"></div>
   <div id="GloboMobileMenu"></div>

   • Datamaskin: vanligvis i filen for topptekstdelen (for eksempel sections/header.liquid), der navigasjonen skal være.
   • Mobil: vanligvis i filen for temaets menyskuff, eller i layout/theme.liquid.

3. Skriv inn beholderne i appen

   I menyredigeringen åpner du fanen Innstillinger og velger Vis menyen på denne CSS-velgeren under Posisjon. Skriv inn #GloboDesktopMenu i CSS-velger for hovedmenyen og #GloboMobileMenu i CSS-velger for mobilmenyen.

   

   Skriv inn ID-ene for beholderne i de to feltene for CSS-velgere

4. Lagre, publiser og sjekk

   Klikk på Lagre, og publiser menyen. Sjekk butikken på datamaskin og mobil.

Greit å vite

• Bare ett oppsett – legg til én enkelt beholder og la det andre feltet stå tomt.
• Eksisterende innhold erstattes – appen fyller hver beholder og erstatter alt som er inni den.
• Temaets meny blir værende – skjul eller fjern den i koden eller i temainnstillingene hvis du ikke vil ha begge.
• Per tema – kodeendringer gjelder bare temaet du redigerte. Legg til beholderne på nytt hvis du bytter eller oppdaterer temaet.

Feilsøking

Mobilmenyen vises ikke

Temaet kan bygge menyskuffen senere med JavaScript. Flytt mobilbeholderen til kode som alltid er på siden, for eksempel layout/theme.liquid.

Ingenting vises

Sørg for at appinnbyggingen er slått på for dette temaet. I nettleserkonsollen sjekker du at document.querySelector('#GloboDesktopMenu') finner beholderen.

Relaterte sider

• Vis menyen på en CSS-velgerPlasser menyen på nøyaktige elementer i temaet ved å skrive inn CSS-velgerne deres.
• Publiser en menyPubliser menyen til et tema og velg hvor den skal vises i butikken.
• Egendefinert CSSLegg til din egen CSS for å finjustere hvordan menyen ser ut.

Var dette nyttig?

Rapporter et problem