Kundenprojekt · E-Commerce

Hoydi28 Haselnüsse

Für Hoydi28, eine Haselnussmarke aus Giresun, haben wir den Onlineshop, ein Admin-Panel, das sich auf dem Smartphone installieren lässt, sowie die Anbindungen für Zahlung, Versand, E-Rechnung, E-Mail und Google dahinter entwickelt. Im Panel arbeitet das KI-Team von Collapssi: Es schreibt Blogbeiträge, übersetzt die Website in neue Sprachen, plant Schaufenster und Kampagnen und entwirft Antworten auf eingehende E-Mails. Shop und Panel sind eine einzige Anwendung; jede Seite wird bei jeder Veröffentlichung für Google vorab erzeugt.

  • JavaScript (Single-Page-App)
  • Supabase: PostgreSQL und Edge Functions
  • Netlify
  • Mit Playwright vorgerenderte Seiten
  • PWA und Web Push
  • iyzico
  • EDM E-Rechnung / E-Archiv
  • Yurtiçi Kargo und Sürat Kargo
  • Resend
  • Google Analytics 4, Search Console, Google Ads, Merchant Center
  • Google Places API
  • Claude API
  • OpenAI Images API
Startseite des Shops
Startseite des Shops
Sprachen
Türkisch, Englisch und neue Sprachen nach Zeitplan
Zahlung
Karte (iyzico), Überweisung
KI
Ein siebenköpfiges Collapssi-Team und ein Werbeassistent
Integrationen
Versand, E-Rechnung, Google Ads, Analytics, Search Console

Die Screenshots stammen aus einer lokalen Kopie der Website und des Admin-Panels. Kundennamen, Bestellungen, Unternehmen und alle Zahlen in den Panels sind Beispieldaten, nicht die tatsächlichen Umsätze oder Besucherzahlen des Shops. Kundennamen in den Google-Bewertungen sind als Initialen dargestellt.

01

Shop und Produktseiten

Der Shop funktioniert auf Smartphone und Computer gleichermaßen sorgfältig. Produkte, Kategorien und das Seitenlayout werden im Panel geändert; Preis- und Textänderungen erscheinen sofort auf der Website. Die Produktseite beantwortet die Fragen, die Kunden typischerweise haben, auf einem einzigen Bildschirm.

  • Shop auf Türkisch und Englisch; neue Sprachen werden nach einem automatischen Zeitplan freigeschaltet, und Besuchern wird eine Übersetzung in ihre eigene Sprache angeboten
  • Automatische Abzeichen: „Bestseller“ für die meistverkauften Produkte der letzten 60 Tage und „Oft angesehen“ für die meistbesuchten Produkte, jede Nacht aktualisiert
  • Allergenkarte: enthaltene Allergene, mögliche Spuren und wer das Produkt essen kann (glutenfrei, vegan usw.) als farbige Schlagworte
  • Ein Favoriten-Herz und ein Hinweis, wie viele Personen das Produkt favorisiert haben
  • Mengenauswahl direkt auf der Produktkarte; auf der Produktseite passt sich der Preis an Menge und Verpackung an, mit Hinweis bei Erreichen des Lagerbestands
  • Geschenkkörbe, deren Preis und Bestand sich aus den enthaltenen Produkten ergeben; Kunden können auch ihren eigenen Korb zusammenstellen
  • Geschenkkarten, Sortenwahl für Köme und eine Anfrage „Benachrichtigen, wenn wieder verfügbar“
  • Eine Kennzeichnung „nur Abholung am Busbahnhof“ für Produkte, die nicht per Kurier versendet werden können
Produktseite: Bestseller-Abzeichen, Favorit und Preis
Produktseite: Bestseller-Abzeichen, Favorit und Preis
Allergeninformationen und wer das Produkt essen kann
Allergeninformationen und wer das Produkt essen kann
Shop auf dem Smartphone
Shop auf dem Smartphone
02

