E-commerce (Webshop)

De E-commerce widget voegt een volledige webshop toe aan je website. Bezoekers kunnen producten bekijken, toevoegen aan een winkelwagen en afrekenen via Stripe Checkout. De widget wordt geactiveerd per website via Instellingen → Widgets → E-commerce. Na activatie verschijnen de admin-pagina's in het zijmenu en worden de webshop-blokken beschikbaar in de Page Builder.

Via E-commerce → Producten beheer je je productcatalogus: • Titel, beschrijving en prijs • Afbeeldingen uploaden via de mediabibliotheek • Categorie toewijzen • Voorraad (stock) instellen • Product actief/inactief zetten Producten met voorraad 0 worden automatisch als "Uitverkocht" getoond op de website.

Producten kunnen varianten hebben, zoals maat of kleur. Elke variant heeft een eigen prijs, voorraad en optioneel SKU. Varianten instellen: 1. Open een product in E-commerce → Producten 2. Definieer variant-attributen (bijv. "Maat", "Kleur") 3. Voer de waarden in (bijv. S, M, L / Rood, Blauw) 4. De matrix-generator maakt automatisch alle combinaties 5. Stel per variant de prijs en voorraad in Op de website kiest de bezoeker een variant via dropdowns of kleur-swatches. Prijs en voorraad updaten automatisch.

Via E-commerce → Categorieën organiseer je producten in groepen: • Naam en slug (URL-vriendelijke naam) • Volgorde aanpassen via drag & drop Categorieën worden gebruikt in het ProductList-blok als filter en in het zoek/filter-paneel op de website.

Het ProductList-blok toont producten in een configureerbaar grid of lijst. Zo voeg je het toe: 1. Open een pagina in de Page Builder 2. Zoek "ProductListSection" in de blokkenlijst 3. Sleep het naar je pagina 4. Configureer in de sidebar: • Heading • Aantal kolommen (1-4) • Maximum producten • Categorie-filter • Prijs en afbeelding tonen • Zoek & filter tonen • Quick View aan/uit Op de website zien bezoekers producten met afbeelding, prijs, voorraad-badges en een "Toevoegen aan winkelwagen"-knop.

Het ProductDetail-blok toont een volledige productpagina met gallerij, prijs, beschrijving en "Toevoegen aan winkelwagen". Zo gebruik je het: 1. Maak een pagina aan (bijv. slug "product-detail") 2. Voeg het ProductDetailSection-blok toe 3. Configureer layout (gallerij links/boven) en gerelateerde producten Het blok leest het product-ID uit de URL (?product=xxx). Links in het ProductList-blok wijzen automatisch naar deze pagina.

De winkelwagen is een schuifpaneel (drawer) dat opent wanneer een bezoeker een product toevoegt. Functies: • Producten toevoegen, verwijderen, hoeveelheid aanpassen • Subtotaal automatisch berekend • Checkout-knop die naar Stripe leidt • Voorraadcontrole: meer dan de beschikbare stock toevoegen is niet mogelijk De winkelwagen wordt opgeslagen in de browser (localStorage) en overleeft een pagina-refresh.

Bij het afrekenen wordt de bezoeker doorgestuurd naar Stripe Checkout: 1. Bezoeker klikt "Afrekenen" in de winkelwagen 2. Server valideert prijzen en voorraad (fraude-preventie) 3. Stripe Checkout opent met de juiste artikelen en verzendopties 4. Na betaling: order wordt aangemaakt, voorraad bijgewerkt, bevestigingsemail verstuurd 5. Bezoeker ziet een bevestigingspagina met ordersamenvatting Prijzen worden altijd server-side gevalideerd. De client stuurt nooit bedragen naar Stripe.

Na een succesvolle betaling wordt de bezoeker teruggeleid naar je website. Het blok "Order Bevestiging" (OrderConfirmationSection) toont automatisch een bedankpagina met ordersamenvatting. Belangrijk: plaats dit blok op DEZELFDE pagina als je ProductList (shop-pagina). Het blok is normaal onzichtbaar en verschijnt pas wanneer de bezoeker terugkomt van Stripe met de juiste parameters in de URL. Zo stel je het in: 1. Open je shop-pagina in de Page Builder 2. Voeg het blok "Order Bevestiging" toe ONDER je ProductList-blok 3. Configureer: heading, accentkleur, bestelregels tonen (ja/nee) 4. Publiceer de pagina Na betaling ziet de bezoeker: • Bevestigingsicoon en bedanktekst • Ordernummer • Bestelde producten met prijzen • Totaalbedrag • Verzendadres (indien van toepassing) • "Terug naar de winkel"-knop De winkelwagen wordt automatisch geleegd na een succesvolle bestelling.

