E-Commerce (Webshop)

Das E-Commerce-Widget fügt einen vollständigen Webshop zu Ihrer Website hinzu. Besucher können Produkte ansehen, in den Warenkorb legen und über Stripe Checkout bezahlen. Das Widget wird pro Website aktiviert unter Einstellungen → Widgets → E-Commerce. Nach der Aktivierung erscheinen Admin-Seiten in der Seitenleiste und Shop-Blöcke werden im Page Builder verfügbar.

Über E-Commerce → Produkte verwalten Sie Ihren Produktkatalog: • Titel, Beschreibung und Preis • Bilder über die Mediathek hochladen • Kategorie zuweisen • Lagerbestand festlegen • Produkt als aktiv/inaktiv markieren Produkte mit Bestand 0 werden automatisch als "Ausverkauft" angezeigt.

Produkte können Varianten wie Größe oder Farbe haben. Jede Variante hat eigenen Preis, Bestand und optionale SKU. Varianten einrichten: 1. Öffnen Sie ein Produkt unter E-Commerce → Produkte 2. Definieren Sie Varianten-Attribute (z.B. "Größe", "Farbe") 3. Geben Sie die Werte ein (z.B. S, M, L / Rot, Blau) 4. Der Matrix-Generator erstellt automatisch alle Kombinationen 5. Legen Sie Preis und Bestand pro Variante fest Auf der Website wählen Besucher eine Variante über Dropdowns oder Farbmuster.

Über E-Commerce → Kategorien organisieren Sie Produkte in Gruppen: • Name und Slug (URL-freundlicher Name) • Reihenfolge per Drag & Drop anpassen Kategorien werden im ProductList-Block als Filter und im Such-/Filterpanel verwendet.

Der ProductList-Block zeigt Produkte in einem konfigurierbaren Raster oder als Liste. So fügen Sie ihn hinzu: 1. Öffnen Sie eine Seite im Page Builder 2. Suchen Sie "ProductListSection" in der Blockliste 3. Ziehen Sie ihn auf Ihre Seite 4. Konfigurieren Sie in der Seitenleiste: • Überschrift • Spaltenanzahl (1-4) • Maximale Produkte • Kategoriefilter • Preis und Bild anzeigen • Suche & Filter anzeigen • Quick View ein/aus

Der ProductDetail-Block zeigt eine vollständige Produktseite mit Galerie, Preis, Beschreibung und "In den Warenkorb". Verwendung: 1. Erstellen Sie eine Seite (z.B. Slug "product-detail") 2. Fügen Sie den ProductDetailSection-Block hinzu 3. Konfigurieren Sie Layout (Galerie links/oben) und ähnliche Produkte Der Block liest die Produkt-ID aus der URL (?product=xxx).

Der Warenkorb ist ein Seitenpanel, das sich öffnet, wenn ein Besucher ein Produkt hinzufügt. Funktionen: • Produkte hinzufügen, entfernen, Menge anpassen • Zwischensumme automatisch berechnet • Checkout-Button leitet zu Stripe weiter • Bestandsprüfung: mehr als verfügbar hinzufügen ist nicht möglich Der Warenkorb wird im Browser gespeichert (localStorage) und überlebt einen Seitenrefresh.

Beim Bezahlen wird der Besucher zu Stripe Checkout weitergeleitet: 1. Besucher klickt "Zur Kasse" im Warenkorb 2. Server validiert Preise und Bestand (Betrugsprävention) 3. Stripe Checkout öffnet sich mit den korrekten Artikeln und Versandoptionen 4. Nach Bezahlung: Bestellung wird erstellt, Bestand aktualisiert, Bestätigungs-E-Mail versendet 5. Besucher sieht eine Bestätigungsseite mit Bestellübersicht

Nach einer erfolgreichen Zahlung wird der Besucher zurück auf Ihre Website geleitet. Der Block "Bestellbestätigung" (OrderConfirmationSection) zeigt automatisch eine Dankeseite mit Bestellübersicht. Wichtig: Platzieren Sie diesen Block auf DERSELBEN Seite wie Ihre ProductList (Shop-Seite). Der Block ist normalerweise unsichtbar und erscheint erst, wenn der Besucher von Stripe mit den richtigen Parametern in der URL zurückkehrt. So richten Sie es ein: 1. Öffnen Sie Ihre Shop-Seite im Page Builder 2. Fügen Sie den Block "Bestellbestätigung" UNTER Ihrem ProductList-Block hinzu 3. Konfigurieren Sie: Überschrift, Akzentfarbe, Bestellpositionen anzeigen (Ja/Nein) 4. Veröffentlichen Sie die Seite Nach der Bezahlung sieht der Besucher: • Bestätigungssymbol und Dankestext • Bestellnummer • Bestellte Produkte mit Preisen • Gesamtbetrag • Versandadresse (falls zutreffend) • "Zurück zum Shop"-Button Der Warenkorb wird nach einer erfolgreichen Bestellung automatisch geleert.

