Ein Kurs-Bundle-System in Webflow & Ablefy bauen (inkl. Checkout)

In diesem Video zeige ich dir, wie ich in Webflow ein flexibles Kurs Bundle- und Warenkorb-System gebaut habe komplett ohne Shopify, ohne Plugins und ohne klassisches E-Commerce. Für die Kurse und den Checkout nutze ich Ablefy, für die Website Webflow.

Ich hatte das Problem, dass ich mehrere Produkte (Onlinekurse) anbieten wollte, die sich individuell kombinieren lassen — als Bundle, Add-on oder Upgrade — inklusive automatischer Rabatte.

Also habe ich mir mein eigenes System gebaut:
ein kleiner Mini-Konfigurator mit CMS-Logik, Custom JavaScript, Modal-Warenkorb und dynamischer Preisberechnung.

Tools, die ich nutze:

• Ablefy – Online‑Kurse erstellen, hosten und verkaufen – inklusive Video‑Streaming, Inhalte und Zertifikate. *
• Webflow – visuelles Frontend und CMS, über das Produktseiten gestaltet, Kursangebote verwaltet und die Nutzerinteraktion bis zum Checkout gestaltet werden. *

Lerne Shop-Systeme in Webflow zu bauen (für Fortgeschrittene) mit meinem Webflow Profi-Kurs.

Dynamische Kurs-Bundles und Checkout-Logik in Webflow mit Ablefy

Viele Webdesigner, die Webflow nutzen, stehen vor der Herausforderung, digitale Produkte wie Online-Kurse flexibel zu verkaufen. Die klassische Methode mit starren Bundles und fest vorgegebenen Produktkombinationen ist dabei oft zu unflexibel. In diesem Beitrag zeige ich dir, wie du mit Webflow, Ablefy und etwas JavaScript ein dynamisches Bundle-System mit Order Bumps, Preisanpassungen und einem angepassten Checkout-Prozess umsetzen kannst.

Ausgangslage: Statische Bundles bremsen die Skalierung

Bisher war es nötig, für jede denkbare Kombination an Kursen ein eigenes Bundle manuell zu erstellen – sowohl im Webflow CMS als auch in Ablefy. Diese Methode ist nicht nur fehleranfällig, sondern auch unflexibel, sobald neue Kurse hinzukommen oder sich Preise ändern.

Ziel: Flexible Kombination von Produkten im Checkout

Die Lösung: Ein System, bei dem Nutzer sich ihre Wunschkombination direkt auf der Produktseite zusammenstellen können – inklusive dynamischer Preisberechnung, Rabattlogik und einer Übergabe an den Ablefy-Checkout mit vorausgewählten Produkten (via URL-Parameter).

Schritt 1: Produktstruktur im Webflow CMS

Im Webflow CMS werden alle Kurse als Einzelprodukte angelegt – inklusive aller relevanten Infos:

• Einmal- und Ratenpreise
• Produkt-IDs von Ablefy
• Optional: reduzierte Preise für Bundles
• Checklisten, Cover-Bilder und Feature-Texte

Statt Bundles als eigene Produkte anzulegen, werden diese Kombinationen dynamisch im Frontend konfiguriert.

Schritt 2: Order Bumps im Checkout

Die Zusatzprodukte (Order Bumps) werden im Ablefy-Backend eingerichtet und erhalten dort individuelle IDs und Preismodelle. Diese IDs werden im Webflow CMS hinterlegt und dann im Checkout dynamisch übergeben.

Schritt 3: Dynamische Logik mit JavaScript

Ein individueller JavaScript-Code übernimmt die dynamische Generierung der URL mit den Ablefy-IDs und sorgt dafür, dass:

• Produkte vorausgewählt im Checkout erscheinen
• Die Logik auch bei Entfernen von Produkten greift
• Die Auswahl im Session Storage gespeichert wird (Warenkorb bleibt beim Zurücknavigieren erhalten)

Schritt 4: UI und UX im Webflow-Design

Die Preisübersicht ist modular aufgebaut. Über eine Collection List werden die Order Bumps eingeblendet, wenn der Nutzer weitere Kurse hinzufügen möchte. Ein Modal-Fenster erlaubt die Konfiguration direkt auf der Produktseite, ohne den Kontext zu verlassen.

Ein Highlight: Die gewählten Kurse werden visuell hervorgehoben, und ein dynamischer Button führt direkt zum konfigurierten Checkout.

Schritt 5: Rabattberechnung und CMS-Sync

Die Preisberechnung (z. B. 30 % Rabatt bei Bundles) erfolgt zunächst in Notion – dort werden die finalen Preise kalkuliert und anschließend manuell ins Webflow CMS übertragen. Wichtig dabei ist, dass alle Preismodelle konsistent bleiben – auch bei zukünftigen Preisänderungen.

Flexibilität und Skalierbarkeit durch Kombination von CMS, JS und Ablefy

Mit dieser Lösung entsteht ein skalierbares, flexibles System für digitale Produkte in Webflow. Nutzer können Kurse frei kombinieren, der Checkout bleibt übersichtlich und der Verwaltungsaufwand im Backend reduziert sich erheblich. Wer Webflow professionell für Kursverkäufe nutzen will, kommt an einer solchen Lösung kaum vorbei.

Gerade mit Hilfe von Tools wie Ablefy und KI-gestütztem JavaScript kannst du dir viel Komplexität abnehmen lassen und trotzdem ein individuelles, hochwertiges Nutzererlebnis schaffen.

Wenn du eigene Kurse oder digitale Produkte in Webflow verkaufst – denk darüber nach, wie du deinen Checkout flexibler gestalten kannst.