Met de Product-overzicht widget kun je eenvoudig producten uit je webshop tonen in een overzicht. Dit is ideaal om op je homepage, landingspagina’s of categoriepagina’s specifieke producten uit te lichten, zoals bestsellers, nieuwe items of een eigen samengestelde selectie.


Beschikbare opties en toelichting:

  • Content:
    Bepaal welke producten je wilt weergeven in de widget. Je hebt de volgende mogelijkheden:
    • Homepage artikelen: Toont de artikelen die in de catalogus gemarkeerd zijn voor de homepagina.
    • Best verkochte artikelen: Laat automatisch de producten zien die het meest verkocht worden. Handig om je populaire producten te benadrukken.
    • Nieuwe artikelen: Toont de meest recent toegevoegde artikelen in je webshop.
    • Artikelen van gekozen categorie tonen: Selecteer een categorie en toon de producten die daarin vallen.
    • Zelf kiezen: Stel handmatig een lijst van artikelen samen die je wilt tonen.
  • Aantal artikelen om weer te geven:

    Geef aan hoeveel producten je in de widget wilt tonen.

    • Zelfde aantal als elders: De widget volgt de standaard instellingen van je webshop.

    • Zelf kiezen: Stel zelf het aantal artikelen in dat zichtbaar moet zijn.

  • Sorteervolgorde:
    Bepaal in welke volgorde de producten getoond worden:

    • Alfabetisch: Artikelen worden op naam gesorteerd van A tot Z.

    • Nieuwste artikelen eerst: De meest recent toegevoegde artikelen komen bovenaan.

    • Populairste artikelen eerst: Artikelen worden gesorteerd op basis van populariteit (verkoop).

    • Ingestelde sorteervolgorde: De widget gebruikt de standaard sorteerinstelling van je webshop (te beheren via Configuratie > Algemeen > Sorteren & paginatie > Instellingen > Standaard sorteer methode).

  • Layout weergave:
    Kies de manier waarop het product-overzicht getoond wordt:
    • Grid: artikelen worden gestructureerd weergegeven in rijen en kolommen.
    • Slider: artikelen verschijnen naast elkaar met schuifmogelijkheden (pijlen of paginatie).


Layoutinstellingen bij Grid-weergave

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

  • Desktop: bijvoorbeeld 4 artikelen naast elkaar
  • Tablet: bijvoorbeeld 3 artikelen
  • Mobiel: bijvoorbeeld 2 artikelen

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 product-overzicht wordt getoond, zoals "Populaire producten" of "Meest verkocht". 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 product-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.