Vervolgkeuzemenu's instellen in je webshop

Je kunt vervolgkeuzemenu's gebruiken om producten, collecties of pagina's te groeperen, zodat klanten makkelijker door je webshop kunnen navigeren. Als je bijvoorbeeld veel producten hebt, kun je ze toevoegen aan collecties en vervolgens een vervolgkeuzemenu uit het hoofdmenu gebruiken om de collecties te organiseren. Zo kunnen klanten makkelijker de producten vinden die ze zoeken.

Je kunt ook menuopties toevoegen, verwijderen of bewerken in vervolgkeuzemenu's of in je standaardmenu's.

Je kunt de menu's van je webshop bekijken en wijzigen via Content > Menu's in je Shopify-beheercentrum.

Menuopties nesten om vervolgkeuzemenu's te maken

Je kunt vervolgkeuzemenu's maken door menuopties aan te maken of te verplaatsen zodat ze onder een item op het hoogste niveau worden genest. Het item op het hoogste niveau wordt weergegeven in het hoofdmenu van je webshop en de geneste menuopties worden in een vervolgkeuzemenu weergegeven. Het item op het hoogste niveau kan maximaal twee niveaus van geneste vervolgkeuzemenu's hebben.

Alle thema's geven geneste items weer als vervolgkeuzemenu's vanuit het hoofdmenu en sommige thema's geven geneste items weer als vervolgkeuzemenu's op andere locaties.

Het hoofdmenu en de vervolgkeuzemenu's worden op verschillende locaties in je webshop weergegeven, afhankelijk van je thema. Sommige thema's geven een pictogram weer naast de naam van een vervolgkeuzemenu in het hoofdmenu, zodat klanten kunnen zien dat er een vervolgkeuzemenu is.

Een vervolgkeuzemenu toevoegen vanuit het hoofdmenu

Je kunt een vervolgkeuzemenu toevoegen vanuit elke menuoptie in het hoofdmenu.

Stappen:

Desktop
  1. Ga vanuit je Shopify-beheercentrum naar Content > Menu's.

  2. Klik op de naam van je hoofdmenu.

  3. Kies een van de hoofdmenuopties als koptekst van je vervolgkeuzemenu, of voeg een nieuwe menuoptie toe. Als je niet wilt dat de koptekst ergens naartoe linkt, voer dan # in het veld Een link zoeken of plakken in voor de menuoptie voor de koptekst.

  4. Voer de volgende taken uit om een menuoptie aan het vervolgkeuzemenu toe te voegen:

    1. Klik op Menuoptie toevoegen.
    2. Voer in het veld Naam een naam in voor je menuoptie.
    3. Voer in het veld Een link zoeken of plakken een bestemming in of selecteer deze voor je menuoptie.
  5. Klik op Toevoegen en klik vervolgens op Slepen en sleep de menuoptie om deze onder de menuoptie voor de koptekst te nesten.

  6. Klik op Menu opslaan.

Mobiel
  1. Tik in de Shopify-app op het pictogram Menu.

  2. Tik in het menu Inhoud op het pictogram pijl omlaag en tik vervolgens op Menu's.

  3. Tik op de naam van je hoofdmenu.

  4. Kies een van de menuopties van het hoofdmenu als koptekst voor je vervolgkeuzelijst of voeg een nieuwe menuoptie toe als koptekst. Als je niet wilt dat de koptekst ergens naartoe linkt, voer je # in het veld Zoeken of een link plakken in voor de menuoptie van de koptekst.

  5. Voer de volgende taken uit om een menuoptie aan het vervolgkeuzemenu toe te voegen:

    1. Tik op Menuoptie toevoegen.
    2. Voer in het veld Naam een naam in voor je menuoptie.
    3. Voer in het veld Een link zoeken of plakken een bestemming in of selecteer deze voor je menuoptie.
  6. Tik op Toevoegen en tik vervolgens op Slepen en sleep de menuoptie om deze onder de menuoptie van de koptekst te nesten.

  7. Tik op Opslaan of .

Vervolgkeuzelijsten kunnen ook in voettekstmenu's worden geïmplementeerd.

Stappen:

  1. Ga vanuit je Shopify-beheercentrum naar Content > Menu's.
  2. Optioneel: Volg dezelfde nestprincipes die voor hoofdmenu's worden gebruikt, zoals het slepen van menuopties onder een koptekstoptie om een vervolgkeuzestructuur aan te maken door op Slepen te klikken en de items op hun plaats te slepen.
  3. Voer # in het veld Link in voor koptekstopties die niet naar een pagina moeten linken (bijvoorbeeld kopteksten als ‘Support’ of ‘Explore’).

Overwegingen bij themacompatibiliteit

Bekijk de volgende overwegingen voor het toevoegen van vervolgkeuzelijsten aan je thema:

  • De meeste thema's ondersteunen maximaal twee niveaus van geneste vervolgkeuzelijsten. Controleer de documentatie van je thema of test geneste items om de compatibiliteit te bevestigen.
  • Sommige thema's vereisen mogelijk CSS-aanpassingen om de bruikbaarheid op mobiele apparaten te verbeteren. Pas je thema niet aan als je niet bekend bent met themacode. Meer informatie over het aanpassen van je thema.

