E-commerce (Web Shop)

The E-commerce widget adds a full web shop to your website. Visitors can browse products, add them to a shopping cart and check out via Stripe Checkout. The widget is activated per website via Settings → Widgets → E-commerce. After activation, admin pages appear in the sidebar and shop blocks become available in the Page Builder.

Via E-commerce → Products you manage your product catalogue: • Title, description and price • Upload images via the media library • Assign a category • Set stock level • Mark product as active/inactive Products with stock 0 are automatically shown as "Sold out" on the website.

Products can have variants such as size or colour. Each variant has its own price, stock and optional SKU. Setting up variants: 1. Open a product in E-commerce → Products 2. Define variant attributes (e.g. "Size", "Colour") 3. Enter the values (e.g. S, M, L / Red, Blue) 4. The matrix generator automatically creates all combinations 5. Set price and stock per variant On the website, visitors choose a variant via dropdowns or colour swatches. Price and stock update automatically.

Via E-commerce → Categories you organise products into groups: • Name and slug (URL-friendly name) • Adjust order via drag & drop Categories are used in the ProductList block as a filter and in the search/filter panel on the website.

The ProductList block displays products in a configurable grid or list. How to add it: 1. Open a page in the Page Builder 2. Search for "ProductListSection" in the block list 3. Drag it onto your page 4. Configure in the sidebar: • Heading • Number of columns (1-4) • Maximum products • Category filter • Show price and image • Show search & filters • Quick View on/off On the website, visitors see products with image, price, stock badges and an "Add to cart" button.

The ProductDetail block shows a full product page with gallery, price, description and "Add to cart". How to use it: 1. Create a page (e.g. slug "product-detail") 2. Add the ProductDetailSection block 3. Configure layout (gallery left/top) and related products The block reads the product ID from the URL (?product=xxx). Links in the ProductList block automatically point to this page.

The shopping cart is a slide-over drawer that opens when a visitor adds a product. Features: • Add, remove and adjust quantities • Subtotal automatically calculated • Checkout button that redirects to Stripe • Stock check: cannot add more than available stock The cart is saved in the browser (localStorage) and survives a page refresh.

When checking out, the visitor is redirected to Stripe Checkout: 1. Visitor clicks "Checkout" in the cart 2. Server validates prices and stock (fraud prevention) 3. Stripe Checkout opens with the correct items and shipping options 4. After payment: order is created, stock updated, confirmation email sent 5. Visitor sees a confirmation page with order summary Prices are always validated server-side. The client never sends amounts to Stripe.

After a successful payment, the visitor is redirected back to your website. The "Order Confirmation" block (OrderConfirmationSection) automatically displays a thank-you page with an order summary. Important: place this block on the SAME page as your ProductList (shop page). The block is normally invisible and only appears when the visitor returns from Stripe with the correct parameters in the URL. How to set it up: 1. Open your shop page in the Page Builder 2. Add the "Order Confirmation" block BELOW your ProductList block 3. Configure: heading, accent colour, show order items (yes/no) 4. Publish the page After payment, the visitor sees: • Confirmation icon and thank-you text • Order number • Ordered products with prices • Total amount • Shipping address (if applicable) • "Back to shop" button The shopping cart is automatically cleared after a successful order.

Via E-commerce → Orders you see all orders: • Filter by status (paid, shipped, cancelled) or date • Per order: items, total amount, customer details • Shipping address and method (if configured) • Tracking number and link (if carrier API is active) • Update status For digital products, the order status is set to "Completed" immediately after payment.

The E-commerce Dashboard gives an overview of your shop: • Revenue last 30 days • Total orders • Best-selling products • Low stock products This helps you quickly see how your shop is performing and where action is needed.

Visitors can leave reviews on products (1-5 stars + text). Reviews require moderation: 1. Go to E-commerce → Reviews 2. New reviews are marked as "Pending" 3. Approve, reject or delete per review Only approved reviews are visible on the website. The average rating appears on product cards and the detail page. Email notifications: • The customer automatically receives a confirmation email after submitting (with product image and summary) • The shop owner receives a notification for each new review (with a direct link to moderation) • The toggle "Email notification for new reviews" on the Reviews page enables/disables the owner notification • A counter in the sidebar shows the number of pending reviews

Via E-commerce → Coupons you create discount codes: • Type: percentage or fixed amount • Maximum usage: limited number of redemptions • Expiry date • Minimum order amount Customers enter the code during checkout via Stripe Checkout. The discount is automatically applied.

Visitors who leave their cart behind can automatically receive a reminder email. How it works: • Visitor optionally enters an email address in the cart • After 1 hour of inactivity: reminder #1 • After 24 hours: reminder #2 (optionally with a 10% discount code) • Maximum 2 emails per abandoned cart Via E-commerce → Abandoned Carts you see an overview: email, items, value and status (pending, reminded, recovered, expired).

Via E-commerce → Shipping you set up shipping rates per country or zone. Per zone you configure: • Countries (e.g. Netherlands, Belgium) • Shipping methods (standard, express) with price and delivery time • Free shipping threshold (e.g. free above €50) Customers see the matching shipping options at checkout via Stripe Checkout. Without shipping configuration, no shipping costs are calculated.