Via E-commerce → Orders zie je alle bestellingen: • Filter op status (betaald, verzonden, geannuleerd) of datum • Per order: bestelde artikelen, totaalbedrag, klantgegevens • Verzendadres en verzendmethode (als ingesteld) • Tracking nummer en link (als carrier API actief is) • Status bijwerken Bij digitale producten staat de order direct op "Voltooid" na betaling.

Het E-commerce Dashboard geeft een overzicht van je webshop: • Omzet laatste 30 dagen • Totaal aantal orders • Meest verkochte producten • Producten met lage voorraad Dit helpt je snel te zien hoe je webshop presteert en waar actie nodig is.

Bezoekers kunnen reviews achterlaten op producten (sterren 1-5 + tekst). Reviews vereisen moderatie: 1. Ga naar E-commerce → Reviews 2. Nieuwe reviews staan op "In afwachting" 3. Goedkeuren, afwijzen of verwijderen per review Alleen goedgekeurde reviews zijn zichtbaar op de website. De gemiddelde beoordeling verschijnt op productkaarten en de detailpagina. E-mailnotificaties: • De klant ontvangt automatisch een bevestigingsmail na het indienen (met product afbeelding en samenvatting) • De winkeleigenaar ontvangt een melding bij elke nieuwe review (met directe link naar moderatie) • De toggle "E-mailnotificatie bij nieuwe reviews" op de Reviews-pagina schakelt de eigenaarmelding in/uit • In de sidebar verschijnt een teller met het aantal wachtende reviews

Via E-commerce → Coupons maak je kortingscodes aan: • Type: percentage of vast bedrag • Maximum gebruik: beperkt aantal keer inwisselbaar • Vervaldatum • Minimum bestelbedrag Klanten voeren de code in tijdens het afrekenproces via Stripe Checkout. De korting wordt automatisch verrekend.

Bezoekers die hun winkelwagen achterlaten kunnen automatisch een herinnerings-e-mail ontvangen. Werking: • Bezoeker vult optioneel een e-mailadres in bij de winkelwagen • Na 1 uur inactiviteit: herinnering #1 • Na 24 uur: herinnering #2 (optioneel met 10% kortingscode) • Maximaal 2 e-mails per verlaten wagen Via E-commerce → Verlaten wagens zie je een overzicht: e-mail, artikelen, waarde en status (in afwachting, herinnerd, hersteld, verlopen).

Via E-commerce → Verzending stel je verzendtarieven in per land of zone. Per zone configureer je: • Landen (bijv. Nederland, België) • Verzendmethoden (standaard, express) met prijs en levertijd • Gratis-verzenddrempel (bijv. gratis boven €50) De klant ziet de passende verzendopties bij het afrekenen via Stripe Checkout. Zonder verzendconfiguratie worden geen verzendkosten berekend.

Via E-commerce → Belasting activeer je automatische BTW-berekening via Stripe Tax: • BTW wordt automatisch berekend op basis van het land van de klant • Kies tussen BTW-inclusief of exclusief • Stel registratie-landen in (waar je BTW-plichtig bent) • Per product optioneel: Stripe tax code Het BTW-bedrag wordt opgeslagen per order voor je boekhouding.

Je kunt digitale producten verkopen (e-books, templates, bestanden). Na betaling ontvangt de klant een beveiligde downloadlink. Instellen: 1. Maak een product aan in E-commerce → Producten 2. Zet het type op "Digitaal" 3. Upload het bestand 4. Stel het download-limiet in (standaard 3 downloads per aankoop) Na betaling: • Order staat direct op "Voltooid" (geen verzending) • Bevestigingsemail bevat downloadlink(s) • Klant kan ook downloaden via ordergeschiedenis Fysieke en digitale producten kunnen in één bestelling voorkomen.

Met het Donatie-blok kunnen bezoekers een bedrag naar keuze doneren via Stripe. Zo stel je het in: 1. Voeg het DonationSection-blok toe in de Page Builder 2. Configureer: preset bedragen (€5, €10, €25, €50), minimumbedrag, heading 3. Bezoekers kiezen een bedrag of vullen een eigen bedrag in Via E-commerce → Donaties zie je alle donaties: bedrag, donateur, bericht en datum.