Kundenkonten, Favoriten und ein Glücksrad

Mitglieder erleben auf der Website kleine Überraschungen. Kunden verfolgen ihre Bestellung Schritt für Schritt, erhalten eine E-Mail, wenn ein Favorit günstiger wird oder wieder vorrätig ist, und drehen am Rad für einen Rabatt.

  • Google-Anmeldung mit einem Tippen in der Ecke der Seite, ohne eine neue Seite zu öffnen, gefolgt von einer Begrüßung mit Emojis
  • Animierte Versandschritte mit Emojis: Bestellung eingegangen, in Vorbereitung, unterwegs (der Lkw fährt hin und her), zugestellt; mit Kurierereignissen und Sendungsverfolgungslink
  • Favoriten: Mitglieder, die eine bestimmte Anzahl von Produkten favorisieren, erhalten automatisch einen persönlichen Gutschein; eine E-Mail, wenn ein Favorit günstiger wird oder wieder vorrätig ist
  • Hoydi-Glücksrad: Der Server bestimmt das Ergebnis, und der Gutschein wird dem Konto gutgeschrieben
  • Hoydi Para: Punkte bei jeder Bestellung, Belohnungen für Bewertungen, Bezahlen mit Punkten
  • Gespeicherte Adressen und Rechnungsdaten; ein 6-stelliger E-Mail-Code bei vergessenem Passwort
Mein Konto: Versandschritte mit Emojis
Mein Konto: Versandschritte mit Emojis
Favoriten und die Belohnungsleiste
Favoriten und die Belohnungsleiste
Hoydi-Glücksrad
Hoydi-Glücksrad
03

Google-Bewertungen kommen von selbst

Die Google-Bewertungen der beiden Filialen werden jeden Morgen automatisch abgerufen und auf der Website in einem Laufband gezeigt. Kunden, deren Bestellung zugestellt wurde, werden höflich um eine Google-Bewertung gebeten.

  • Die Google-Unternehmensbewertungen der Filialen Merkez und Aksu werden jeden Morgen über die Places API aktualisiert; auch Bewertungsnote und Anzahl der Bewertungen sind live
  • Ein Bewertungs-Laufband mit Filialfilter
  • Mitglieder mit zugestellter Bestellung sehen einmalig das Fenster „Ist Ihre Bestellung angekommen?“; ein Tippen öffnet die Google-Bewertungsseite der Filiale
  • Es gibt keinen Gutschein dafür, da Google Belohnungen für Bewertungen verbietet; Produktbewertungen auf der Website bringen Hoydi Para
Google-Bewertungen in einem Laufband
Google-Bewertungen in einem Laufband
Bitte um eine Google-Bewertung nach der Zustellung
Bitte um eine Google-Bewertung nach der Zustellung
04

Zahlungs- und Bestellablauf

Bei Kartenzahlungen berechnet der Server den Betrag neu; weicht er vom im Browser angezeigten Betrag ab, wird die Zahlung nicht gestartet. Preise, Kampagnen, Gutscheine und Versand folgen einem einheitlichen Regelwerk.

  • Kartenzahlung über das iyzico-Zahlungsformular in einem Fenster direkt auf der Website; 3D Secure wird unterstützt
  • Nach der Zahlungsbestätigung wird die Bestellung „Neu“, und Hoydi Para sowie Gutscheine werden abgezogen; schließt der Kunde die Seite, prüft ein geplanter Auftrag das Zahlungsergebnis
  • Banküberweisung: Die Bankdaten werden auf der Checkout-Seite und nach der Bestellung angezeigt
  • Provinz und Bezirk der Lieferadresse werden aus einer Liste gewählt (81 Provinzen, 973 Bezirke)
  • Rechnungsdaten nach der Bestellung: privat oder geschäftlich; türkische Ausweis- und Steuernummern werden geprüft
  • Automatische E-Mails: Bestellung eingegangen, versendet (mit Sendungsverfolgungslink), zugestellt