Über E-Commerce → Bestellungen sehen Sie alle Bestellungen: • Nach Status (bezahlt, versendet, storniert) oder Datum filtern • Pro Bestellung: Artikel, Gesamtbetrag, Kundendaten • Versandadresse und -methode (falls konfiguriert) • Tracking-Nummer und Link (falls Carrier API aktiv) • Status aktualisieren

Das E-Commerce-Dashboard gibt einen Überblick über Ihren Shop: • Umsatz der letzten 30 Tage • Gesamtzahl Bestellungen • Meistverkaufte Produkte • Produkte mit niedrigem Bestand

Besucher können Bewertungen zu Produkten hinterlassen (1-5 Sterne + Text). Bewertungen erfordern Moderation: 1. Gehen Sie zu E-Commerce → Bewertungen 2. Neue Bewertungen sind als "Ausstehend" markiert 3. Genehmigen, ablehnen oder löschen Sie pro Bewertung Nur genehmigte Bewertungen sind auf der Website sichtbar. E-Mail-Benachrichtigungen: • Der Kunde erhält automatisch eine Bestätigungsmail nach dem Einreichen (mit Produktbild und Zusammenfassung) • Der Shopbesitzer erhält eine Benachrichtigung bei jeder neuen Bewertung (mit direktem Link zur Moderation) • Der Schalter "E-Mail-Benachrichtigung bei neuen Bewertungen" auf der Bewertungsseite aktiviert/deaktiviert die Besitzer-Benachrichtigung • Ein Zähler in der Seitenleiste zeigt die Anzahl der ausstehenden Bewertungen

Über E-Commerce → Gutscheine erstellen Sie Rabattcodes: • Typ: Prozentsatz oder Festbetrag • Maximale Nutzung • Ablaufdatum • Mindestbestellwert Kunden geben den Code beim Checkout über Stripe ein. Der Rabatt wird automatisch verrechnet.

Besucher, die ihren Warenkorb verlassen, können automatisch eine Erinnerungs-E-Mail erhalten. Funktionsweise: • Besucher gibt optional eine E-Mail-Adresse im Warenkorb ein • Nach 1 Stunde Inaktivität: Erinnerung #1 • Nach 24 Stunden: Erinnerung #2 (optional mit 10% Rabattcode) • Maximal 2 E-Mails pro verlassenem Warenkorb Über E-Commerce → Verlassene Warenkörbe sehen Sie eine Übersicht.

Über E-Commerce → Versand richten Sie Versandtarife pro Land oder Zone ein. Pro Zone konfigurieren Sie: • Länder (z.B. Deutschland, Österreich) • Versandmethoden (Standard, Express) mit Preis und Lieferzeit • Kostenloser Versand ab einem Schwellenwert Ohne Versandkonfiguration werden keine Versandkosten berechnet.

Über E-Commerce → Steuer aktivieren Sie die automatische MwSt.-Berechnung über Stripe Tax: • MwSt. wird automatisch basierend auf dem Kundenland berechnet • Wählen Sie zwischen MwSt.-inklusiv oder -exklusiv • Legen Sie Registrierungsländer fest • Pro Produkt optional: Stripe-Steuercode

Sie können digitale Produkte verkaufen (E-Books, Templates, Dateien). Nach der Bezahlung erhält der Kunde einen gesicherten Download-Link. Einrichtung: 1. Erstellen Sie ein Produkt unter E-Commerce → Produkte 2. Setzen Sie den Typ auf "Digital" 3. Laden Sie die Datei hoch 4. Legen Sie das Download-Limit fest (Standard 3 Downloads pro Kauf) Physische und digitale Produkte können in einer Bestellung kombiniert werden.