Bezoekers kunnen producten als favoriet markeren via een hartje-icoon. De wishlist: • Wordt opgeslagen in de browser (localStorage) • Hartje zichtbaar op productkaarten en de detailpagina • Wishlist-drawer toont alle favorieten • "Toevoegen aan winkelwagen" vanuit de wishlist Geen account vereist.

Je kunt producten in meerdere valuta's aanbieden: 1. Ga naar de producteditor → stel prijzen in per valuta (EUR, GBP, USD) 2. Stel per site de beschikbare valuta's in 3. Bezoekers kiezen hun valuta via een selector 4. Checkout rekent af in de gekozen valuta Producten zonder meerdere prijzen gebruiken het standaard prijsveld.

Productvertalingen: naam, beschrijving en SEO-velden per taal. Instellen: 1. Open een product → taal-tabs verschijnen voor elke beschikbare taal 2. Vul de vertaling in per taal 3. De klant ziet de webshop in de gekozen taal 4. Fallback: als een vertaling ontbreekt wordt de standaardtaal getoond Hetzelfde geldt voor categorieën.

Via E-commerce → Import/Export kun je producten in bulk importeren of exporteren: Import: • CSV uploaden (drag & drop) • Auto-detectie: WooCommerce, Shopify of generiek formaat • Kolom-mapping aanpasbaar • Preview: eerste 10 rijen bekijken vóór import • Dry-run: validatie zonder te schrijven • Max 500 producten per import Export: • Alle producten incl. varianten als CSV downloaden • Handig voor back-ups of migratie naar een ander platform

Bezoekers kunnen optioneel een account aanmaken op de webshop: • Inloggen met e-mail + wachtwoord • Ordergeschiedenis bekijken: datum, artikelen, totaal, status, tracking • "Opnieuw bestellen" voegt items toe aan de winkelwagen • E-mail wordt vooraf ingevuld bij checkout Bestellen zonder account blijft mogelijk.

Het systeem toont automatisch voorraad-indicatoren op de website: • Voorraad 0: "Uitverkocht" badge, bestel-knop uitgeschakeld • Voorraad 1-5 (configureerbaar): "Bijna op" badge (oranje) • Detailpagina: "Nog maar {n} op voorraad!" Admins ontvangen een e-mailmelding wanneer de voorraad onder de drempel komt (max 1 per product per 24 uur).

Na een succesvolle betaling wordt de bezoeker doorgestuurd naar een bevestigingspagina. Deze pagina toont: • Bedankbericht • Bestelde artikelen en totaal • Verzendadres en verwachte levertijd • De winkelwagen wordt automatisch geleegd Je plaatst het OrderConfirmationSection-blok op een aparte pagina in de Page Builder.

Producten worden automatisch geoptimaliseerd voor zoekmachines: • Open Graph tags voor social media (titel, afbeelding, prijs) • JSON-LD structured data (Google rich results: prijs, beschikbaarheid, reviews) • Optionele SEO-titel en -beschrijving per product Google kan producten tonen met prijs, sterren en beschikbaarheid direct in de zoekresultaten.

Het systeem verstuurt automatisch e-mails bij order-events: • Orderbevestiging — direct na betaling (artikelen, totaal, adres) • Verzendbevestiging — bij status "Verzonden" (tracking link) • Review-verzoek — 7 dagen na levering E-mails zijn voorzien van je site-naam en logo (white-label). Het review-verzoek bevat een afmeldlink.

E-commerce features zijn afhankelijk van je abonnement: • Starter (€39): geen E-commerce • Professioneel (€79): E-commerce met max 100 producten, reviews, wishlist, coupons (5), donaties • Agency (€199): alles onbeperkt + digitale producten, abandoned carts, multi-currency, meertalig, CSV import/export, carrier API, automated tax Bij het bereiken van een limiet verschijnt een upgrade-banner met een link naar je abonnement.

Elke website heeft een eigen Stripe account nodig voor betalingen. 1. Ga naar E-commerce → Betalingen en selecteer de website 2. Klik 'Stripe koppelen' en doorloop de Stripe onboarding 3. Na koppeling ontvangen gasten-betalingen rechtstreeks op het account van de website-eigenaar

Bij elke betaling via de webshop/menukaart wordt een platform fee ingehouden. De standaard fee is 5%. Dit kun je aanpassen per website. Ga naar E-commerce → Betalingen → selecteer website → pas het percentage aan.

