Vervolgkeuzelijsten in je webshop instellen

Je kunt vervolgkeuzelijsten gebruiken om producten, collecties of pagina's te groeperen en het voor klanten gemakkelijker te maken om in je webshop te navigeren. Als je bijvoorbeeld veel producten hebt, is het handig deze aan collecties toe te voegen en vervolgens deze collecties te ordenen met een vervolgkeuzelijst in het hoofdmenu. Hierdoor kunnen klanten sneller het type product vinden waarnaar ze op zoek zijn.

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

Opmerking

Voettekstmenu's kunnen alleen opties op het hoogste niveau weergeven. Je kunt geen vervolgkeuzelijsten gebruiken in de voettekst van je webshop.

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

Opmerking

In de meeste gevallen moet je een item aanmaken voordat je ernaar kunt linken. Je moet bijvoorbeeld een collectie aanmaken voordat je deze aan een menu kunt toevoegen.

Menuopties nesten om vervolgkeuzelijsten te maken

Je kunt vervolgkeuzelijsten samenstellen door menuopties zo aan te maken of te verplaatsen, dat ze genest zijn onder een item op het hoogste niveau. Het item op het hoogste niveau wordt weergegeven in het hoofdmenu van je webshop, en de geneste menuopties staan in een vervolgkeuzelijst. Het item op het hoogste niveau kan maximaal twee niveaus van geneste vervolgkeuzelijsten bevatten.

Bij alle thema's worden geneste artikelen als vervolgkeuzelijsten in het hoofdmenu weergegeven en bij sommige thema's worden geneste artikelen als vervolgkeuzelijsten op andere locaties weergegeven.

Het hoofdmenu en de vervolgkeuzelijsten worden op verschillende locaties in je webshop weergegeven, afhankelijk van je thema. Sommige Thema's tonen een Icon naast de naam van een menu in het menu , zodat Klanten kunnen herkennen dat er een menu aanwezig is.

Opmerking

Zorg dat je je thema bijwerkt zodat het alle drie de menuniveaus in je webshop weergeeft.

Een vervolgkeuzelijst aan het hoofdmenu toevoegen

Je kunt voor elke menuoptie in het hoofdmenu een vervolgkeuzelijst toevoegen.

Stappen:

Desktop

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

2. Klik op de naam van je hoofdmenu.

3. Kies een van de opties van het hoofdmenu als koptekst voor de vervolgkeuzelijst of voeg een nieuwe menuoptie toe. Als je niet wil dat de koptekst naar iets linkt, kun je vervolgens # invoeren in het veld Een link zoeken of plakken van de menuoptie van de koptekst.

4. Voer de volgende taken uit om eeen menuoptie aan de vervolgkeuzelijst toe te voegen:

   1. Klik op Menuoptie toevoegen.
   2. Voer in het veld Naam een naam voor de menuoptie in.
   3. Typ of selecteer in het veld Een link zoeken of plakken een bestemming voor de menuoptie.

5. Klik op Toevoegen en klik vervolgens op en sleep de menuoptie om deze te nesten onder de menuoptie van de koptekst.

6. Klik op Menu opslaan.

iPhone

1. Tik in de Shopify-app op de knop .

2. Tik op Content > Menu's.

3. Tik op de naam van het hoofdmenu.

4. Kies een van de opties van het hoofdmenu als koptekst voor de vervolgkeuzelijst of voeg een nieuwe menuoptie toe als koptekst. Als je niet wil dat de koptekst naar iets linkt, kun je # invoeren in het veld Een link zoeken of plakken van de menuoptie van de koptekst.

5. Voer de volgende taken uit om eeen menuoptie aan de vervolgkeuzelijst toe te voegen:

   1. Tik op Menuoptie toevoegen.
   2. Voer in het veld Naam een naam voor de menuoptie in.
   3. Typ of selecteer in het veld Een link zoeken of plakken een bestemming voor de menuoptie.

6. Tik op Toevoegen en tik vervolgens op en sleep de menuoptie om deze onder de menuoptie van de koptekst te nesten.

7. Tik op Opslaan.

Android

1. Tik in de Shopify-app op de knop .

2. Tik op Content > Menu's.

