Tilføj en brugerdefineret menuposition

Vejledning Alle abonnementer 2 min. læsning

Brug den, når dit tema ikke har et menuelement der, hvor du vil have menuen, eller når dets header er for tilpasset til de andre muligheder under Position. Du tilføjer en tom container i temakoden og peger derefter Vis menuen på denne CSS-vælger på den.

Bemærk

Dupliker dit tema, før du redigerer koden (Webshop > Temaer > … > Dupliker). Er du ikke tryg ved kode? Kontakt os, så installerer vi menuen gratis for dig.

Tilføj containerne, og peg appen på dem

1. Åbn temakoden

   Gå til Webshop > Temaer, klik på … ved temaet, og vælg Rediger kode.

2. Tilføj menucontainerne

   Indsæt en tom container der, hvor hver menu skal vises, og klik derefter på Gem. Du kan bruge et vilkårligt id; disse er eksempler:

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

   • Computer: som regel i headersektionens fil (f.eks. sections/header.liquid), der hvor navigationen skal være.
   • Mobil: som regel i dit temas fil til menuskuffen eller i layout/theme.liquid.

3. Angiv containerne i appen

   Åbn fanen Indstillinger i menueditoren, og vælg Vis menuen på denne CSS-vælger under Position. Angiv #GloboDesktopMenu i CSS-vælger til din hovedmenu og #GloboMobileMenu i CSS-vælger til din mobilmenu.

   

   Angiv id'erne for dine containere i de to felter til CSS-vælgere

4. Gem, udgiv, og tjek

   Klik på Gem, og udgiv derefter menuen. Tjek din webshop på computer og på mobil.

Godt at vide

• Kun ét layout – tilføj en enkelt container, og lad det andet felt være tomt.
• Eksisterende indhold erstattes – appen udfylder hver container og erstatter alt, hvad der er i den.
• Dit temas menu bliver – skjul eller fjern den i koden eller i temaindstillingerne, hvis du ikke vil have begge.
• Pr. tema – kodeændringer gælder kun det tema, du har redigeret. Tilføj containerne igen, hvis du skifter eller opdaterer dit tema.

Fejlfinding

Mobilmenuen vises ikke

Dit tema bygger måske sin skuffe senere med JavaScript. Flyt mobilcontaineren til kode, der altid er på siden, f.eks. layout/theme.liquid.

Intet vises

Sørg for, at appintegrationen er slået til i dette tema. Tjek i din browsers konsol, at document.querySelector('#GloboDesktopMenu') finder din container.

Relaterede sider

• Vis menuen på en CSS-vælgerPlacer menuen på bestemte elementer i dit tema ved at angive deres CSS-vælgere.
• Udgiv en menuUdgiv din menu til et tema, og vælg, hvor den vises i din webshop.
• Brugerdefineret CSSTilføj din egen CSS for at finjustere menuens udseende.

Var dette nyttigt?

Rapportér et problem