Design-Anpassung

Dieser umfassende Leitfaden erklärt, wie Sie das Erscheinungsbild Ihres FEL AI Product Advisor perfekt an das Design und die Markenidentität Ihres Shops anpassen können.

Überblick

Der FEL AI Product Advisor bietet 6 professionelle Chat-Themes, die für verschiedene Branchen und Markenidentitäten entwickelt wurden. Jedes Theme kann direkt in der CMS-Element-Konfiguration ausgewählt werden, ohne dass Code erforderlich ist.

Keine Programmierung erforderlich

Alle Themes können über die CMS-Element-Einstellungen in der Shopware-Administration angewendet werden. Kein technisches Wissen erforderlich!

---

Theme-Auswahl

So wählen Sie ein Theme aus

1. Navigieren Sie zu Inhalte → Erlebniswelten
2. Bearbeiten Sie eine Seite mit dem AI Product Advisor CMS-Element
3. Klicken Sie auf das Chatbot-Element
4. Gehen Sie zum Tab Design-Einstellungen
5. Wählen Sie Ihr gewünschtes Theme aus dem Dropdown Chat-Theme

---

Verfügbare Chat-Themes

1. Standard (Anpassbar)

Perfekt für: Universelle Anwendung mit individuellem Branding

Hauptmerkmale:

• ✨ Vollständig anpassbare Primärfarbe über das Feld Chat-Theme-Farbe
• 🎨 Passt sich an Ihre Markenfarben an (Hex-Farbcodes)
• 🔲 Optionale Umschaltung für abgerundete Ecken
• 🛠️ Flexibelstes Theme für individuelles Branding

Anwendungsfälle:

• Shops mit etablierten Markenfarben
• Individuelle Corporate-Identity-Anforderungen
• Bedarf für präzise Farbabstimmung

Konfiguration:

• Setzen Sie Chat-Theme: "Standard (Anpassbar)"
• Setzen Sie Chat-Theme-Farbe: Ihre Markenfarbe (z.B. #3b82f6)
• Schalten Sie Runde Ecken nach Wunsch um

Branding-Tipp

Verwenden Sie die primäre Markenfarbe Ihres Shops im Feld Chat-Theme-Farbe für eine nahtlose Integration!

---

2. Clean (2025 Modern Advisor)

Perfekt für: Moderne E-Commerce- und professionelle Shops

Hauptmerkmale:

• 🎯 Klare Linien und minimalistisches Design
• 💼 Professionelles, geschäftsfreundliches Erscheinungsbild
• ✨ Sanfte Animationen und Übergänge
• 📱 Optimiert für Produktpräsentation

Design-Merkmale:

• Helle, luftige Benutzeroberfläche
• Moderne Typografie
• Dezente Schatten und Abstände
• Fokus auf Lesbarkeit

Empfohlen für:

• Modeshops
• Elektronikgeschäfte
• Premium-Produkt-Händler
• B2C E-Commerce

---

3. Minimal (Ultra-clean SaaS)

Perfekt für: Minimalistische Design-Philosophie

Hauptmerkmale:

• ⚪ Schwarz-Weiß-Farbschema
• 📝 Content-first-Ansatz
• ⚡ Sehr schnell und performant
• 🎯 Keine visuellen Ablenkungen

Design-Merkmale:

• Hoher Kontrast für Lesbarkeit
• Vereinfachte UI-Elemente
• Maximaler Fokus auf Konversation
• Saubere, aufgeräumte Oberfläche

Empfohlen für:

• B2B-Plattformen
• Software- und SaaS-Produkte
• Technische Produktkataloge
• Professionelle Dienstleistungen

---

4. Glass (Modern Glassmorphism)

Perfekt für: Moderne, Premium-Markenerlebnisse

Hauptmerkmale:

• 🪟 Milchglas-Effekt mit Backdrop-Blur
• 💎 Halbtransparente Elemente
• ✨ Moderne iOS-inspirierte Ästhetik
• 🌈 Elegante visuelle Tiefe

Design-Merkmale:

• Glassmorphism-Design-Trend
• Dezente Transparenzeffekte
• Schwebende UI-Elemente
• Zeitgemäßes, Premium-Gefühl

Empfohlen für:

• Lifestyle-Marken
• Design-fokussierte Produkte
• Premium-Konsumgüter
• Moderne Mode-Boutiquen

---

5. Dark (Premium Night Mode)

Perfekt für: Dark-Mode-Präferenz und Premium-Gefühl

Hauptmerkmale:

• 🌙 Elegante dunkle Farbpalette
• 👁️ Augenfreundlich für längere Nutzung
• 💎 Premium, raffiniertes Erscheinungsbild
• 🎮 Moderne Tech-Ästhetik

Design-Merkmale:

• Dunkle Hintergründe mit hellem Text
• Reduzierte Augenbelastung
• Premium-Gold/Blau-Akzente
• High-End visueller Eindruck

Empfohlen für:

• Gaming-Produkte
• Unterhaltungselektronik
• Tech-Gadgets
• Abend-/Nachtshopping-Erlebnisse

---

6. Space (Neon Futuristic)

Perfekt für: Mutige, futuristische Markenidentitäten

Hauptmerkmale:

• 🌈 Lebendige Neon-Verläufe (Blau/Pink/Lila)
• ✨ Leuchteffekte und Animationen
• 🚀 Science-Fiction-inspirierte Ästhetik
• 🎮 Hochenergetischer visueller Stil

Design-Merkmale:

• Neon-Farbverläufe
• Cyberpunk-inspiriertes Design
• Animierte Leuchteffekte
• Futuristisches, mutiges Erscheinungsbild

Empfohlen für:

• Gaming-Peripherie
• Tech-Gadgets und Innovationen
• Jugendorientierte Produkte
• Trendige, zukunftsweisende Marken

---

Theme-Vergleichstabelle

Theme	Komplexität	Leistung	Am besten für	Anpassbare Farbe
Standard	Mittel	⭐⭐⭐⭐⭐ Schnell	Jeder Shop-Typ	✅ Ja
Clean	Einfach	⭐⭐⭐⭐⭐ Schnell	Moderner E-Commerce	❌ Nein
Minimal	Sehr einfach	⭐⭐⭐⭐⭐ Am schnellsten	B2B, Tech	❌ Nein
Glass	Komplex	⭐⭐⭐⭐ Gut	Premium-Marken	❌ Nein
Dark	Mittel	⭐⭐⭐⭐ Gut	Gaming, Tech	❌ Nein
Space	Komplex	⭐⭐⭐ Moderat	Gaming, Jugend	❌ Nein

Theme-Wechsel

Sie können Themes jederzeit in den CMS-Element-Einstellungen ändern. Änderungen sind sofort im Frontend sichtbar.

---

Zusätzliche Design-Einstellungen

Chat-Fenster-Höhe

Konfigurieren Sie die Höhe des Chat-Fensters in Pixeln:

Einstellung	Standard	Beschreibung
Chat-Fenster Höhe	420	Höhe in Pixeln (min: 300, empfohlen: 400-600)

Richtlinien:

• Klein (300-400px): Kompakt, platzsparend
• Mittel (420-500px): Ausgewogen, empfohlen
• Groß (600+px): Immersiv, detaillierte Gespräche

Runde Ecken (nur Standard-Theme)

Einstellung	Effekt
Runde Ecken	Aktiviert abgerundete Ränder für ein weicheres Erscheinungsbild

Nur verfügbar mit dem Standard (Anpassbar) Theme.

Avatar-Upload

Alle Themes unterstützen benutzerdefinierte Avatar-Bilder:

1. In den CMS-Element-Einstellungen
2. Laden Sie ein Bild im Feld Avatar hoch
3. Empfohlene Spezifikationen:
   • Größe: 200x200 Pixel
   • Format: JPG oder PNG
   • Stil: Professionell, freundliches Gesicht

Avatar-Richtlinien

Ein freundlicher, professioneller Avatar erhöht Vertrauen und Engagement. Verwenden Sie ein menschliches Gesicht oder Maskottchen für beste Ergebnisse.

---

Grundlegende CMS-Element-Einstellungen

Diese Einstellungen sind in der CMS-Element-Konfiguration verfügbar:

Einstellung	Beschreibung
Berater Titel	Titel, der im Chat-Header angezeigt wird
Berater Name	Name des KI-Assistenten
Begrüßungsnachricht	Willkommensnachricht, die Kunden angezeigt wird
Avatar	Profilbild für den Assistenten

---

Produktkarten-Anzeige

Alle Themes zeigen Produkte automatisch schön im Chat-Gespräch an.

Produktkarten-Elemente

Jede Produktkarte enthält:

• 🖼️ Produktbild: Hochwertiges Miniaturbild
• 📝 Produkttitel: Name mit Hersteller
• 💰 Preis: Formatiert mit Währung
• 📄 Kurzbeschreibung: Auf konfigurierte Länge gekürzt
• 🔗 "Details anzeigen"-Button: Direkter Link zur Produktseite

Produktanzeige-Limits

Steuern Sie, wie viele Produkte direkt im Chat erscheinen:

Konfiguration	Ort	Standard
Max. Produkte im Chat	Globale Plugin-Einstellungen	4

Verhalten:

• Wenn KI ≤ 4 Produkte empfiehlt → Alle direkt angezeigt
• Wenn KI > 4 Produkte empfiehlt → Erste 4 gezeigt + "Alle Produkte anzeigen"-Button

Produktanzeige-Optimierung

Die Begrenzung auf 4 Produkte verhindert, dass Kunden überfordert werden und hält die Konversation fokussiert. Kunden können immer auf "Alle anzeigen" klicken, um mehr zu sehen.

---

Responsive Design

Alle Themes sind vollständig responsive und passen sich automatisch an:

• 🖥️ Desktop: Vollbreites Chat-Fenster
• 📱 Tablet: Optimiertes Layout
• 📱 Mobil: Vollbild-Übernahme für optimale Mobile-UX

Keine zusätzliche Konfiguration erforderlich!

---

Theme-Auswahl Best Practices

Themes an Ihre Marke anpassen

Berücksichtigen Sie Ihre Branche:

Branche	Empfohlenes Theme	Grund
Mode/Bekleidung	Clean, Glass	Modern, visueller Fokus
Elektronik/Tech	Dark, Minimal	Professionell, technisch versiert
Gaming	Space, Dark	Mutig, energiegeladen
B2B/Professionell	Minimal, Clean	Seriös, professionell
Luxus/Premium	Glass, Dark	Raffiniert, hochwertig
Allgemeiner Einzelhandel	Standard, Clean	Universal, anpassbar

A/B-Testing von Themes

Testen Sie verschiedene Themes, um herauszufinden, welches am besten funktioniert:

1. Beginnen Sie mit Clean oder Standard für breite Anziehungskraft
2. Überwachen Sie Kundenengagement und Konversionsraten
3. Testen Sie Glass oder Dark für Premium-Positionierung
4. Erwägen Sie Space für jüngere, technisch versierte Zielgruppen

---

Migration von Version 1.x

Wenn Sie von Version 1.x auf 2.0.0 aktualisieren:

Automatische Änderungen:

• "Legacy"-Theme → Automatisch konvertiert zu "Standard (Anpassbar)"
• Ihre benutzerdefinierte Theme-Farbe bleibt erhalten
• Keine Aktion erforderlich!

Manuelle Schritte nach dem Update:

# Cache leeren
bin/console cache:clear

# Administration neu erstellen
bin/build-administration.sh

# Storefront neu erstellen
bin/build-storefront.sh

Keine Breaking Changes

Alle bestehenden Chatbot-Konfigurationen bleiben nach dem Update auf 2.0.0 voll funktionsfähig. Ihre Theme-Farb-Einstellungen werden automatisch migriert!

---

Design-Tipps & Best Practices

1. Avatar-Auswahl

Tun:

• ✅ Verwenden Sie ein freundliches, professionelles Gesicht
• ✅ 200x200 Pixel, JPG oder PNG
• ✅ Klare, gut beleuchtete Fotos
• ✅ Lächelnder, zugänglicher Ausdruck

Nicht tun:

• ❌ Niedrigauflösende oder verpixelte Bilder
• ❌ Firmenlogos (außer Marken-Maskottchen)
• ❌ Übermäßig formelle oder ernste Ausdrücke

2. Chat-Position & Größe

Empfohlene Platzierung:

• Seitenleiste auf Kategorieseiten
• Dedizierter Bereich auf der Startseite
• Unter Produktlisten
• Vermeiden Sie Container < 300px Breite

Chat-Fenster-Höhe:

• Kompakt: 350-400px (schnelle Fragen)
• Standard: 420-500px (ausgewogen, empfohlen)
• Immersiv: 600+px (detaillierte Beratungen)

3. Farbharmonie (Standard-Theme)

Verwenden Sie Farben, die Ihren Shop ergänzen:

Primäre Markenfarbe: #3b82f6
→ Chat-Theme-Farbe: #3b82f6

Funktioniert mit:
- Blauen Themes
- Modernen, vertrauenswürdigen Marken
- Tech-Produkten

4. Theme-Konsistenz

Stellen Sie sicher, dass der Chatbot zu Ihrem gesamten Shop-Design passt:

• Dunkles Shop-Theme → Verwenden Sie dunkles Chatbot-Theme
• Minimales Shop-Design → Verwenden Sie minimales Chatbot-Theme
• Farbenfrohe Marke → Verwenden Sie Standard mit Markenfarbe
• Premium-Boutique → Verwenden Sie Glass oder Clean Theme

---

Fehlerbehebung bei Design-Problemen

Theme wird nicht angewendet

Lösungen:

1. ✅ Cache leeren: bin/console cache:clear
2. ✅ Storefront neu erstellen: bin/build-storefront.sh
3. ✅ Browser hart aktualisieren (Strg + F5)
4. ✅ Überprüfen Sie, ob Theme in CMS-Element-Einstellungen ausgewählt ist

Benutzerdefinierte Farbe funktioniert nicht

Überprüfen:

1. ✅ Standard (Anpassbar) Theme ausgewählt?
2. ✅ Hex-Farbformat korrekt? (z.B. #3b82f6)
3. ✅ Farbfeld nicht leer?
4. ✅ Storefront nach Änderung kompiliert?

Chat-Fenster zu klein/groß

Anpassen:

• Ändern Sie den Wert Chat-Fenster Höhe im CMS-Element
• Empfohlener Bereich: 400-600px
• Testen Sie auf mobilen Geräten nach Änderungen

---

Nächste Schritte

Nach der Anpassung Ihres Chatbot-Designs:

1. Best Practices - Optimieren Sie für Kundenengagement
2. Produktberater erstellen - Stellen Sie Ihren designten Chatbot bereit
3. Integrationsleitfaden - Strategische Platzierung auf Ihren Seiten
4. Fehlerbehebung - Lösen Sie Anzeigeprobleme

Design abgeschlossen!

Ihr Chatbot passt jetzt perfekt zu Ihrer Markenidentität. Bereit, ihn in Ihrem Shop einzusetzen!