Hjälp
Logga in

Konfigurera rullgardinsmenyer i din webbshop

Du kan använda rullgardinsmenyer för att gruppera produkter, produktserier eller sidor och göra det enklare för kunder att navigera i din webbshop. Om du till exempel har många produkter kan du lägga till dem i produktserier och sedan använda en rullgardinsmeny från huvudmenyn för att organisera produktserierna. Detta kan hjälpa kunderna att hitta den produkttyp de letar efter.

Du kan även lägga till, ta bort eller redigera menyobjekt i rullgardinsmenyer eller i dina standardmenyer.

Du kan visa och ändra webbshopens menyer från Innehåll > Menyer i din Shopify admin.

På den här sidan

Kapsla menyobjekt för att skapa rullgardinsmenyer

Du kan bygga rullgardinsmenyer genom att skapa eller flytta menyobjekt så att de kapslas under ett objekt på toppnivå. Objektet på toppnivå visas i huvudmenyn i din webbshop och de kapslade menyobjekten visas i en rullgardinsmeny. Objektet på toppnivå kan ha upp till två nivåer av kapslade rullgardinsmenyer.

Alla teman visar kapslade objekt som rullgardinsmenyer från huvudmenyn, och vissa teman visar kapslade objekt som rullgardinsmenyer på andra platser.

Huvudmenyn och rullgardinsmenyerna visas på olika platser i din webbshop beroende på ditt tema. Vissa teman visar en ikon bredvid namnet på en rullgardinsmeny i huvudmenyn för att hjälpa kunderna att se att det finns en rullgardinsmeny.

Lägg till en rullgardinsmeny från huvudmenyn

Du kan lägga till en rullgardinsmeny från valfritt menyobjekt i huvudmenyn.

Steg:

Dator

  1. Gå till Innehåll > Menyer från din Shopify admin.

  2. Klicka på namnet på din huvudmeny.

  3. Välj ett menyobjekt i huvudmenyn som ska vara rubrik för din rullgardinsmeny, eller lägg till ett nytt menyobjekt som rubrik. Om du inte vill att rubriken ska länka till något anger du # i fältet Sök eller klistra in en länk för det menyobjektet.

  4. Gör följande för att lägga till ett menyobjekt i rullgardinsmenyn:

    1. Klicka på Lägg till menyobjekt.
    2. Ange ett namn för menyobjektet i fältet Namn.
    3. I fältet Sök eller klistra in en länk anger eller väljer du en destination för menyobjektet.

  5. Klicka på Lägg till, och klicka sedan på Dra och dra menyobjektet för att kapsla in det under rubrikmenyobjektet.

  6. Klicka på Spara meny.

Mobil

  1. Från Shopify-appen trycker du på ikonen Menu.

  2. Tryck på ikonen nedåtpil i menyn Innehåll och tryck sedan på Menyer.

  3. Tryck på namnet på din huvudmeny.

  4. Välj ett av menyobjekten i huvudmenyn som ska vara rubriken för din rullgardinsmeny, eller lägg till ett nytt menyobjekt som rubrik. Om du inte vill att rubriken ska länka till något anger du # i fältet Sök eller klistra in en länk för rubrikens menyobjekt.

  5. Gör följande för att lägga till ett menyobjekt i rullgardinsmenyn:

    1. Tryck på Lägg till menyobjekt.
    2. Ange ett namn för menyobjektet i fältet Namn.
    3. I fältet Sök eller klistra in en länk anger eller väljer du en destination för menyobjektet.

  6. Tryck på Lägg till och tryck sedan på Dra och dra menyobjektet för att kapsla in det under rubrikmenyobjektet.

  7. Tryck på Spara eller ✓.

Rullgardinsmenyer kan även implementeras i sidfotsmenyer.

Steg:

  1. Gå till Innehåll > Menyer från din Shopify admin.
  2. Valfritt: Följ samma kapslingsprinciper som används för huvudmenyer, till exempel att dra menyobjekt under ett rubrikobjekt för att skapa en rullgardinsstruktur genom att klicka på Dra och dra objekten på plats.
  3. Ange # i fältet Länk för rubrikobjekt som inte ska länka till en sida (till exempel rubriker som ”Support” eller ”Utforska”).

Hänsyn till temakompatibilitet

Granska följande överväganden för att lägga till rullgardinsmenyer i ditt tema:

  • De flesta teman har stöd för upp till två nivåer av kapslade rullgardinsmenyer. Kontrollera temats dokumentation eller testa kapslade objekt för att bekräfta kompatibiliteten.
  • Vissa teman kan kräva CSS-justeringar för att förbättra mobilanvändbarheten. Anpassa inte ditt tema om du inte är bekant med temakod. Mer information om att anpassa ditt tema.