Bepalen of je thema geneste vervolgkeuzelijsten ondersteunt

Om te bepalen of je huidige thema het maximale aantal niveaus van geneste vervolgkeuzelijsten ondersteunt dat je wilt implementeren, kun je de volgende bronnen gebruiken:

  1. Controleer de documentatie van je thema: Bekijk de documentatie van het thema voor specifieke informatie over menucapaciteiten en ondersteunde nestniveaus.
  2. Test de geneste items: Maak een testmenustructuur aan met het gewenste aantal geneste niveaus en controleer of deze correct wordt weergegeven op zowel desktopcomputers als mobiele apparaten.

De meeste thema's ondersteunen maximaal twee niveaus van geneste vervolgkeuzelijsten. Als je problemen ondervindt met vervolgkeuzelijsten, controleer dan of je thema het aantal geneste niveaus ondersteunt dat je probeert te implementeren. Sommige thema's vereisen mogelijk extra aanpassing om meerdere nestniveaus te ondersteunen.

Best practices voor vervolgkeuzelijsten

Bekijk de volgende best practices om een nuttige menustructuur aan te maken die op alle apparaten goed werkt:

  • Gebruik beschrijvende labels, zoals ‘Winkelen op categorie’, voor menuopties op het hoogste niveau met #-links.
  • Zorg ervoor dat menu's zijn geoptimaliseerd voor mobiele apparaten. Je kunt menu's op mobiele apparaten testen om te bevestigen dat vervolgkeuzelijsten zoals verwacht uitklappen.
  • Voeg zeven of minder menuopties op het hoogste niveau toe om te voorkomen dat het menu te vol wordt.
  • Gebruik duidelijke en beschrijvende linktitels. Bijvoorbeeld ‘Collecties’ en ‘Zomerjurken’.
  • Elk menu kan maximaal 10.000 items bevatten en je winkel kan in totaal maximaal 1.000 menu's hebben. Elke menuoptie met subitems in een vervolgkeuzelijst telt als een afzonderlijk menu mee voor deze limiet.

Toegankelijkheid van vervolgkeuzelijst

De meeste thema's implementeren kopteksten van vervolgkeuzelijsten als knoppen in plaats van als klikbare links. Dit is een opzettelijk ontwerp voor toegankelijkheid dat klanten die ondersteunende technologie gebruiken, helpt de navigatiestructuur te begrijpen.

Wanneer een menuoptie op het hoogste niveau een submenu in een vervolgkeuzelijst bestuurt, functioneert deze als een knop om het menu uit te klappen in plaats van als een link naar een nieuwe pagina. Deze aanpak zorgt ervoor dat klanten die schermlezers of andere ondersteunende apparaten gebruiken, correct door het menusysteem van je winkel kunnen navigeren.

Als je wilt dat klanten toegang hebben tot een hoofdcategoriepagina (zoals ‘Alle producten’ of ‘Alle collecties’), voeg deze dan toe als het eerste item in de vervolgkeuzelijst zelf in plaats van de koptekst klikbaar te maken.

Probleemoplossing voor veelvoorkomende problemen

Bekijk de volgende oplossingen voor veelvoorkomende problemen die je kunt tegenkomen bij het instellen van navigatiemenu's:

  • Omleidingen van mobiel menu: als een menulink op het hoogste niveau je omleidt naar een nieuwe pagina wanneer je erop tikt, controleer dan het menu in je Shopify-beheercentrum om te bevestigen dat het linkveld van het menu # is.

  • Zichtbaarheidsproblemen: als geneste items niet worden weergegeven, zorg er dan voor dat ze volledig onder het koptekstitem zijn gesleept en zijn ingesprongen in de interface Menu's. Controleer of je thema het aantal geneste niveaus ondersteunt dat je hebt ingesteld.

  • Themacompatibiliteit: als je problemen ondervindt met vervolgkeuzelijsten, controleer dan of je thema het aantal geneste niveaus ondersteunt dat je probeert te implementeren. Sommige thema's vereisen mogelijk extra aanpassing om meerdere nestniveaus te ondersteunen.

  • Aanmaak van genest menu geblokkeerd: als je de foutmelding ‘Menu cannot contain nested menus. Opt in the nested navigation feature to use this’ tegenkomt, moet mogelijk de functie voor geneste navigatie in je winkel worden geactiveerd. Dit is meestal van invloed op winkels die vóór 2018 zijn aangemaakt. Neem contact op met Shopify Support als je deze fout tegenkomt.

  • Verkeerd menu weergegeven: als je meerdere navigatielinks hebt die naar dezelfde pagina verwijzen (zoals je homepage), dan geeft je thema mogelijk het verkeerde submenu weer. Zorg ervoor dat elke navigatiesectie naar een unieke pagina linkt om verwarring te voorkomen.

  • Menuopties verdwijnen: als menulinks verdwijnen zonder te worden verwijderd, controleer dan of je de producten, collecties of pagina's hebt verwijderd waarnaar de menuopties linken. Het verwijderen van de gelinkte bron verwijdert ook de menuoptie.

Themacode aanpassen voor vervolgkeuzelijsten

Voor thema's die een verregaandere aanpassing vereisen, kun je overwegen je themacode aan te passen.