Konfigurere rullegardinmenyer i nettbutikken
Du kan bruke rullegardinmenyer til å gruppere produkter, samlinger eller sider for å gjøre det enklere for kundene å navigere i nettbutikken. Hvis du for eksempel har mange produkter, kan det være lurt å legge dem til i samlinger og deretter bruke en rullegardinmeny fra hovedmenyen for å organisere samlingene. Dette kan hjelpe kundene med å finne produkttypen de leter etter.
Du kan også legge til, fjerne eller redigere menyelementer i rullegardinmenyer eller i standardmenyene dine.
Du kan se og endre menyene i nettbutikken fra Innhold > Menyer i Shopify-administratorpanelet.
På denne siden
- Neste menyelementer for å bygge rullegardinmenyer
- Legge til en rullegardinmeny fra hovedmenyen
- Integrering av bunntekstmeny
- Vurderinger for temakompatibilitet
- Avgjøre om temaet ditt støtter nestede rullegardinmenyer
- Anbefalte fremgangsmåter for rullegardinmenyer
- Feilsøke vanlige problemer
- Tilpasse temakode for rullegardinmenyer
Neste menyelementer for å bygge rullegardinmenyer
Du kan bygge rullegardinmenyer ved å opprette eller flytte menyelementer slik at de blir nestet under et element på øverste nivå. Elementet på øverste nivå vises i hovedmenyen i nettbutikken, og de nestede menyelementene vises i en rullegardinmeny. Elementet på øverste nivå kan ha opptil to nivåer med nestede rullegardinmenyer.
Alle temaer viser nestede elementer som rullegardinmenyer fra hovedmenyen, og noen temaer viser nestede elementer som rullegardinmenyer andre steder.
Hovedmenyen og rullegardinmenyene vises på ulike steder i nettbutikken avhengig av temaet ditt. Noen temaer viser et ikon ved siden av navnet på en rullegardinmeny i hovedmenyen for å hjelpe kundene å se at det finnes en rullegardinmeny der.
Legge til en rullegardinmeny fra hovedmenyen
Du kan legge til en rullegardinmeny fra hvilket som helst av menyelementene i hovedmenyen.
Trinn:
Datamaskin
Gå til Innhold > Menyer fra Shopify-administratorpanelet.
Klikk på navnet på hovedmenyen.
Velg et av hovedmenyelementene som overskrift for rullegardinmenyen, eller legg til et nytt menyelement. Hvis du ikke vil at overskriften skal kobles til noe, skriver du inn # i feltet Søk eller lim inn en kobling for menyelementet i overskriften.
Gjør følgende for å legge til et menyelement i rullegardinmenyen:
- Klikk på Legg til menyelement.
- Angi et navn på menyelementet i Navn-feltet.
- Angi eller velg en destinasjon for menyelementet i feltet Søk eller lim inn en kobling.
Klikk på Legg til, og klikk deretter på
og dra menyelementet for å neste det under overskriftsmenyelementet.
Klikk på Lagre meny.
Mobil
Fra Shopify app, trykk på
-ikonet.
I Innhold-menyen trykker du på
-ikonet, og deretter på Menyer.
Trykk på navnet på hovedmenyen.
Velg et av menyelementene i hovedmenyen som skal være overskriften for rullegardinmenyen, eller legg til et nytt menyelement som overskrift. Hvis du ikke vil at overskriften skal kobles til noe, skriver du inn
#i feltet Søk eller lim inn en kobling for overskriftsmenyelementet.Gjør følgende for å legge til et menyelement i rullegardinmenyen:
- Trykk på Legg til menyelement.
- Angi et navn på menyelementet i Navn-feltet.
- Angi eller velg en destinasjon for menyelementet i feltet Søk eller lim inn en kobling.
Trykk på Legg til, og trykk deretter på
og dra menyelementet for å neste det under overskriftsmenyelementet.
Trykk på Lagre eller ✓.
Integrasjon med bunntekstmeny
Rullegardinmenyer kan også implementeres i bunntekstmenyer.
Trinn:
- Gå til Innhold > Menyer fra Shopify-administratorpanelet.
- Valgfritt: Følg de samme nestingsprinsippene som brukes for hovedmenyer, som å dra menyelementer under et overskriftselement for å opprette en rullegardinstruktur, ved å klikke på
og dra elementene på plass.
- Skriv inn # i Kobling-feltet for overskriftselementer som ikke skal kobles til en side (for eksempel «Brukerstøtte»- eller «Utforsk»-overskrifter).
Hensyn til temakompatibilitet
Se gjennom følgende hensyn for å legge til rullegardinmenyer i temaet:
- De fleste temaer støtter opptil to nivåer med nestede rullegardinmenyer. Sjekk temadokumentasjonen eller test nestede elementer for å bekrefte kompatibiliteten.
- Enkelte temaer kan kreve CSS-justeringer for å forbedre mobilvennligheten. Ikke tilpass temaet hvis du ikke er kjent med temakode. Finn ut mer om hvordan du tilpasser temaet.
Finne ut om temaet støtter nestede rullegardinmenyer
For å finne ut om det gjeldende temaet støtter det maksimale antallet nivåer med nestede rullegardinmenyer du vil implementere, kan du bruke følgende ressurser:
- Sjekk temadokumentasjonen: Se gjennom temadokumentasjonen for spesifikk informasjon om menyfunksjonalitet og støttede nestingsnivåer.
- Test de nestede elementene: Opprett en testmenystruktur med ønsket antall nestingsnivåer og bekreft at den vises korrekt på både stasjonære og mobile enheter.
De fleste temaer støtter opptil to nivåer med nestede rullegardinmenyer. Hvis du opplever problemer med rullegardinmenyer, må du bekrefte at temaet støtter antallet nestingsnivåer du prøver å implementere, ettersom enkelte temaer kan kreve ytterligere tilpasning for å støtte flere nestingsnivåer.
Beste praksis for rullegardinmenyer
Se gjennom følgende beste praksis for å opprette en nyttig menystruktur som fungerer godt på alle enheter:
- Bruk beskrivende etiketter, som «Handle etter kategori», for menyelementer på øverste nivå med #-koblinger.
- Sørg for at menyene er optimalisert for mobile enheter. Du kan teste menyer på mobile enheter for å bekrefte at rullegardinmenyene utvides som forventet.
- Legg til sju eller færre menyelementer på øverste nivå for å unngå at det blir for fullt.
- Bruk tydelige og beskrivende koblingstitler. For eksempel «Samlinger» og «Sommerkjoler».
- Hver meny kan ha opptil 10 000 elementer, og butikken kan ha opptil 1000 menyer totalt. Alle menyelementer med underelementer i en rullegardinmeny teller som en separat meny mot denne grensen.
Tilgjengelighet for rullegardinmenyer
De fleste temaer implementerer rullegardinmenyoverskrifter som knapper i stedet for klikkbare koblinger. Dette er et bevisst tilgjengelighetsdesign som hjelper kunder som bruker assisterende teknologi med å forstå navigasjonsstrukturen.
Når et menyelement på øverste nivå kontrollerer en rullegardinundermeny, fungerer det som en knapp for å utvide menyen, i stedet for som en kobling til en ny side. Denne tilnærmingen sikrer at kunder som bruker skjermlesere eller annen assisterende teknologi kan navigere i butikkens menysystem på riktig måte.
Hvis du vil at kundene skal ha tilgang til en hovedkategoriside (som «Alle produkter» eller «Alle samlinger»), må du legge til dette som det første elementet i selve rullegardinmenyen, i stedet for å gjøre overskriften klikkbar.
Feilsøking av vanlige problemer
Se gjennom følgende løsninger på vanlige problemer du kan støte på når du konfigurerer navigasjonsmenyer:
Omdirigeringer for mobilmeny: Hvis en menylenk på øverste nivå omdirigerer til en ny side når du trykker på den, må du sjekke menyen i Shopify-administrator for å bekrefte at koblingsfeltet for menyelementet er #.
Synlighetsproblemer: Hvis nestede elementer ikke vises, må du sørge for at de er dratt helt inn under overskriftselementet og har innrykk i Menyer-grensesnittet. Bekreft at temaet støtter antallet nestingsnivåer du har konfigurert.
Temakompatibilitet: Hvis du opplever problemer med rullegardinmenyer, må du bekrefte at temaet støtter antallet nestingsnivåer du prøver å implementere. Enkelte temaer kan kreve ytterligere tilpasning for å støtte flere nestingsnivåer.
Oppretting av nestede menyer er blokkert: Hvis du støter på feilmeldingen «Menu cannot contain nested menus. Opt in the nested navigation feature to use this», kan det hende at butikken din må ha funksjonen for nestet navigasjon aktivert. Dette gjelder vanligvis for butikker som er opprettet før 2018. Kontakt Shopifys brukerstøtte hvis du støter på denne feilen.
Feil meny vises: Hvis du har flere navigasjonskoblinger som peker til samme side (for eksempel startsiden), kan temaet vise feil undermeny. Sørg for at hver navigasjonsseksjon kobler til en unik side for å unngå forveksling.
Menyelementer forsvinner: Hvis menykoblinger forsvinner uten å bli slettet, må du sjekke om du har slettet produktene, samlingene eller sidene som menyelementene var koblet til. Sletting av den koblede ressursen fjerner også menyelementet.
Tilpasse temakode for rullegardinmenyer
For temaer som krever dypere tilpasning, kan du vurdere å tilpasse temakoden.