Ställ in rullgardinsmenyer i din online-butik

Du kan använda rullgardinsmenyer för att gruppera produkter, produktserier eller sidor och göra det enklare för kunderna att navigera i din webbshop. Om du till exempel har många produkter kanske du vill lägga till dem i serier och sedan använda en rullgardinsmeny från huvudmenyn för att organisera serierna. Detta kan hjälpa kunderna att hitta den typ av produkter som 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 webbshopsmenyer i Innehåll > Menyer i Shopify-admin.

Inbäddade menyalternativ för att bygga rullgardinsmenyer

Du kan bygga rullgardinsmenyer genom att skapa eller flytta menyobjekt så att de är inbäddade under ett toppnivåobjekt. Toppnivåobjektet visas i huvudmenyn i webbshoppen, och de inbäddade menyobjekten visas i en rullgardinsmeny. Toppnivåobjektet kan ha upp till två nivåer av inbäddade rullgardinsmenyer.

Alla teman kommer visa inbäddade objekt som rullgardinsmenyer från huvudmenyn och vissa teman kommer visa inbäddade objekt som rullgardinsmenyer på andra platser.

Huvudmenyn och rullgardinsmenyer 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 ett av menyalternativen i huvudmenyn.

Steg:

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

  2. Klicka på namnet i din huvudmeny.

  3. Välj ett av huvudmenyobjekten som rubrik för din rullgardinsmeny, eller lägg till ett nytt menyobjekt. 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 rubrikmenyobjektet.

  4. Slutför följande uppgifter för att lägga till ett menyobjekt som ska inkluderas i rullgardinsmenyn:

    1. Klicka på Lägg till menyobjekt.
    2. Ange ett namn för menyobjektet i fältet Namn.
    3. Ange eller välj en destination för menyobjektet i fältet Sök eller klistra in en länk.
  5. Klicka på Lägg till och sedan påDra, och dra därefter menyobjektet för att bädda in det under rubrikmenyobjektet.

  6. Klicka på Spara-menyn.

iPhone
  1. Från Shopify-appen trycker du på Horisontell meny-knappen.

  2. Tryck på Innehåll > Menyer.

  3. Klicka på huvudmenyns namn.

  4. Välj ett av huvudmenyobjekten som rubrik för rullgardinsmenyn, 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 rubrikmenyobjektet.

  5. Slutför följande uppgifter för att lägga till ett menyobjekt som ska inkluderas i rullgardinsmenyn:

    1. Blippa på Lägg till menyobjekt.
    2. Ange ett namn för menyobjektet i fältet Namn.
    3. Ange eller välj en destination för menyobjektet i fältet Sök eller klistra in en länk.
  6. Klicka på Lägg till och sedan påDra, och dra därefter menyobjektet för att bädda in det under rubrikmenyobjektet.

  7. Tryck på Spara.

Android
  1. Från Shopify-appen trycker du på Meny-knappen.

  2. Tryck på Innehåll > Menyer.

  3. Klicka på huvudmenyns namn.

  4. Välj ett av huvudmenyobjekten som rubrik för rullgardinsmenyn, 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 rubrikmenyobjektet.

  5. Slutför följande uppgifter för att lägga till ett menyobjekt som ska inkluderas i rullgardinsmenyn:

    1. Blippa på Lägg till menyobjekt.
    2. Ange ett namn för menyobjektet i fältet Namn.
    3. Ange eller välj en destination för menyobjektet i fältet Sök eller klistra in en länk.
  6. Klicka på Lägg till och sedan påDra, och dra därefter menyobjektet för att bädda in det under rubrikmenyobjektet.

  7. Tryck på .

Integration av sidfotsmeny

Rullgardinsmenyer kan också implementeras i sidfotsmenyer.

Steg:

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

Överväganden för temakompatibilitet

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

  • De flesta teman stöder upp till två nivåer av inbäddade rullgardinsmenyer. Kontrollera ditt temas dokumentation eller testa inbäddade objekt för att bekräfta kompatibiliteten.
  • Vissa teman kan kräva CSS-justeringar för att förbättra mobilanvändbarheten. Anpassa inte temat om du inte känner till temakoden. Mer information om hur du anpassar ditt tema.

Fastställa om ditt tema stöder inbäddade rullgardinsmenyer

För att fastställa om ditt nuvarande tema stöder det maximala antalet nivåer av inbäddade rullgardinsmenyer som du vill implementera, så kan du använda följande resurser:

  1. Kontrollera ditt temas dokumentation: Granska temats dokumentation för specifik information om menyfunktioner och inbäddningsnivåer som stöds.

  2. Testa de inbäddade objekten: Skapa en testmenystruktur med önskat antal inbäddade nivåer och verifiera att de visas korrekt på både datorer och mobila enheter.

De flesta teman stöder upp till två nivåer av inbäddade rullgardinsmenyer. Om du har problem med rullgardinsmenyer kontrollerar du att ditt tema stöder antalet inbäddade nivåer som du försöker implementera, eftersom vissa teman kan kräva ytterligare anpassning för att stödja flera nivåer av inbäddning.

Bästa praxis för rullgardinsmenyer

Gå igenom följande bästa praxis för att skapa en användbar menystruktur som fungerar bra, oavsett vilken enhet som används.

  • Använd beskrivande etiketter som "Handla efter kategori" för menyobjekt på översta nivå med #-länkar.

  • Se till att menyerna är optimerade för mobila enheter. Du kan testa menyerna på en mobil enhet för att bekräfta att rullgardinsmenyerna öppnar som förväntat.

  • Lägg till sju eller färre menyobjekt på översta nivå för att undvika att området överfylls.

  • Använd tydliga och beskrivande länktitlar. Till exempel "Produktserier" och "Sommarklänningar".

Felsökning av vanliga problem

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

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

  • Synlighetsproblem: Om inbäddade objekt inte visas ska du se till att de dras helt under sidhuvudobjektet och att de är indragna i gränssnittet för menyerna. Bekräfta att ditt tema stöder antalet inbäddade nivåer som du har ställt in.

  • Temakompatibilitet: Om du har problem med rullgardinsmenyer kontrollerar du att ditt tema stöder antalet inbäddade nivåer som du försöker implementera. Vissa teman kan kräva ytterligare anpassning för att stödja flera nivåer av inbäddning.

Anpassa temakod för rullgardinsmenyer

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

Hittar du inte de svar du letar efter? Vi finns här för att hjälpa till!