Avgöra om ditt tema stöder kapslade rullgardinsmenyer

För att avgöra om ditt nuvarande tema stöder det maximala antalet nivåer av kapslade rullgardinsmenyer som du vill implementera kan du använda följande resurser:

  1. Kontrollera temats dokumentation: Granska temats dokumentation för specifik information om menykapacitet och vilka kapslingsnivåer som stöds.
  2. Testa de kapslade objekten: Skapa en testmenystruktur med önskat antal kapslade nivåer och verifiera att den visas korrekt på både dator och mobila enheter.

De flesta teman har stöd för upp till två nivåer av kapslade rullgardinsmenyer. Om du har problem med rullgardinsmenyer ska du verifiera att ditt tema stöder det antal kapslade nivåer som du försöker implementera, eftersom vissa teman kan kräva ytterligare anpassning för att stödja flera kapslingsnivåer.

Bästa praxis för rullgardinsmenyer

Granska följande bästa praxis för att skapa en användbar menystruktur som fungerar bra på alla enheter:

  • Använd beskrivande etiketter, till exempel ”Handla efter kategori”, för menyobjekt på toppnivå med #-länkar.
  • Se till att menyerna är optimerade för mobila enheter. Du kan testa menyer på mobila enheter för att bekräfta att rullgardinsmenyerna expanderas som förväntat.
  • Lägg till sju eller färre menyobjekt på toppnivå för att undvika att det blir överfullt.
  • Använd tydliga och beskrivande länktitlar. Till exempel ”Produktserier” och ”Sommarklänningar”.
  • Varje meny kan ha upp till 10 000 objekt och din butik kan ha upp till 1 000 menyer totalt. Alla menyobjekt med underordnade objekt i en rullgardinsmeny räknas som en separat meny mot denna gräns.

Tillgänglighet för rullgardinsmenyer

De flesta teman implementerar rullgardinsmenyers rubriker som knappar snarare än som klickbara länkar. Det här är en avsiktlig tillgänglighetsdesign som hjälper kunder som använder tekniska hjälpmedel att förstå navigeringsstrukturen.

När ett menyobjekt på toppnivå styr en underordnad rullgardinsmeny fungerar det som en knapp för att expandera menyn snarare än som en länk till en ny sida. Detta tillvägagångssätt säkerställer att kunder som använder skärmläsare eller andra tekniska hjälpmedel kan navigera korrekt i din butiks menysystem.

Om du vill att kunderna ska kunna komma åt en huvudkategorisida (till exempel ”Alla produkter” eller ”Alla produktserier”) lägger du till den som det första objektet i själva rullgardinsmenyn istället för att göra rubriken klickbar.

Felsökning av vanliga problem

Granska följande lösningar på vanliga problem som du kan stöta på när du konfigurerar navigeringsmenyer:

  • Omdirigeringar av mobilmeny: Om en menylänk på toppnivå omdirigerar till en ny sida när du trycker på den, kontrollera menyn i din Shopify-admin för att bekräfta att menylänkfältet är #.

  • Synlighetsproblem: Om kapslade objekt inte visas, se till att de har dragits helt under rubrikobjektet och har indrag i Menyer-gränssnittet. Bekräfta att ditt tema stöder det antal kapslade nivåer som du har konfigurerat.

  • Temakompatibilitet: Om du har problem med rullgardinsmenyer ska du verifiera att ditt tema stöder det antal kapslade nivåer som du försöker implementera. Vissa teman kan kräva ytterligare anpassning för att stödja flera kapslingsnivåer.

  • Skapande av kapslad meny blockerad: Om du stöter på felet ”Menu cannot contain nested menus. Opt in the nested navigation feature to use this”, kan din butik behöva aktivera funktionen för kapslad navigering. Detta påverkar vanligtvis butiker som skapats före 2018. Kontakta Shopify-supporten om du stöter på det här felet.

  • Fel meny visas: Om du har flera navigeringslänkar som pekar på samma sida (till exempel din startsida) kan ditt tema visa fel undermeny. Se till att varje navigeringsavsnitt länkar till en unik sida för att undvika förvirring.

  • Menyobjekt försvinner: Om menylänkar försvinner utan att ha raderats, kontrollera om du har raderat de produkter, produktserier eller sidor som menyobjekten länkade till. När den länkade resursen raderas tas även menyobjektet bort.

Anpassa temakod för rullgardinsmenyer

För teman som kräver mer djupgående anpassning kan du överväga att anpassa din temakod.