Met de Selectiemenu widget maak je het zoekproces eenvoudiger voor je klanten, vooral bij grote catalogi. Je kunt selectievelden toevoegen waarmee bezoekers snel naar een categorie of product kunnen navigeren. Er kan tot maximaal 4 lagen diep gezocht worden binnen de catalogus.


Wanneer je de widget plaatst op een categorie-overzichtspagina, wordt automatisch die categorie als startpunt gebruikt. Op deze manier kun je bezoekers toch de mogelijkheid bieden dieper door te zoeken in de categorie-structuur, ook voorbij de 4 lagen die standaard in de widget beschikbaar zijn.


Beschikbare opties en toelichting:

  • Titel:
    Voeg een titel toe die boven de tekst en knoppen op de kaart verschijnt. Dit kan een korte wervende kop zijn, zoals “Populaire producten” of “Nieuwe collectie”.
  • Titel settings:
    Onder deze optie pas je de stijl en structuur van de titel aan:
    • Semantische tag instellen: Kies of de tekst een gewone paragraaf is (p) of een titel (h1 t/m h6). Dit is belangrijk voor de structuur en vindbaarheid van je pagina.
    • Stijl (class): Bepaal de visuele opmaak van de tekst. Je kunt kiezen uit verschillende stijlen zoals:
      • Body text (van XS tot XL) — voor gewone tekstgrootten
      • Heading (1 t/m 6) — standaard kopteksten
      • Display heading (1 t/m 6) — grotere, opvallendere koppen

  • Alinea (optioneel):

    Hier kun je een korte toelichtende tekst onder de titel plaatsen. Bijvoorbeeld een uitleg of call-to-action. Dit veld is optioneel.
  • Tekst uitlijning:
    Bepaal de uitlijning van zowel de titel als de alineatekst: links, gecentreerd of rechts.
  • Thema:
    Kies hier het kleurthema voor het selectiemenu. Dit bepaalt onder andere de achtergrondkleur en stijl. De opties zijn gebaseerd op de kleurinstellingen van je webshop onder Website uiterlijk > Algemeen.
  • Card volledige hoogte in laten nemen:
    Met deze optie kun je de card automatisch de volledige beschikbare hoogte in de rij laten innemen. Dit is handig als je meerdere widgets naast elkaar wilt plaatsen en ze allemaal dezelfde hoogte wilt geven. Houd er echter rekening mee dat dit kan leiden tot meer witruimte in de card om de ruimte te vullen.
  • Ruimte reserveren voor formulier:
    Met deze optie kun je binnen de kaart alvast ruimte reserveren voor het selectiemenu. Wanneer je dit activeert, kun je zelf instellen hoeveel ruimte er gereserveerd moet worden. Dit is handig om te zorgen dat de lay-out van de pagina niet verspringt of verschuift tijdens het laden van de widget, of om een consistent design te behouden wanneer meerdere widgets naast elkaar staan.
  • Mogelijkheid om ook op producten te zoeken:
    Standaard kun je via het selectiemenu door categorieën navigeren. Met deze optie kun je uitbreiden zodat klanten ook direct op producten kunnen zoeken. Dit maakt het selectiemenu veelzijdiger en extra krachtig bij grotere catalogi, waar klanten vaak gericht naar een specifiek product zoeken.
  • Knop toevoegen:
    Je kunt ervoor kiezen om één of twee knoppen aan de kaart toe te voegen. Als je een knop activeert, krijg je toegang tot de volgende instellingen:
  • Button type
    Kies een buttonstijl uit de beschikbare button presets (zoals primair, secundair, info, enz.). Deze zijn afgestemd op je website-ontwerp.
  • Button volledige breedte weergeven
    Kies of je de button over de volledige breedte van de kaart wilt weergeven voor zowel desktop als mobiel. 
  • Uitlijning van de button(s)
    • Desktop & mobiel: Kies hoe de knop wordt gepositioneerd binnen de kaart:
      • Links
      • Midden
      • Rechts
  • Button tekst
    Vul hier de tekst in die op de knop moet staan, bijvoorbeeld “Zoeken”. Wanneer je hier geen tekst invoert, wordt in de knop standaard de tekst “Search” weergegeven.
  • Button met icon
    Wil je een icoon naast je knoptekst tonen? Zet deze optie aan en kies vervolgens het gewenste icoon:
    • Arrow right
    • Magnifying Glass
  • CSS classes:
    Met deze optie kun je specifieke CSS classes aan de afbeelding toevoegen voor maatwerk styling. Dit geeft je de mogelijkheid om aangepaste stijlen toe te passen via "Website uiterlijk > CSS aanpassen" in de backoffice, waardoor je de afbeelding verder kunt aanpassen aan je ontwerpbehoeften.