Checkout-Seite
Checkout-Seite
05

Ein KI-Team im Panel: Collapssi

Im Collapssi-Bereich des Panels arbeiten sieben KI-Teammitglieder, die jede Stunde nach ihren Aufgaben für Hoydi28 sehen. Jedes hat eine Rolle, ein Maskottchen, dessen Stimmung sich ändert, und eine Sprechblase. Keines ändert etwas ohne Freigabe: Beiträge, Schaufenster, Kampagnen und E-Mail-Antworten warten auf die Freigabe des Shops.

  • ✍️ Elif (Content-Autorin): schreibt an den gewählten Tagen Blogbeiträge und kennt dabei die Produkte und früheren Beiträge; versieht einen Beitrag mit einer Warnung, wenn etwas gegen die Regeln verstößt
  • 🌍 Deniz (Übersetzer): übersetzt auf Türkisch eingegebene Produkt-, Blog- und Seitentexte ins Englische; schaltet neue Sprachen wie Deutsch, Russisch und Arabisch nach einem automatischen Zeitplan frei und veröffentlicht jede, sobald die Übersetzung fertig ist
  • 🎨 Arda (Bilddesigner): zeichnet zu jedem Blogbeitrag passende Bilder, die zwischen den Zwischenüberschriften platziert werden
  • 📐 Selin (Website-Designerin): schlägt Änderungen am Schaufenster auf Basis von Klicks und Verkäufen vor; vor besonderen Tagen bereitet sie Banner, Slide und Produktliste für diesen Tag vor, die vorab angesehen werden können, nach Freigabe am Tag selbst online gehen und danach wieder verschwinden
  • 📅 Emre (Kampagnenplaner): plant die kommenden Wochen: Gutscheine, zeitlich begrenzte Rabatte, E-Mails an Abonnenten, Blogthemen für Elif, Schaufensteranfragen für Selin; jeder Punkt wird einzeln freigegeben
  • ✉️ Zeynep (E-Mail-Assistentin): liest jede eingehende E-Mail zusammen mit den Bestellungen und dem Firmeneintrag des Absenders, recherchiert Unternehmen im Web und entwirft eine Antwort; schlägt Nachfass-E-Mails an Großhandelsinteressenten vor
  • 🧭 Kerem (Teamleiter): Der Shop chattet mit ihm; Kerem lässt das passende Teammitglied die Korrektur vornehmen und macht aus „ab jetzt“-Wünschen dauerhafte Regeln
  • Die Grundregeln sind unveränderlich: keine erfundenen Fakten, keine Gesundheitsversprechen, keine Preise; jedes Teammitglied hat ein monatliches Arbeitskontingent
Chat mit Teamleiter Kerem und dauerhafte Regeln
Chat mit Teamleiter Kerem und dauerhafte Regeln
Elif, Deniz und Arda
Elif, Deniz und Arda
Selin, Emre und Zeynep
Selin, Emre und Zeynep
Ein Schaufenster für einen besonderen Tag und ein Kampagnenplan, die auf Freigabe warten
Ein Schaufenster für einen besonderen Tag und ein Kampagnenplan, die auf Freigabe warten
06

Admin-Panel