Via E-commerce → Tax you activate automatic VAT calculation via Stripe Tax: • VAT is automatically calculated based on the customer's country • Choose between VAT inclusive or exclusive • Set registration countries (where you are VAT-liable) • Per product optionally: Stripe tax code The VAT amount is saved per order for your accounting.

You can sell digital products (e-books, templates, files). After payment, the customer receives a secure download link. Setup: 1. Create a product in E-commerce → Products 2. Set the type to "Digital" 3. Upload the file 4. Set the download limit (default 3 downloads per purchase) After payment: • Order is immediately set to "Completed" (no shipping) • Confirmation email contains download link(s) • Customer can also download via order history Physical and digital products can be mixed in one order.

The Donation block allows visitors to donate a custom amount via Stripe. How to set it up: 1. Add the DonationSection block in the Page Builder 2. Configure: preset amounts (€5, €10, €25, €50), minimum amount, heading 3. Visitors choose an amount or enter a custom amount Via E-commerce → Donations you see all donations: amount, donor, message and date.

Visitors can mark products as favourites via a heart icon. The wishlist: • Is saved in the browser (localStorage) • Heart visible on product cards and detail page • Wishlist drawer shows all favourites • "Add to cart" from the wishlist No account required.

You can offer products in multiple currencies: 1. Go to the product editor → set prices per currency (EUR, GBP, USD) 2. Set available currencies per site 3. Visitors choose their currency via a selector 4. Checkout charges in the chosen currency Products without multiple prices use the default price field.

Product translations: name, description and SEO fields per language. Setup: 1. Open a product → language tabs appear for each available language 2. Fill in the translation per language 3. Customers see the shop in their chosen language 4. Fallback: if a translation is missing, the default language is shown The same applies to categories.

Via E-commerce → Import/Export you can bulk import or export products: Import: • Upload CSV (drag & drop) • Auto-detection: WooCommerce, Shopify or generic format • Column mapping adjustable • Preview: view first 10 rows before import • Dry run: validation without writing • Max 500 products per import Export: • All products including variants as CSV download • Useful for backups or migration to another platform

Visitors can optionally create an account on the web shop: • Log in with email + password • View order history: date, items, total, status, tracking • "Reorder" adds items to the cart • Email is pre-filled at checkout Ordering without an account remains possible.

The system automatically shows stock indicators on the website: • Stock 0: "Sold out" badge, order button disabled • Stock 1-5 (configurable): "Almost gone" badge (orange) • Detail page: "Only {n} left in stock!" Admins receive an email alert when stock drops below the threshold (max 1 per product per 24 hours).

After a successful payment, the visitor is redirected to a confirmation page. This page shows: • Thank you message • Ordered items and total • Shipping address and estimated delivery time • The cart is automatically cleared You place the OrderConfirmationSection block on a separate page in the Page Builder.

Products are automatically optimised for search engines: • Open Graph tags for social media (title, image, price) • JSON-LD structured data (Google rich results: price, availability, reviews) • Optional SEO title and description per product Google can display products with price, stars and availability directly in search results.

The system automatically sends emails on order events: • Order confirmation — immediately after payment (items, total, address) • Shipping confirmation — when status changes to "Shipped" (tracking link) • Review request — 7 days after delivery Emails include your site name and logo (white-label). The review request includes an unsubscribe link.

E-commerce features depend on your subscription: • Starter (€39): no E-commerce • Professional (€79): E-commerce with max 100 products, reviews, wishlist, coupons (5), donations • Agency (€199): everything unlimited + digital products, abandoned carts, multi-currency, multilanguage, CSV import/export, carrier API, automated tax When you reach a limit, an upgrade banner appears with a link to your subscription.

Each website needs its own Stripe account for payments. 1. Go to E-commerce → Payments and select the website 2. Click 'Connect Stripe' and complete the Stripe onboarding 3. After connecting, guest payments go directly to the website owner's account

A platform fee is deducted from every payment via the web shop/menu. The default fee is 5%. You can adjust this per website. Go to E-commerce → Payments → select website → adjust the percentage.

A website can have both a web shop and a menu. Web shop products and menu products are kept separate. The web shop only shows web shop products (no menu items). The menu only shows menu items. The shopping cart is shared: a guest can combine products from both.

Sell recurring products or services via subscriptions: 1. Go to E-commerce → Products → create a new product 2. Set the type to 'Subscription' 3. Set the frequency: weekly, monthly, or yearly 4. Set the price per period Stripe Billing handles automatic periodic invoicing. Customers manage their subscription via their account (pause, cancel).

Customers can create an account for added convenience: • View order history with status and tracking • Reorder with 1 click — all items are added to the cart • Save delivery addresses for faster checkout • Manage subscriptions (pause/cancel) • Download invoices An account is not required — guests can always order as guest.

Offer automatic direct debit as a payment method: 1. Enable SEPA Direct Debit in your Stripe Dashboard 2. Go to E-commerce → Payments → enable 'Direct debit' Customers can choose direct debit at checkout. The mandate is handled through Stripe. Ideal for subscriptions and recurring orders.

