Met de Categorie-overzicht widget kun je categorieën uit je webshop op een overzichtelijke manier tonen. Dit kan handig zijn om op de homepage of een landingspagina een selectie categorieën of subcategorieën uit te lichten, of om een eigen samengestelde lijst van categorieën te presenteren.


Beschikbare opties en toelichting:

  • Content:
    Kies welke categorieën je wilt weergeven in de widget. Je hebt drie opties:

    • Categorieën op homepage: Toont de categorieën die je hebt ingesteld als homepage-categorieën in je webshop. Dit is in te stellen in de catalogus.

    • Subcategorieën van gekozen categorie: Laat de subcategorieën van één specifieke (hoofd)categorie zien. Dit is handig als je bijvoorbeeld een overzichtspagina hebt voor een productgroep en daar direct de onderliggende categorieën zichtbaar wilt maken.

    • Eigen lijst: Maak een handmatige selectie van categorieën die je wilt tonen, ongeacht de structuur van je categorieën in de backoffice.

  • Afbeeldingen weergeven:
    Bepaal of je de categorie-afbeeldingen wilt tonen. Standaard staat deze optie aan. Wanneer je dit uitschakelt, worden alleen de categorietitels (en eventuele knoppen) weergegeven.
  • Layout weergave:
    Kies de manier waarop het categorie-overzicht getoond wordt:
    • Grid: categorieën worden gestructureerd weergegeven in rijen en kolommen.
    • Slider: categorieën verschijnen naast elkaar met schuifmogelijkheden (pijlen of paginatie).


Layoutinstellingen bij Grid-weergave

Wanneer je Grid kiest, kun je instellen hoeveel categorieën naast elkaar getoond worden op verschillende apparaten:

  • Desktop: bijvoorbeeld 4 categorieën naast elkaar
  • Tablet: bijvoorbeeld 3 categorieën
  • Mobiel: bijvoorbeeld 2 categorieën

Zo houd je de weergave optimaal per schermgrootte.


Layoutinstellingen bij Slider-weergave

Bij de optie Slider krijg je extra instellingen voor interactie:

  • Aantal slides naast elkaar (desktop, tablet, mobiel): bepaal hoeveel kaarten zichtbaar zijn binnen de slider per apparaat.
  • Slider navigatie: Kies waar (of of) je navigatie wilt tonen:
    • Geen navigatie weergeven
    • Boven de slider, naast de titel
    • In het midden van de slider
  • Slider paginatie: toon stipjes onder de slider om door slides te bladeren.
  • Geavanceerde slider opties:
    • Slider loop: de slider blijft oneindig doorlopen.
    • Slider autoplay: laat de slides automatisch verschuiven (alleen voor niet-touch apparaten).
    • Autoplay snelheid: stel in na hoeveel milliseconden de volgende slide verschijnt (bijv. 3000ms = 3 seconden).
  • Titel (optioneel):
    Voeg hier een titel toe die boven het categorie-overzicht wordt getoond, zoals "Ons assortiment" of "Populaire categorieën". De titel maakt het voor bezoekers direct duidelijk waar de sectie over gaat.
  • 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 of gecentreerd.
  • Knop toevoegen:
    Je kunt ervoor kiezen om één of twee knoppen onderaan het categorie-overzicht 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 tekst
    Vul hier de tekst in die op de knop moet staan.
  • Button URL
    Voer hier de link in waarnaar de knop moet verwijzen.
  • Button Link openen in nieuw tabblad
    Met deze switch geef je aan of de link in een nieuw browservenster moet openen.
  • Button met icon
    Wil je een icoon naast je knoptekst tonen? Zet deze optie aan en kies vervolgens het gewenste icoon:
    • Arrow right
    • Arrow left
    • Envelop
    • Phone
  • Tweede button toevoegen
    Wil je nog een extra knop toevoegen? Dat kan. Deze tweede knop krijgt dezelfde instelmogelijkheden als hierboven beschreven.


  • Button breedte
    • Desktop: Kies uit:
      • Normaal
      • Ruimte opvullen (neemt beschikbare ruimte tussen knoppen in)
      • Gehele breedte innemen (knoppen worden onder elkaar geplaatst)
    • Mobiel: Zelfde opties, geoptimaliseerd voor kleinere schermen.
  • Uitlijning van de button(s)
    • Desktop & mobiel: Kies hoe de knoppen worden gepositioneerd binnen de kaart:
      • Links
      • Midden
      • Rechts
      • Links en rechts (verdeeld over de volledige breedte)
  • 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.