3. Tik op de naam van het hoofdmenu.

4. Kies een van de opties van het hoofdmenu als koptekst voor de vervolgkeuzelijst of voeg een nieuwe menuoptie toe als koptekst. Als je niet wil dat de koptekst naar iets linkt, kun je # invoeren in het veld Een link zoeken of plakken van de menuoptie van de koptekst.

5. Voer de volgende taken uit om eeen menuoptie aan de vervolgkeuzelijst toe te voegen:

   1. Tik op Menuoptie toevoegen.
   2. Voer in het veld Naam een naam voor de menuoptie in.
   3. Typ of selecteer in het veld Een link zoeken of plakken een bestemming voor de menuoptie.

6. Tik op Toevoegen en tik vervolgens op en sleep de menuoptie om deze onder de menuoptie van de koptekst te nesten.

7. Tik op ✓.

Opmerking

Je kunt het standaard hoofdmenu voor de meeste thema's wijzigen door de instellingen in het gedeelte Koptekst van het thema te bewerken.

Integratie van het voettekstmenu

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

Stappen:

1. Ga vanuit het Shopify-beheercentrum naar Content > Menu's.
2. Optioneel: Volg dezelfde nestprincipes die worden gebruikt voor hoofdmenu's, zoals het slepen van menuoptie onder een koptekstitem om een vervolgkeuzelijststructuur te maken door te klikken op en sleep de items naar hun plaats.
3. Voer # in het veld Link in voor kopteksten die niet naar een pagina moeten linken (bijvoorbeeld de kopteksten 'Ondersteuning' of 'Verkennen').

Overwegingen voor themacompatibiliteit

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

• De meeste thema's ondersteunen tot twee niveaus van geneste vervolgkeuzelijsten. Controleer de documentatie van je thema of test geneste items om compatibiliteit te bevestigen.
• Voor sommige thema's kunnen CSS-aanpassingen nodig zijn om de mobiele bruikbaarheid 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 voor geneste vervolgkeuzelijsten dat je wilt implementeren ondersteunt, kun je de volgende bronnen gebruiken:

1. Raadpleeg de documentatie van je thema: Raadpleeg de documentatie van het thema voor specifieke informatie over menumogelijkheden en ondersteunde nestniveaus.

2. Test de geneste items: Maak een testmenustructuur met het gewenste aantal geneste niveaus en controleer of deze correct wordt weergegeven op zowel desktop- als mobiele apparaten.

De meeste thema's ondersteunen tot 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 aanpassingen om meerdere niveaus van nesting te ondersteunen.

Best practices voor vervolgkeuzelijsten

Bekijk de volgende best practices om een bruikbare menustructuur te maken die goed werkt op alle apparaten.

• Gebruik beschrijvende labels, zoals 'Winkelen per categorie', voor menu-items op het hoogste niveau met # links.

• Zorg ervoor dat menu's geoptimaliseerd zijn voor mobiele apparaten. Je kunt menu's testen op mobiele apparaten om te bevestigen dat vervolgkeuzelijsten naar verwachting uitvouwen.

• Voeg zeven of minder menu-items op het hoogste niveau toe om overbelasting te voorkomen.

• Gebruik transparante en beschrijvende linktitels. Bijvoorbeeld ‘Collecties’ en ‘Zomerjurken’.

Veelvoorkomende problemen oplossen

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

• Mobiele menu omleidingen: Als een top-level menu link doorverwijst naar een nieuwe pagina wanneer je erop tikt, controleer dan het menu in je Shopify-beheercentrum om te bevestigen dat het menu link veld # is.

• Problemen met zichtbaarheid: Als geneste items niet worden weergegeven, zorg er dan voor dat ze volledig onder het koptekst-item worden gesleept en inspringen in de weergave 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 aanpassingen om meerdere nestniveaus te ondersteunen.

Aanpassen van themacode voor vervolgkeuzelijsten

Voor thema's die meer aanpassingen vereisen, kun je overwegen om de code van je thema aan te passen.

Let op

Pas de code van je thema alleen aan als je goed overweg kunt met Liquid, HTML, CSS en JavaScript. Verkeerde wijzigingen kunnen de functionaliteit van je winkel verstoren.