Met de Categorie-overzicht widget kun je categorieën uit je webshop overzichtelijk tonen. Dit is bijvoorbeeld handig om op de homepage of een landingspagina een selectie categorieën of subcategorieën uit te lichten, of om een eigen samengestelde lijst met categorieën te presenteren.


Beschikbare opties

Content

  • Categorieën op homepage: toont de categorieën die je in de catalogus hebt ingesteld als homepage-categorieën.
  • Subcategorieën van gekozen categorie: toont de subcategorieën van één specifieke hoofdcategorie. Dit is handig wanneer je 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, onafhankelijk van de categorie-structuur in de backoffice.


Afbeeldingen weergeven

Bepaal of je de categorie-afbeeldingen wilt tonen. Standaard staat deze optie aan. Als je dit uitschakelt, worden alleen de categorietitels en eventuele knoppen weergegeven.


Layout weergave

  • Grid: categorieën worden weergegeven in rijen en kolommen.
  • Slider: categorieën verschijnen naast elkaar en kunnen worden doorgebladerd met pijlen of paginatie.


Layoutinstellingen bij Grid

Wanneer je voor de optie Grid kiest, kun je instellen hoeveel categorieën naast elkaar getoond worden per apparaat. Op desktop kun je bijvoorbeeld vier categorieën naast elkaar tonen, op tablet drie en op mobiel twee.


Layoutinstellingen bij Slider

  • Aantal slides: stel in hoeveel categorieën zichtbaar zijn per apparaat.
  • Slider navigatie: kies of en waar je navigatie wilt tonen. Je kunt ervoor kiezen om geen navigatie weer te geven, om deze boven de slider naast de titel te tonen of in het midden van de slider.
  • Slider paginatie: toon stipjes onder de slider waarmee bezoekers door de slides kunnen bladeren.
  • Geavanceerde opties:
    • Loop: de slider blijft automatisch doorlopen zonder te stoppen.
    • Autoplay: de slider verschuift automatisch naar de volgende categorie, alleen op apparaten zonder touchbediening.
    • Autoplay snelheid: bepaal na hoeveel milliseconden de volgende slide verschijnt. Bijvoorbeeld 3000ms betekent drie seconden.


Titel (optioneel)

Voeg een titel toe boven het categorie-overzicht, zoals "Ons assortiment" of "Populaire categorieën". Dit maakt voor bezoekers direct duidelijk waar de sectie over gaat.


Titel instellingen

  • Semantische tag: kies of de titel een paragraaf (p) of heading (h1–h6) is. Dit is belangrijk voor de structuur en vindbaarheid van de pagina.
  • Stijl (class): kies de visuele opmaak van de tekst. Je kunt kiezen uit body text, heading of display heading.


Alinea (optioneel)

Plaats een korte toelichtende tekst onder de titel, bijvoorbeeld een uitleg of call-to-action.


Tekst uitlijning

Bepaal de uitlijning van de titel en de alineatekst. Je kunt kiezen voor links of gecentreerd.


Knoppen

  • Knop toevoegen: voeg één of twee knoppen onder het categorie-overzicht toe.
  • Type: kies een buttonstijl uit de beschikbare presets, zoals primair, secundair of info.
  • Tekst: bepaal welke tekst op de knop staat.
  • URL: geef de link op waarnaar de knop verwijst.
  • Nieuw tabblad: laat de link openen in een nieuw browservenster indien gewenst.
  • Icoon: voeg een icoon naast de knoptekst toe, bijvoorbeeld Arrow right, Arrow left, Envelop of Phone.
  • Tweede knop: voeg indien gewenst een tweede knop toe met dezelfde instelmogelijkheden.


Button breedte

  • Desktop: kies uit normaal, ruimte opvullen of volledige breedte. Bij volledige breedte worden de knoppen onder elkaar geplaatst.
  • Mobiel: dezelfde opties zijn beschikbaar, geoptimaliseerd voor kleinere schermen.


Uitlijning van knoppen

Bepaal de positie van de knoppen op desktop en mobiel. Je kunt ze links, in het midden, rechts of verdeeld over de volledige breedte plaatsen.


CSS classes

Voeg eigen CSS classes toe voor maatwerk styling. Dit kan via Website uiterlijk > CSS aanpassen in de backoffice.