Een website kan zowel een webshop als een menukaart hebben. Webshop-producten en menukaart-producten worden gescheiden gehouden. In de webshop verschijnen alleen webshop-producten (geen menu-items). In de menukaart verschijnen alleen menu-items. De winkelwagen is wél gedeeld: een gast kan producten van beide combineren.

Verkoop terugkerende producten of diensten via abonnementen: 1. Ga naar E-commerce → Producten → maak een nieuw product 2. Zet het type op 'Abonnement' 3. Stel de frequentie in: wekelijks, maandelijks of jaarlijks 4. Stel de prijs per periode in Via Stripe Billing wordt automatisch periodiek gefactureerd. Klanten beheren hun abonnement via hun account (pauzeren, opzeggen).

Klanten kunnen een account aanmaken voor extra gemak: • Ordergeschiedenis bekijken met status en tracking • Opnieuw bestellen met 1 klik — alle items worden aan de winkelwagen toegevoegd • Adresgegevens opslaan voor snellere checkout • Abonnementen beheren (pauzeren/opzeggen) • Facturen downloaden Een account is niet verplicht — gasten kunnen altijd als gast bestellen.

Bied automatische incasso aan als betaalmethode: 1. Activeer SEPA Direct Debit in je Stripe Dashboard 2. Ga naar E-commerce → Betalingen → activeer 'Automatische incasso' Klanten kunnen bij checkout kiezen voor automatische incasso. Het mandaat wordt via Stripe afgehandeld. Ideaal voor abonnementen en terugkerende bestellingen.

Genereer automatisch facturen voor elke bestelling: • Facturen worden automatisch aangemaakt na betaling • PDF-download beschikbaar in het admin-overzicht en het klantaccount • Factuurgegevens: factuurnummer, datum, BTW, artikelen, totaal • Maandelijkse factuuroverzichten voor zakelijke klanten Ga naar E-commerce → Facturen voor een overzicht van alle facturen.

Gebruik de ingebouwde kassa voor fysieke verkoop: 1. Ga naar E-commerce → POS Instellingen 2. Activeer POS en koppel optioneel een Stripe Terminal 3. Zoek producten, scan barcodes of blader door categorieën 4. Reken af via kaart, contant of op rekening De POS ondersteunt: • Kaartbetalingen via Stripe Terminal • Contante betalingen (handmatig registreren) • Bon printen via Web Serial API (ESC/POS printers) • Voorraad wordt real-time bijgewerkt

Op de productdetailpagina kan een zoekbalk worden getoond zodat bezoekers snel een ander product kunnen vinden zonder terug te gaan naar de productlijst. De zoekbalk: • Staat boven de breadcrumb op de detailpagina • Zoekt op producttitel en beschrijving (client-side, snel) • Toont maximaal 6 resultaten met thumbnail, titel en prijs • Bij een product in de sale wordt de doorgestreepte prijs getoond • Klik op een resultaat om direct naar dat product te navigeren In de Page Builder (ProductDetailSection) kun je de zoekbalk in- of uitschakelen via de toggle 'Zoekbalk tonen'.

Organiseer je producten per merk voor eenvoudig filteren en navigeren: • Ga naar E-commerce → Merken om merken te beheren • Per merk: naam, slug, logo en beschrijving • Koppel producten aan een merk in de producteditor • Merken verschijnen in de sidebar-filter en het mega menu Bezoekers kunnen filteren op merk via de sidebar of het mega menu.