Mit dem Spenden-Block können Besucher einen frei wählbaren Betrag über Stripe spenden. Einrichtung: 1. Fügen Sie den DonationSection-Block im Page Builder hinzu 2. Konfigurieren Sie: Voreingestellte Beträge, Mindestbetrag, Überschrift 3. Besucher wählen einen Betrag oder geben einen eigenen ein Über E-Commerce → Spenden sehen Sie alle Spenden.

Besucher können Produkte über ein Herz-Symbol als Favoriten markieren. Die Wunschliste: • Wird im Browser gespeichert (localStorage) • Herz sichtbar auf Produktkarten und der Detailseite • Wunschlisten-Drawer zeigt alle Favoriten • "In den Warenkorb" aus der Wunschliste Kein Konto erforderlich.

Sie können Produkte in mehreren Währungen anbieten: 1. Gehen Sie zum Produkteditor → legen Sie Preise pro Währung fest (EUR, GBP, USD) 2. Stellen Sie verfügbare Währungen pro Site ein 3. Besucher wählen ihre Währung über einen Selektor 4. Checkout berechnet in der gewählten Währung

Produktübersetzungen: Name, Beschreibung und SEO-Felder pro Sprache. Einrichtung: 1. Öffnen Sie ein Produkt → Sprach-Tabs erscheinen für jede verfügbare Sprache 2. Füllen Sie die Übersetzung pro Sprache aus 3. Kunden sehen den Shop in ihrer gewählten Sprache 4. Fallback: fehlt eine Übersetzung, wird die Standardsprache angezeigt

Über E-Commerce → Import/Export können Sie Produkte in großen Mengen importieren oder exportieren: Import: • CSV hochladen (Drag & Drop) • Auto-Erkennung: WooCommerce, Shopify oder generisches Format • Spaltenzuordnung anpassbar • Vorschau: erste 10 Zeilen vor Import ansehen • Testlauf: Validierung ohne zu schreiben • Max 500 Produkte pro Import Export: • Alle Produkte inkl. Varianten als CSV-Download

Besucher können optional ein Konto im Webshop erstellen: • Anmelden mit E-Mail + Passwort • Bestellverlauf einsehen: Datum, Artikel, Summe, Status, Tracking • "Erneut bestellen" fügt Artikel in den Warenkorb • E-Mail wird beim Checkout vorausgefüllt Bestellen ohne Konto bleibt möglich.

Das System zeigt automatisch Bestandsindikatoren an: • Bestand 0: "Ausverkauft" Badge, Bestell-Button deaktiviert • Bestand 1-5 (konfigurierbar): "Fast ausverkauft" Badge (orange) • Detailseite: "Nur noch {n} auf Lager!" Admins erhalten eine E-Mail-Benachrichtigung bei niedrigem Bestand.

Nach erfolgreicher Bezahlung wird der Besucher auf eine Bestätigungsseite weitergeleitet. Diese Seite zeigt: • Dankesnachricht • Bestellte Artikel und Gesamtsumme • Versandadresse und geschätzte Lieferzeit • Der Warenkorb wird automatisch geleert

Produkte werden automatisch für Suchmaschinen optimiert: • Open Graph Tags für Social Media (Titel, Bild, Preis) • JSON-LD Structured Data (Google Rich Results: Preis, Verfügbarkeit, Bewertungen) • Optionaler SEO-Titel und -Beschreibung pro Produkt

Das System versendet automatisch E-Mails bei Bestellereignissen: • Bestellbestätigung — direkt nach Bezahlung • Versandbestätigung — bei Status "Versendet" (Tracking-Link) • Bewertungsanfrage — 7 Tage nach Lieferung E-Mails enthalten Ihren Site-Namen und Ihr Logo (White-Label).

E-Commerce-Funktionen hängen von Ihrem Abonnement ab: • Starter (€39): kein E-Commerce • Professional (€79): E-Commerce mit max 100 Produkten, Bewertungen, Wunschliste, Gutscheine (5), Spenden • Agency (€199): alles unbegrenzt + digitale Produkte, verlassene Warenkörbe, Multi-Currency, mehrsprachig, CSV Import/Export, Carrier API, automatisierte Steuer

Jede Website benötigt ein eigenes Stripe-Konto für Zahlungen. 1. Gehen Sie zu E-Commerce → Zahlungen und wählen Sie die Website aus 2. Klicken Sie auf 'Stripe verbinden' und durchlaufen Sie das Stripe-Onboarding 3. Nach der Verbindung gehen Gastzahlungen direkt auf das Konto des Website-Betreibers

