Opsæt rullemenuer i din webshop
Du kan bruge rullemenuer til at gruppere produkter, kollektioner eller sider, så det bliver nemmere for kunderne at navigere i din webshop. Hvis du f.eks. har mange produkter, kan du føje dem til kollektioner og derefter bruge en rullemenu i hovedmenuen til at organisere kollektionerne. Dette kan hjælpe kunderne med at finde den type produkter, de leder efter.
Du kan også tilføje, fjerne eller redigere menupunkter i rullemenuer eller i dine standardmenuer.
Du kan se og ændre menuerne i din webshop fra Indhold > Menuer i din Shopify-administrator.
På denne side
- Indlejring af menupunkter for at opbygge rullemenuer
- Tilføj en rullemenu fra hovedmenuen
- Integration af sidefodsmenu
- Overvejelser om temakompatibilitet
- Find ud af, om dit tema understøtter indlejrede rullemenuer
- Bedste praksis for rullemenuer
- Fejlfinding af almindelige problemer
- Tilpasning af temakode for rullemenuer
Indlejring af menupunkter for at opbygge rullemenuer
Du kan opbygge rullemenuer ved at oprette eller flytte menupunkter, så de er indlejret under et element på øverste niveau. Elementet på øverste niveau vises i hovedmenuen i din webshop, og de indlejrede menupunkter vises i en rullemenu. Elementet på øverste niveau kan have op til to niveauer af indlejrede rullemenuer.
Alle temaer viser indlejrede elementer som rullemenuer fra hovedmenuen, og nogle temaer viser indlejrede elementer som rullemenuer andre steder.
Hovedmenuen og rullemenuerne vises forskellige steder i din webshop afhængigt af dit tema. Nogle temaer viser et ikon ved siden af navnet på en rullemenu i hovedmenuen for at hjælpe kunderne med at se, at der er en rullemenu.
Tilføj en rullemenu fra hovedmenuen
Du kan tilføje en rullemenu fra et hvilket som helst af menupunkterne i hovedmenuen.
Fremgangsmåde:
Computer
Gå til Indhold > Menuer i din Shopify-administrator.
Klik på navnet på din hovedmenu.
Vælg et af hovedmenupunkterne som overskrift for din rullemenu, eller tilføj et nyt menupunkt. Hvis du ikke vil have, at overskriften skal linke til noget, skal du angive # i feltet Søg eller indsæt et link for overskriftens menupunkt.
Gør følgende for at tilføje et menupunkt, der skal medtages i rullemenuen:
- Klik på Tilføj menupunkt.
- Angiv et navn til dit menupunkt i feltet Navn.
- I feltet Søg eller indsæt et link skal du angive eller vælge en destination for dit menupunkt.
Klik på Tilføj, og klik derefter på
og træk menupunktet for at indlejre det under menupunktet for overskriften.
Klik på Gem menu.
Mobil
Gå til Shopify app, og tryk på ikonet
.
Tryk på ikonet
i menuen Indhold, og tryk derefter på Menuer.
Tryk på navnet på din hovedmenu.
Vælg et af menupunkterne i hovedmenuen, der skal være overskriften for din rullemenu, eller tilføj et nyt menupunkt, der skal være overskriften. Hvis du ikke vil have, at overskriften skal linke til noget, skal du angive
#i feltet Søg, eller indsæt et link for overskriftsmenupunktet.Gør følgende for at tilføje et menupunkt, der skal medtages i rullemenuen:
- Tryk på Tilføj menupunkt.
- Angiv et navn til dit menupunkt i feltet Navn.
- I feltet Søg eller indsæt et link skal du angive eller vælge en destination for dit menupunkt.
Tryk på Tilføj, tryk derefter på
, og træk menupunktet for at indlejre det under overskriftsmenupunktet.
Tryk på Gem eller ✓.
Integration af sidefodsmenu
Rullemenuer kan også implementeres i sidefodsmenuer.
Fremgangsmåde:
- Gå til Indhold > Menuer i din Shopify-administrator.
- Valgfrit: Følg de samme principper for indlejring, som bruges til hovedmenuer, f.eks. ved at trække menupunkter ind under et overskriftselement for at oprette en rullemenustruktur. Klik på
, og træk elementerne på plads.
- Angiv # i feltet Link for overskriftselementer, der ikke skal linke til en side (f.eks. overskrifter som “Support” eller “Udforsk”).
Overvejelser vedrørende temakompatibilitet
Gennemgå følgende overvejelser i forbindelse med tilføjelse af rullemenuer til dit tema:
- De fleste temaer understøtter op til to niveauer af indlejrede rullemenuer. Gennemgå dit temas dokumentation, eller test de indlejrede elementer for at bekræfte kompatibiliteten.
- Nogle temaer kræver muligvis CSS-justeringer for at forbedre brugervenligheden på mobilenheder. Du bør ikke tilpasse dit tema, hvis du ikke er bekendt med temakode. Få mere at vide om tilpasning af dit tema.
Sådan afgør du, om dit tema understøtter indlejrede rullemenuer
Du kan bruge følgende ressourcer til at afgøre, om dit nuværende tema understøtter det maksimale antal niveauer af indlejrede rullemenuer, du vil implementere:
- Gennemgå dit temas dokumentation: Gennemgå temaets dokumentation for at få specifikke oplysninger om menufunktionalitet og understøttede indlejringsniveauer.
- Test de indlejrede elementer: Opret en testmenustruktur med det ønskede antal indlejrede niveauer, og bekræft, at den vises korrekt på både computere og mobilenheder.
De fleste temaer understøtter op til to niveauer af indlejrede rullemenuer. Hvis du oplever problemer med rullemenuer, skal du bekræfte, at dit tema understøtter det antal indlejrede niveauer, du forsøger at implementere, da nogle temaer kan kræve yderligere tilpasning for at understøtte flere indlejringsniveauer.
Bedste fremgangsmåder for rullemenuer
Gennemgå følgende bedste fremgangsmåder for at oprette en nyttig menustruktur, der fungerer godt på alle enheder:
- Brug beskrivende labels, f.eks. “Køb efter kategori”, til menupunkter på øverste niveau med #-links.
- Sørg for, at menuerne er optimeret til mobilenheder. Du kan teste menuer på mobilenheder for at bekræfte, at rullemenuerne udvides som forventet.
- Tilføj syv eller færre menupunkter på øverste niveau for at undgå, at det bliver for overfyldt.
- Brug tydelige og beskrivende linktitler. F.eks. “Kollektioner” og “Sommerkjoler”.
- Hver menu kan have op til 10.000 elementer, og din butik kan have op til 1.000 menuer i alt. Alle menupunkter med underpunkter i en rullemenu tæller som en separat menu i forhold til denne grænse.
Tilgængelighed i rullemenuer
De fleste temaer implementerer overskrifter i rullemenuer som knapper i stedet for links, der kan klikkes på. Dette er et bevidst design for tilgængelighed, der hjælper kunder, som bruger teknologiske hjælpemidler, med at forstå navigationsstrukturen.
Når et menupunkt på øverste niveau styrer en rulleundermenu, fungerer det som en knap til at udvide menuen i stedet for som et link til en ny side. Denne tilgang sikrer, at kunder, der bruger skærmlæsere eller andre teknologiske hjælpemidler, kan navigere korrekt i din butiks menusystem.
Hvis du vil have, at kunderne skal have adgang til en hovedkategoriside (f.eks. “Alle produkter” eller “Alle kollektioner”), skal du tilføje den som det første punkt i selve rullemenuen i stedet for at gøre overskriften klikbar.
Fejlfinding af almindelige problemer
Gennemgå følgende løsninger på almindelige problemer, du kan støde på, når du opsætter navigationsmenuer:
Omdirigeringer i mobilmenu: Hvis et menulink på øverste niveau omdirigerer til en ny side, når du trykker på det, skal du tjekke menuen i din Shopify-administrator for at bekræfte, at menulinkfeltet er #.
Synlighedsproblemer: Hvis indlejrede elementer ikke vises, skal du sørge for, at de er trukket helt ind under overskriftselementet og rykket ind i grænsefladen Menuer. Bekræft, at dit tema understøtter det antal indlejrede niveauer, du har konfigureret.
Temakompatibilitet: Hvis du oplever problemer med rullemenuer, skal du bekræfte, at dit tema understøtter det antal indlejrede niveauer, du forsøger at implementere. Nogle temaer kan kræve yderligere tilpasning for at understøtte flere indlejringsniveauer.
Oprettelse af indlejret menu er blokeret: Hvis du støder på fejlmeddelelsen “Menu cannot contain nested menus. Opt in the nested navigation feature to use this”, skal funktionen til indlejret navigation muligvis aktiveres i din butik. Dette påvirker typisk butikker, der er oprettet før 2018. Kontakt Shopify Support, hvis du støder på denne fejl.
Forkert menu vises: Hvis du har flere navigationslinks, der peger på den samme side (f.eks. din startside), viser dit tema muligvis den forkerte undermenu. Sørg for, at hvert navigationsafsnit linker til en unik side for at undgå forvirring.
Menupunkter forsvinder: Hvis menulinks forsvinder uden at blive slettet, skal du tjekke, om du har slettet de produkter, kollektioner eller sider, som menupunkterne linkede til. Hvis du sletter den linkede ressource, fjernes menupunktet også.
Tilpasning af temakode til rullemenuer
For temaer, der kræver mere dybdegående tilpasning, kan du overveje at tilpasse din temakode.