Categorieën ondersteunen nu een parent/child structuur: • Top-level categorieën (bijv. Heren, Dames, Schoenen) • Subcategorieën (bijv. Heren → T-shirts & Polo's, Jeans & Broeken) • In de categorie-editor: kies een bovenliggende categorie • De sidebar-filter toont categorieën als een inklapbare boom • Productcount per (sub)categorie wordt automatisch berekend Dit werkt net als een webshop zoals Omoda of Zalando.

De productlijst heeft een uitgebreide sidebar met 6 filtertypen: 1. Categorie — boom-weergave met parent/child en productaantal 2. Gender — Dames, Heren, Kids, Unisex 3. Kleur — visuele kleurbolletjes (swatches) op basis van productkleur 4. Merk — alfabetische lijst met zoekfunctie 5. Maat — grid van knoppen (uit productvarianten) 6. Kortingen — sale-toggle + ranges (tot 30%, 30-50%, vanaf 50%) Desktop: sidebar links (240px breed), altijd zichtbaar. Mobiel: slide-in paneel met 'Toon X resultaten'-knop. Alle filters combineren: selecteer Dames + Maat M + Merk EcoWear → alleen matchende producten.

Boven de productlijst verschijnt een horizontaal mega menu: • Top-level categorieën als tabs • Hover op een tab opent een dropdown met: – Subcategorieën (linkerkolom) – Merken, top 6 + 'meer' (rechterkolom) • Klik op een categorie of merk activeert direct dat filter Het mega menu is configureerbaar via de Page Builder toggle 'Mega menu tonen'. Op mobiel: het mega menu verbergt zich en de filters zijn bereikbaar via de Filter-knop.

Naast de standaard e-commerce functies zijn er uitgebreide modules beschikbaar: • Promoties — categorie-, merk- en productkortingen met anti-stapelkorting. Zie het hoofdstuk 'Promoties & Sale' voor details. • Kadoverpakking — optionele cadeauverpakking als checkout add-on. Zie het hoofdstuk 'Kadoverpakking' voor details. • Upsell & Cross-sell — slimme productaanbevelingen om je omzet te verhogen. Zie het hoofdstuk 'Upsell & Cross-sell' voor details.

De productdetailpagina bevat nu tabbladen met uitgebreide productinformatie: • Product informatie — met 3 sub-tabs: – Specificaties: key/value tabel (materiaal, type, seizoen, etc.) – Samenstelling & Pasvorm: visuele materiaal-balkjes, pasvorm-indicator en wasinstructies – Omschrijving: uitgebreide productbeschrijving • Bezorgen & retourneren — 3 USP-kaarten met levertijd, verzendkosten en retourbeleid Specificaties invullen: 1. Open een product in E-commerce → Producten 2. Vul de specificaties in als key/value paren 3. Voeg materiaalsamenstelling toe (percentages, bijv. 95% Katoen, 5% Elastaan) 4. Stel de pasvorm in op een schaal van 1-5 Op mobiel (<768px) worden de tabs automatisch omgezet naar accordions met vloeiende animaties.

Per product kun je een maattabel toevoegen die als popup verschijnt: 1. Open een product in de producteditor 2. Ga naar het tabblad 'Maattabel' 3. Stel de kolomkoppen in (bijv. EU, UK, US, CM) 4. Voeg rijen toe per maat Op de website verschijnt een 'Maatadvies'-knop naast de maat-selector. Klikken opent een modal met de volledige maattabel. De modal sluit via ESC, klikken buiten de modal, of de sluitknop. Op mobiel is de tabel horizontaal scrollbaar.

Op de productdetailpagina wordt bezorg- en retourinformatie getoond in 3 overzichtelijke kaarten: • Levertijd — 'Vandaag besteld, morgen in huis' • Gratis verzending — drempelbedrag voor gratis verzending • Retourbeleid — 'Gratis retourneren binnen 30 dagen' Deze informatie komt automatisch uit de verzendconfiguratie van je webshop. Bezoekers zien dit op het 'Bezorgen & retourneren' tabblad.

Boven de 'Toevoegen aan winkelwagen'-knop staat een afteltimer die toont hoeveel tijd de bezoeker heeft om vandaag te bestellen voor levering morgen. • Aftelling naar 16:00 (cut-off tijd) • Format: 'Bestel binnen 2u 14m voor levering morgen' • Na 16:00: 'Bestel nu voor levering overmorgen' • De timer telt elke seconde af voor een dynamisch gevoel De timer verschijnt alleen wanneer het product op voorraad is.

Wanneer de bezoeker voorbij de 'Toevoegen aan winkelwagen'-knop scrollt, verschijnt een compacte sticky bar bovenaan het scherm: • Thumbnail afbeelding + productnaam + prijs • 'Toevoegen'-knop altijd zichtbaar • Slide-in animatie vanuit de bovenkant De bar verdwijnt weer zodra de bezoeker terug naar boven scrollt en de originele knop zichtbaar wordt.

Productafbeeldingen hebben een zoom-functie voor detail: • Desktop: beweeg je muis over de afbeelding voor een 2x zoom-lens • De zoom volgt de muispositie in realtime • Mobiel: de native pinch-to-zoom van het apparaat wordt gebruikt Geen extra configuratie nodig — de zoom werkt automatisch op alle productafbeeldingen.