Bei jeder Zahlung über den Webshop/die Speisekarte wird eine Plattformgebühr einbehalten. Die Standardgebühr beträgt 5%. Sie können diese pro Website anpassen. Gehen Sie zu E-Commerce → Zahlungen → Website auswählen → Prozentsatz anpassen.

Eine Website kann sowohl einen Webshop als auch eine Speisekarte haben. Webshop-Produkte und Speisekarte-Produkte werden getrennt gehalten. Im Webshop erscheinen nur Webshop-Produkte (keine Menü-Artikel). In der Speisekarte erscheinen nur Menü-Artikel. Der Warenkorb ist gemeinsam: Ein Gast kann Produkte aus beiden kombinieren.

Verkaufen Sie wiederkehrende Produkte über Abonnements: 1. Gehen Sie zu E-Commerce → Produkte → neues Produkt erstellen 2. Setzen Sie den Typ auf 'Abonnement' 3. Legen Sie die Häufigkeit fest: wöchentlich, monatlich oder jährlich 4. Legen Sie den Preis pro Periode fest Stripe Billing übernimmt die automatische periodische Abrechnung.

Kunden können ein Konto erstellen: • Bestellhistorie mit Status und Tracking einsehen • Mit 1 Klick nachbestellen • Lieferadressen speichern • Abonnements verwalten (pausieren/kündigen) • Rechnungen herunterladen Ein Konto ist nicht erforderlich — Gäste können immer als Gast bestellen.

Bieten Sie SEPA-Lastschrift als Zahlungsmethode an: 1. Aktivieren Sie SEPA Direct Debit in Ihrem Stripe Dashboard 2. Gehen Sie zu E-Commerce → Zahlungen → aktivieren Sie 'Lastschrift' Kunden können an der Kasse Lastschrift wählen. Das Mandat wird über Stripe abgewickelt.

Generieren Sie automatisch Rechnungen für jede Bestellung: • Rechnungen werden nach Zahlung automatisch erstellt • PDF-Download in der Admin-Übersicht und im Kundenkonto • Rechnungsdetails: Rechnungsnummer, Datum, MwSt., Artikel, Summe Gehen Sie zu E-Commerce → Rechnungen für eine Übersicht.

Nutzen Sie die integrierte Kasse für den Vor-Ort-Verkauf: 1. Gehen Sie zu E-Commerce → POS-Einstellungen 2. Aktivieren Sie POS und verbinden Sie optional ein Stripe Terminal 3. Produkte suchen, Barcodes scannen oder Kategorien durchblättern 4. Bezahlen per Karte, bar oder auf Rechnung Die POS unterstützt: • Kartenzahlung über Stripe Terminal • Barzahlung (manuelle Registrierung) • Bondruckvia Web Serial API • Bestand wird in Echtzeit aktualisiert

Auf der Produktdetailseite kann eine Suchleiste angezeigt werden, damit Besucher schnell ein anderes Produkt finden, ohne zur Produktliste zurückzukehren. Die Suchleiste: • Befindet sich über der Breadcrumb auf der Detailseite • Sucht nach Produkttitel und Beschreibung (clientseitig, schnell) • Zeigt maximal 6 Ergebnisse mit Miniaturansicht, Titel und Preis • Bei Sale-Produkten wird der durchgestrichene Preis angezeigt • Klicken Sie auf ein Ergebnis, um direkt zu diesem Produkt zu navigieren Im Page Builder (ProductDetailSection) können Sie die Suchleiste über 'Suchleiste anzeigen' ein- oder ausschalten.

Organisieren Sie Ihre Produkte nach Marke für einfaches Filtern und Navigieren: • Gehen Sie zu E-Commerce → Marken zur Verwaltung • Pro Marke: Name, Slug, Logo und Beschreibung • Verknüpfen Sie Produkte mit einer Marke im Produkteditor • Marken erscheinen im Sidebar-Filter und im Mega-Menü Besucher können über die Sidebar oder das Mega-Menü nach Marke filtern.

Kategorien unterstützen jetzt eine Parent/Child-Struktur: • Oberkategorien (z.B. Herren, Damen, Schuhe) • Unterkategorien (z.B. Herren → T-Shirts & Polos, Jeans & Hosen) • Im Kategorie-Editor: übergeordnete Kategorie wählen • Der Sidebar-Filter zeigt Kategorien als einklappbaren Baum • Produktanzahl pro (Unter-)Kategorie wird automatisch berechnet Dies funktioniert wie bei großen Modeshops.