Automatically generate invoices for every order: • Invoices are automatically created after payment • PDF download available in the admin overview and customer account • Invoice details: invoice number, date, VAT, items, total • Monthly invoice summaries for business customers Go to E-commerce → Invoices for an overview of all invoices.

Use the built-in register for physical sales: 1. Go to E-commerce → POS Settings 2. Enable POS and optionally connect a Stripe Terminal 3. Search products, scan barcodes, or browse categories 4. Check out via card, cash, or on account The POS supports: • Card payments via Stripe Terminal • Cash payments (manual registration) • Receipt printing via Web Serial API (ESC/POS printers) • Stock is updated in real-time

The product detail page can display a search bar so visitors can quickly find another product without going back to the product list. The search bar: • Is positioned above the breadcrumb on the detail page • Searches product title and description (client-side, fast) • Shows up to 6 results with thumbnail, title and price • For products on sale, the crossed-out price is shown • Click a result to navigate directly to that product In the Page Builder (ProductDetailSection) you can toggle the search bar on or off via 'Show search bar'.

Organise your products by brand for easy filtering and navigation: • Go to E-commerce → Brands to manage brands • Per brand: name, slug, logo and description • Link products to a brand in the product editor • Brands appear in the sidebar filter and mega menu Visitors can filter by brand via the sidebar or mega menu.

Categories now support a parent/child structure: • Top-level categories (e.g. Men, Women, Shoes) • Subcategories (e.g. Men → T-shirts & Polos, Jeans & Trousers) • In the category editor: choose a parent category • The sidebar filter shows categories as a collapsible tree • Product count per (sub)category is calculated automatically This works just like major fashion stores.

The product list features a comprehensive sidebar with 6 filter types: 1. Category — tree view with parent/child and product count 2. Gender — Women, Men, Kids, Unisex 3. Colour — visual colour swatches based on product colour 4. Brand — alphabetical list with search function 5. Size — button grid (from product variants) 6. Discounts — sale toggle + ranges (up to 30%, 30-50%, 50%+) Desktop: sidebar on the left (240px wide), always visible. Mobile: slide-in panel with 'Show X results' button. All filters combine: select Women + Size M + Brand EcoWear → only matching products.

Above the product list a horizontal mega menu appears: • Top-level categories as tabs • Hover on a tab opens a dropdown with: – Subcategories (left column) – Brands, top 6 + 'more' (right column) • Clicking a category or brand activates that filter directly The mega menu is configurable via the Page Builder toggle 'Show mega menu'. On mobile: the mega menu hides and filters are accessible via the Filter button.

In addition to standard e-commerce features, several extended modules are available: • Promotions — category, brand and product discounts with anti-stacking. See the 'Promotions & Sale' chapter for details. • Gift wrapping — optional gift wrap as a checkout add-on. See the 'Gift Wrapping' chapter for details. • Upsell & Cross-sell — smart product recommendations to boost your revenue. See the 'Upsell & Cross-sell' chapter for details.

The product detail page now includes tabs with detailed product information: • Product information — with 3 sub-tabs: – Specifications: key/value table (material, type, season, etc.) – Composition & Fit: visual material bars, fit indicator and care instructions – Description: extended product description • Delivery & returns — 3 USP cards with delivery time, shipping costs and return policy Adding specifications: 1. Open a product in E-commerce → Products 2. Fill in specifications as key/value pairs 3. Add material composition (percentages, e.g. 95% Cotton, 5% Elastane) 4. Set the fit on a scale of 1-5 On mobile (<768px) the tabs automatically convert to accordions with smooth animations.

You can add a size chart per product that appears as a popup: 1. Open a product in the product editor 2. Go to the 'Size guide' tab 3. Set column headers (e.g. EU, UK, US, CM) 4. Add rows per size On the website, a 'Size guide' button appears next to the size selector. Clicking opens a modal with the full size chart. The modal closes via ESC, clicking outside, or the close button. On mobile the table scrolls horizontally.

The product detail page displays delivery and return information in 3 clear cards: • Delivery time — 'Order today, delivered tomorrow' • Free shipping — threshold amount for free shipping • Return policy — 'Free returns within 30 days' This information is automatically sourced from your shop's shipping configuration. Visitors see this on the 'Delivery & returns' tab.

Above the 'Add to cart' button, a countdown timer shows how much time the visitor has to order today for delivery tomorrow. • Countdown to 16:00 (cut-off time) • Format: 'Order within 2h 14m for delivery tomorrow' • After 16:00: 'Order now for delivery the day after tomorrow' • The timer counts down every second for a dynamic feel The timer only appears when the product is in stock.

When the visitor scrolls past the 'Add to cart' button, a compact sticky bar appears at the top of the screen: • Thumbnail image + product name + price • 'Add to cart' button always visible • Slide-in animation from the top The bar disappears again when the visitor scrolls back up and the original button becomes visible.

Product images have a zoom function for detail: • Desktop: hover your mouse over the image for a 2x zoom lens • The zoom follows the cursor position in real-time • Mobile: the device's native pinch-to-zoom is used No extra configuration needed — zoom works automatically on all product images.