Der Shopbetreiber steuert das gesamte Geschäft über ein einziges Panel. Es lässt sich wie eine App auf dem Smartphone installieren; neue Bestellungen lösen eine Benachrichtigung aus und das App-Symbol zeigt die Zahl offener Bestellungen.

  • Dashboard: Umsatz des Tages, sich füllende Zielbalken, Status des Collapssi-Teams, Umsätze der letzten 14 Tage, Aufteilung nach Kategorien
  • Bestellungen: standardmäßig die heutigen Bestellungen, Tag-für-Tag-Navigation, Status- und Rechnungsfilter; Bestellungen aus Anzeigen und Erstkunden sind markiert
  • Auswahl und Sammelaktionen: ausgewählte Bestellungen drucken, abrechnen oder ihren Status ändern
  • A5-Versandschein (auch A4 und ein 10×15-Etikettendrucker sind wählbar); gedruckte Bestellungen wechseln von selbst auf „In Vorbereitung“, Geschenkkarten werden als eigene Karte gedruckt
  • Panel-Benutzer und Rollen; ein Code per E-Mail bei der Anmeldung von einem neuen Gerät
  • Seitenbaukasten: Blöcke hinzufügen und anordnen, mit Vorschau für Desktop, Tablet und Smartphone
  • Dialoge innerhalb der Website statt Bestätigungsfenstern des Browsers; auf dem Smartphone eine obere Leiste, ein von links einfahrendes Menü und eine Tableiste unten
Admin-Dashboard
Admin-Dashboard
Bestellungen
Bestellungen
Admin-Panel auf dem Smartphone
Admin-Panel auf dem Smartphone
07

Ziele, Analytics und Search Console

Verkaufsziele füllen sich wie ein Kontingent, und die Daten von Google fließen ins Panel. Oben in den Berichten kommentiert das Collapssi-Maskottchen die Lage: Es jubelt, wenn es gut läuft, schaut überrascht, wenn es nachlässt, und schlägt vor, was zu tun ist.

  • Ziele: Die Verkaufszeiträume der alten Website dienen als Referenz; Balken für Umsatz, Bestellungen und verkaufte Stückzahl füllen sich, mit einer Markierung „hier sollten wir heute sein“ und einer Prognose zum Periodenende
  • Besucher (Google Analytics 4): Besuche, Umwandlung in Bestellungen, Kanäle, Geräte, Städte, meistbesuchte Produkte
  • Google-Suche (Search Console): Klicks, Impressionen, Klickrate, durchschnittliche Position, Suchanfragen und Seiten
  • Bericht zu Umsatz und Ausgaben, WhatsApp-Klicks
  • Wöchentliche Bericht-E-Mail: jeden Freitagmorgen eine Zusammenfassung mit Diagrammen (Umsatz, Anzeigen, neue Mitglieder, Bestseller, Aufgaben), erstellt von Collapssi
Ziele und das Collapssi-Maskottchen
Ziele und das Collapssi-Maskottchen
Besucher (Google Analytics)
Besucher (Google Analytics)
Google-Suche (Search Console)
Google-Suche (Search Console)
08

Google Ads und ein KI-Werbeassistent

Die Google-Ads-Daten gelangen stündlich über ein Skript im Konto ins Panel. Der KI-Assistent schreibt täglich eine Zusammenfassung und erstellt Vorschläge; im Werbekonto ändert sich nichts ohne Freigabe durch den Shop.

  • Berichte nach Kampagne, Anzeigengruppe, Keyword, Suchbegriff und bei Shopping-Anzeigen nach Produkt
  • Bestellungen aus Anzeigen werden gesondert gezählt und den Ausgaben gegenübergestellt
  • Vorschläge: auszuschließende Keywords, neue Keywords, Budgets, maximaler Klickpreis, neue Anzeigentexte; freigegebene Aufgaben werden beim nächsten Lauf des Skripts umgesetzt
  • Sicherheitsgrenzen: Das tägliche Gesamtbudget und der Gebotsbereich werden an drei getrennten Stellen geprüft
  • Das Skript aktualisiert sich selbst: Ein einmal ins Google-Ads-Konto eingefügter Lader lädt den Hauptcode von der Website
  • Der Produkt-Feed für das Merchant Center wird bei jeder Veröffentlichung aktualisiert; Conversion-Tag und Google-Einwilligungsmodus sind eingerichtet
KI-Werbeassistent und Vorschläge, die auf Freigabe warten
KI-Werbeassistent und Vorschläge, die auf Freigabe warten
09

E-Mail und abgebrochene Warenkörbe