Die Produktliste verfügt über eine umfassende Sidebar mit 6 Filtertypen: 1. Kategorie — Baumansicht mit Parent/Child und Produktanzahl 2. Geschlecht — Damen, Herren, Kinder, Unisex 3. Farbe — visuelle Farbkreise basierend auf der Produktfarbe 4. Marke — alphabetische Liste mit Suchfunktion 5. Größe — Knopfraster (aus Produktvarianten) 6. Rabatte — Sale-Toggle + Bereiche (bis 30%, 30-50%, ab 50%) Desktop: Sidebar links (240px breit), immer sichtbar. Mobil: Einschubpanel mit 'Zeige X Ergebnisse'-Button. Alle Filter kombinieren: Damen + Größe M + Marke EcoWear wählen → nur passende Produkte.

Über der Produktliste erscheint ein horizontales Mega-Menü: • Oberkategorien als Tabs • Hover auf einen Tab öffnet ein Dropdown mit: – Unterkategorien (linke Spalte) – Marken, Top 6 + 'mehr' (rechte Spalte) • Klick auf eine Kategorie oder Marke aktiviert direkt den Filter Das Mega-Menü ist über den Page Builder-Toggle 'Mega-Menü anzeigen' konfigurierbar. Auf Mobilgeräten: Das Mega-Menü wird ausgeblendet und Filter sind über den Filter-Button erreichbar.

Neben den Standard-E-Commerce-Funktionen stehen mehrere erweiterte Module zur Verfügung: • Aktionen — Kategorie-, Marken- und Produktrabatte mit Anti-Stapelung. Siehe das Kapitel 'Aktionen & Sale' für Details. • Geschenkverpackung — optionale Geschenkverpackung als Checkout-Add-on. Siehe das Kapitel 'Geschenkverpackung' für Details. • Upsell & Cross-sell — intelligente Produktempfehlungen zur Umsatzsteigerung. Siehe das Kapitel 'Upsell & Cross-sell' für Details.

Die Produktdetailseite enthält jetzt Tabs mit detaillierten Produktinformationen: • Produktinformationen — mit 3 Unter-Tabs: – Spezifikationen: Schlüssel/Wert-Tabelle (Material, Typ, Saison usw.) – Zusammensetzung & Passform: visuelle Materialbalken, Passform-Indikator und Pflegehinweise – Beschreibung: ausführliche Produktbeschreibung • Lieferung & Rücksendung — 3 USP-Karten mit Lieferzeit, Versandkosten und Rückgaberecht Auf Mobilgeräten (<768px) werden die Tabs automatisch zu Akkordeons mit fließenden Animationen.

Pro Produkt kann eine Größentabelle hinzugefügt werden, die als Popup erscheint: 1. Produkt im Editor öffnen 2. Zum Tab 'Größentabelle' wechseln 3. Spaltenköpfe festlegen (z.B. EU, UK, US, CM) 4. Zeilen pro Größe hinzufügen Auf der Website erscheint ein 'Größenberatung'-Button neben der Größenauswahl.

Auf der Produktdetailseite werden Liefer- und Rücksendeinformationen in 3 übersichtlichen Karten angezeigt: • Lieferzeit — 'Heute bestellt, morgen geliefert' • Kostenloser Versand — Schwellenwert für kostenlosen Versand • Rückgaberecht — 'Kostenlose Rücksendung innerhalb von 30 Tagen'

Über der Schaltfläche 'In den Warenkorb' zeigt ein Countdown-Timer an, wie viel Zeit der Besucher hat, um heute für Lieferung morgen zu bestellen. • Countdown bis 16:00 Uhr (Annahmeschluss) • Nach 16:00: 'Jetzt bestellen für Lieferung übermorgen' • Der Timer zählt jede Sekunde herunter

Wenn der Besucher über die Schaltfläche 'In den Warenkorb' hinaus scrollt, erscheint eine kompakte Sticky-Leiste am oberen Bildschirmrand: • Vorschaubild + Produktname + Preis • 'In den Warenkorb'-Button immer sichtbar • Slide-in-Animation von oben

Produktbilder haben eine Zoom-Funktion für Details: • Desktop: Bewegen Sie die Maus über das Bild für eine 2-fach-Zoom-Linse • Mobil: Der native Pinch-to-Zoom des Geräts wird verwendet Keine zusätzliche Konfiguration erforderlich.