Navigatie

Hoe groter je website wordt, hoe lastiger het is voor de klant om alles te vinden. Een goede navigatie door de site is een key factor voor succes!

De navigatie op je site bestaat uit verschillende elementen:

• Menu’s: Alle menu’s zijn te vinden in het CMS > Layout
  • Het sidebar menu (linkerwidget, linkermenu): links van je website
  • Het headermenu (header-widget): de balk bovenaan je website met verschillende kopjes
  • Het mobiele hamburgermenu (mobielemenu): de drie streepjes op mobiel. De meeste van je bezoekers zitten op mobiel. Je navigatie op mobiel is daarom het allerbelangrijkste.
  • De footer: onderaan op je website
• Andere navigatie:
  • De zoekbalk
  • De filters op de pagina
  • Blokken en buttons die je zelf maakt en plaatst en laat linken naar verschillende pagina’s

1. Sidebar menu

In de shop staat aan de linkerzijde een navigatiemenu, het sidebar menu (ook bekend als linkerwidget, linkermenu en sidewidget). Je kunt dit zelf inrichten aan de hand van ‘widgets’, daarom is een sidebar menu ook wel een ‘widget group’. Je kunt op verschillende pagina’s verschillende sidebar menu’s plaatsen. Naar video uitleg.

Via het CMS > Layout > Widgets, kun je hier zelf mee aan de slag gaan.

1.1 Standaard widget groep

Hieronder zie je de widget groups ‘producten-menu’, ‘info-menu’ en ‘geboortekaarten’. ‘Info-menu’ is groen weergegeven, dit betekent dat dit het standaard sidebar menu is. Alle pagina’s die je aanmaakt, zullen automatisch deze widget groep als sidebar menu meekrijgen, tenzij jij dit op de pagina verandert. Je kunt een ander standaardmenu kiezen door op het sterretje van je gewenste menu te klikken. Je ziet dan dat deze groen wordt.

1.2 Linkermenu/widgetgroep aanmaken

Om een widgetgroep aan te maken vul je de naam in (met kleine letters en aan elkaar) en kies je het type. Voor nu kies je voor ‘Sidebar group’.

Nadat je op ‘opslaan’ hebt geklikt, verschijnt je widgetgroep in het overzicht. Door op het potloodje te klikken kan je de widgetgroep verder invullen.

De widgetgroep kan bestaan uit een menu widget, filter widget of een html widget. Door op het plusje te klikken voeg je deze toe. Je kunt ze van volgorde veranderen door ze meer naar boven of meer naar beneden te slepen.

Html/tekst widget	Is vaak niet noodzakelijk. Dit is het stukje in de widgetgroep dat je helemaal zelf kan maken zoals je wilt. Denk bijvoorbeeld aan een banner met een kortingscode. Je hebt html-kennis nodig om dit op te bouwen.
Filter widget	Dit deel zorgt dat er filters op de pagina getoond kunnen worden. Welke filters dat zijn, stel je in op de betreffende pagina. Afhankelijk van jouw instellingen worden de filters in het linkermenu getoond of boven je kaarten.
Menu widget	Dit is het belangrijkste widget. Dit is het deel waar de links naar andere pagina’s komen te staan. Je kunt hier menu-items in zetten.

1.3 Menu widget invullen

Het vullen van het menuwidget gaat heel makkelijk. In de afbeelding zie je nog wat extra uitleg. De menu widget bestaat uit:

• Een categorie
• Menu-items
• Sub-items

Door op het vierkantje te klikken kun je de verschillende items verslepen of onder een andere plaatsen.

Voor je de menu widget opslaat vind je een paar opties die je aan kunt vinken:

Align menu right	Voor als je het menu rechts uitgelijnd wilt hebben.
Dropdown menu full width	Hoef je niet te gebruiken.
Menu is inklapbaar	De klant kan op je site het menu inklappen door erop te klikken.
Menu is ingeklapt	Het menu is standaard ingeklapt. De klant kan erop klikken om het uit te klappen.

Je kunt meerdere menuwidgets onder elkaar plaatsen. Bijvoorbeeld 1 voor je aankondigingsproducten en 1 voor de meest bezochte pagina’s.

1.4 Sidebar menu aan pagina koppelen

Om een specifieke widgetgroup als sidebar menu te tonen op een specifieke pagina moet je de widgetgroep koppelen aan de pagina. Dit doe je bij het blokje ‘pagina instellingen’ bij het aanmaken of bewerken van de pagina (CMS > Content > Pagina’s):

Vervolgens wordt het sidebar menu op je pagina weergegeven zoals in de afbeelding:

• Groen: Menu widget 1
• Blauw: Menu widget 2
• Roze: Html widget

Afhankelijk van hoe jouw site de filters toont, worden deze aan de sidebar menu toegevoegd of bovenaan je kaarten geplaatst.

---

2. Headermenu

Sinds 2026 maken we het headermenu vanuit de Pagebuilder en niet meer met een widget. Voor de volledigheid leggen we ook uit hoe je een headermenu aanmaakt, naar de Pagebuilder Header

---

3. Mobiele hamburgermenu

Het mobiele hamburgermenu is eigenlijk hetzelfde als een headermenu. Ook deze wordt opgebouwd vanuit de Pagebuilder, naar de Pagebuilder

---

4. Footer

De footer is het onderste gedeelte van je site die op elke pagina hetzelfde is. De links in de footer werken op dezelfde manier als in de header, naar de Pagebuilder Footer

Zo verschijnt het op de site:

---

5. De zoekbalk (zoekwoorden)

Klanten kunnen via de zoekbalk zoeken naar kaarten of pagina’s. Het is hiervoor nuttig om zoekwoorden te koppelen aan bepaalde pagina’s. Zo kun je ‘geboortekaartjes’ koppelen aan je pagina met geboortekaartjes of ‘olifant’ koppelen aan de pagina met olifanten-kaartjes.

Je kunt de zoekwoorden instellen via CMS > Content > Search terms. Vul een woord in waarop klanten zoeken en vul de pagina, link of URL (website) in waarnaar verwezen moet worden.

• Link interne pagina: vul de url vanaf de eerste slash in.
• Link externe pagina (bijvoorbeeld naar PostNL): vul de hele url in.

---

6. Filters

Filters op pagina’s kun je instellen bij de instellingen van je pagina. Zet de tags die je als filters wilt gebruiken op ‘menu’. Naar filters uitleg.

---

7. Blokken en buttons

Je hebt met Sparkles besproken hoe je je site eruit wilt laten zien. Hierbij zitten ook standaar blokken en buttons op bijvoorbeeld de homepage. De vorme en kleuren kun je bepalen in het ShopThema, naar ShopThema

7.1 Styleguide

Wanneer je site groeit, kan het zijn dat je op andere pagina’s ook blokken of buttons toe wilt voegen en wanneer je even onderweg bent, wil je misschien teksten of afbeeldingen van blokken en buttons wijzigen. Daarom maakt Sparkles voor jou een Styleguide aan. Deze kun je vinden via /styleguide.

In de styleguide vind je van alles wat met de styling van jouw site te maken heeft. Dit kun je gebruiken om je pagina’s op te bouwen.

7.2 HTML blokken en buttons

In de styleguide vind je ook de code die je nodig hebt voor blokken en buttons. Je ziet steeds een voorbeeld en daaronder staat de html hiervan. Deze kun je kopiëren en op je pagina plaatsen en daar aanpassen.

---

Ook interessant