Das Firmenpostfach befindet sich im Panel. Automatische E-Mails tragen das Design der Marke, und Kunden, die Produkte im Warenkorb gelassen haben, lassen sich mit einem Tippen erinnern.

  • Posteingang: Konversationen, Sterne, Archiv, Labels, Zurückstellen, Entwürfe und geplanter Versand; mehrere Firmenadressen
  • Abgebrochene Warenkörbe: Besucher, die Produkte hinzugefügt, aber nicht bestellt haben, und die am häufigsten zurückgelassenen Produkte; Erinnerungen per E-Mail und WhatsApp
  • Kampagnen-E-Mails an Abonnenten: Anmeldung per Einwilligung, ein Gutscheinfeld und ein Abmeldelink in jeder E-Mail
  • E-Mails zu besonderen Tagen: An Tagen wie Muttertag, religiösen Feiertagen und Neujahr gehen automatisch eine Gruß-E-Mail und ein Gutschein für diesen Tag hinaus
  • E-Mails zu Bestellung, Versand und Zustellung; Preis- und Bestandsbenachrichtigungen für Lieblingsprodukte
Abgebrochene Warenkörbe und Erinnerungen
Abgebrochene Warenkörbe und Erinnerungen
10

Großhandelskunden finden

Cafés, Hotels, Nussläden und Unternehmen, die Firmengeschenke kaufen, werden über Google Maps gefunden und im Panel wie eine Vertriebspipeline betreut.

  • Unternehmen finden: Suche in Google Maps nach Art und Stadt; bei Unternehmen mit Website wird die E-Mail-Adresse auf der Website gefunden
  • Eine Vorstellungsserie aus drei E-Mails je Unternehmensart: an Werktagen, mit Tageslimit und Abmeldelink in jeder E-Mail; die Serie endet, sobald das Unternehmen antwortet
  • Unternehmenskarte: Anrufe, Muster, Angebote und Bestellungen bringen die Phase voran; der gesamte Verlauf auf einem Bildschirm
  • Ankündigungen: neue Produkte und Kampagnen mit Produktkarten an Unternehmen weitergeben
  • Eine feste Großhandelspreisliste für alle, druckfertig; Großhandelsanfragen von der Website landen automatisch in der Unternehmensliste
Großhandel: Unternehmen und E-Mail-Serien
Großhandel: Unternehmen und E-Mail-Serien
11

Versand, E-Rechnung und weitere Anbindungen

Die Anbindungen laufen in serverseitigen Funktionen; geheime Schlüssel gelangen nie in den Browser. Rechnungen und Sendungsanmeldungen werden von der Bestellkarte aus erstellt, ihr Status aktualisiert sich von selbst.

  • Anbindung an Yurtiçi Kargo und Sürat Kargo bereit: Sendungsanmeldung mit einem Tippen, ein Code-128-Referenzbarcode auf dem Versandschein, Statusabfrage alle zwei Stunden
  • E-Rechnung und E-Archiv (EDM Bilişim): E-Rechnung, wenn der Käufer dafür registriert ist, sonst E-Archiv; Rechnungen für alle aufgelisteten Bestellungen lassen sich in einem Schritt ausstellen
  • Rabatte aus Gutscheinen, Kampagnen und Hoydi Para werden anteilig auf die Rechnungspositionen verteilt
  • Benachrichtigungen über neue Bestellungen per Web Push; das App-Symbol zeigt die Zahl der offenen Bestellungen
  • Google-Anmeldung; Anmeldung mit Apple bereit
A5-Versandschein mit dem Referenzbarcode des Kuriers
A5-Versandschein mit dem Referenzbarcode des Kuriers

Planen Sie ein ähnliches Projekt?

Erzählen Sie uns, was Sie brauchen; gemeinsam legen wir Umfang, Zeitplan und Kosten fest. Das Erstgespräch ist kostenlos.

Erzählen Sie uns von Ihrem Projekt