Design Customization
This comprehensive guide explains how to customize the appearance of your FEL AI Product Advisor to perfectly match your store's design and branding.
Overview
The FEL AI Product Advisor offers 6 professional chat themes designed for different industries and brand identities. Each theme can be selected directly in the CMS element configuration without any coding required.
All themes can be applied through the CMS element settings in the Shopware Administration. No technical knowledge needed!
Theme Selection
How to Choose a Theme
- Navigate to Content → Shopping Experiences
- Edit a page with the AI Product Advisor CMS element
- Click on the chatbot element
- Go to the Design Settings tab
- Select your desired theme from the Chat-Theme dropdown
Available Chat Themes
1. Standard (Anpassbar)
Perfect for: Universal application with custom branding
Key Features:
- ✨ Fully customizable primary color via Chat-Theme-Farbe field
- 🎨 Adapts to your brand colors (Hex color codes)
- 🔲 Optional rounded corners toggle
- 🛠️ Most flexible theme for custom branding
Use Cases:
- Shops with established brand colors
- Custom corporate identity requirements
- Need for precise color matching
Configuration:
- Set Chat-Theme: "Standard (Anpassbar)"
- Set Chat-Theme-Farbe: Your brand color (e.g.,
#3b82f6) - Toggle Runde Ecken as desired
Use your shop's primary brand color in the Chat-Theme-Farbe field for seamless integration!
2. Clean (2025 Modern Advisor)
Perfect for: Modern e-commerce and professional shops
Key Features:
- 🎯 Clean lines and minimalist design
- 💼 Professional, business-friendly appearance
- ✨ Smooth animations and transitions
- 📱 Optimized for product presentation
Design Characteristics:
- Light, airy interface
- Modern typography
- Subtle shadows and spacing
- Focus on readability
Recommended for:
- Fashion stores
- Electronics shops
- Premium product retailers
- B2C e-commerce
3. Minimal (Ultra-clean SaaS)
Perfect for: Minimalist design philosophy
Key Features:
- ⚪ Black and white color scheme
- 📝 Content-first approach
- ⚡ Very fast and performant
- 🎯 Zero visual distractions
Design Characteristics:
- High contrast for readability
- Simplified UI elements
- Maximum focus on conversation
- Clean, uncluttered interface
Recommended for:
- B2B platforms
- Software and SaaS products
- Technical product catalogs
- Professional services
4. Glass (Modern Glassmorphism)
Perfect for: Modern, premium brand experiences
Key Features:
- 🪟 Frosted glass effect with backdrop blur
- 💎 Semi-transparent elements
- ✨ Modern iOS-inspired aesthetic
- 🌈 Elegant visual depth
Design Characteristics:
- Glassmorphism design trend
- Subtle transparency effects
- Floating UI elements
- Contemporary, premium feel
Recommended for:
- Lifestyle brands
- Design-focused products
- Premium consumer goods
- Modern fashion boutiques
5. Dark (Premium Night Mode)
Perfect for: Dark mode preference and premium feel
Key Features:
- 🌙 Elegant dark color palette
- 👁️ Eye-friendly for extended use
- 💎 Premium, sophisticated appearance
- 🎮 Modern tech aesthetic
Design Characteristics:
- Dark backgrounds with light text
- Reduced eye strain
- Premium gold/blue accents
- High-end visual impression
Recommended for:
- Gaming products
- Consumer electronics
- Tech gadgets
- Evening/nighttime shopping experiences
6. Space (Neon Futuristic)
Perfect for: Bold, futuristic brand identities
Key Features:
- 🌈 Vibrant neon gradients (blue/pink/purple)
- ✨ Glowing effects and animations
- 🚀 Sci-fi inspired aesthetic
- 🎮 High-energy visual style
Design Characteristics:
- Neon color gradients
- Cyberpunk-inspired design
- Animated glow effects
- Futuristic, bold appearance
Recommended for:
- Gaming peripherals
- Tech gadgets and innovations
- Youth-oriented products
- Trendy, cutting-edge brands
Theme Comparison Table
| Theme | Complexity | Performance | Best For | Customizable Color |
|---|---|---|---|---|
| Standard | Medium | ⭐⭐⭐⭐⭐ Fast | Any shop type | ✅ Yes |
| Clean | Simple | ⭐⭐⭐⭐⭐ Fast | Modern e-commerce | ❌ No |
| Minimal | Very Simple | ⭐⭐⭐⭐⭐ Fastest | B2B, Tech | ❌ No |
| Glass | Complex | ⭐⭐⭐⭐ Good | Premium brands | ❌ No |
| Dark | Medium | ⭐⭐⭐⭐ Good | Gaming, Tech | ❌ No |
| Space | Complex | ⭐⭐⭐ Moderate | Gaming, Youth | ❌ No |
You can change themes at any time in the CMS element settings. Changes are immediately visible on the frontend.
Additional Design Settings
Chat Window Height
Configure the height of the chat window in pixels:
| Setting | Default | Description |
|---|---|---|
| Chat-Fenster Höhe | 420 | Height in pixels (min: 300, recommended: 400-600) |
Guidelines:
- Small (300-400px): Compact, space-saving
- Medium (420-500px): Balanced, recommended
- Large (600+px): Immersive, detailed conversations
Rounded Corners (Standard Theme Only)
| Setting | Effect |
|---|---|
| Runde Ecken | Enable rounded borders for a softer appearance |
Only available with the Standard (Anpassbar) theme.
Avatar Upload
All themes support custom avatar images:
- In the CMS element settings
- Upload an image in the Avatar field
- Recommended specs:
- Size: 200x200 pixels
- Format: JPG or PNG
- Style: Professional, friendly face
A friendly, professional avatar increases trust and engagement. Use a human face or brand mascot for best results.
Basic CMS Element Settings
These settings are available in the CMS element configuration:
| Setting | Description |
|---|---|
| Berater Titel | Title displayed in the chat header |
| Berater Name | Name of the AI assistant |
| Begrüßungsnachricht | Welcome message shown to customers |
| Avatar | Profile picture for the assistant |
Product Card Display
All themes automatically display products beautifully within the chat conversation.
Product Card Elements
Each product card includes:
- 🖼️ Product Image: High-quality thumbnail
- 📝 Product Title: Name with manufacturer
- 💰 Price: Formatted with currency
- 📄 Short Description: Truncated to configured length
- 🔗 "Details anzeigen" Button: Direct link to product page
Product Display Limits
Control how many products appear directly in the chat:
| Configuration | Location | Default |
|---|---|---|
| Max. Produkte im Chat | Global Plugin Settings | 4 |
Behavior:
- If AI recommends ≤ 4 products → All displayed directly
- If AI recommends > 4 products → First 4 shown + "Alle Produkte anzeigen" button
Limiting to 4 products prevents overwhelming customers and keeps the conversation focused. Customers can always click "Show All" to see more.
Responsive Design
All themes are fully responsive and automatically adapt to:
- 🖥️ Desktop: Full-width chat window
- 📱 Tablet: Optimized layout
- 📱 Mobile: Full-screen takeover for optimal mobile UX
No additional configuration required!
Theme Selection Best Practices
Matching Themes to Your Brand
Consider your industry:
| Industry | Recommended Theme | Reason |
|---|---|---|
| Fashion/Apparel | Clean, Glass | Modern, visual focus |
| Electronics/Tech | Dark, Minimal | Professional, tech-savvy |
| Gaming | Space, Dark | Bold, energetic |
| B2B/Professional | Minimal, Clean | Serious, professional |
| Luxury/Premium | Glass, Dark | Sophisticated, high-end |
| General Retail | Standard, Clean | Universal, adaptable |
A/B Testing Themes
Try different themes to see which performs best:
- Start with Clean or Standard for broad appeal
- Monitor customer engagement and conversion rates
- Test Glass or Dark for premium positioning
- Consider Space for younger, tech-savvy audiences
Migration from Version 1.x
If you're upgrading from version 1.x to 2.0.0:
Automatic Changes:
- "Legacy" theme → Automatically converted to "Standard (Anpassbar)"
- Your custom theme color is preserved
- No action required!
Manual Steps After Update:
# Clear cache
bin/console cache:clear
# Rebuild administration
bin/build-administration.sh
# Rebuild storefront
bin/build-storefront.sh
All existing chatbot configurations remain fully functional after the update to 2.0.0. Your theme color settings are automatically migrated!
Design Tips & Best Practices
1. Avatar Selection
Do:
- ✅ Use a friendly, professional face
- ✅ 200x200 pixels, JPG or PNG
- ✅ Clear, well-lit photos
- ✅ Smiling, approachable expression
Don't:
- ❌ Low-resolution or pixelated images
- ❌ Corporate logos (unless brand mascot)
- ❌ Overly formal or serious expressions
2. Chat Position & Size
Recommended Placement:
- Sidebar on category pages
- Dedicated section on homepage
- Below product listings
- Avoid containers < 300px width
Chat Window Height:
- Compact: 350-400px (quick questions)
- Standard: 420-500px (balanced, recommended)
- Immersive: 600+px (detailed consultations)
3. Color Harmony (Standard Theme)
Use colors that complement your shop:
Primary Brand Color: #3b82f6
→ Chat Theme Color: #3b82f6
Works with:
- Blue themes
- Modern, trustworthy brands
- Tech products
4. Theme Consistency
Ensure the chatbot matches your overall shop design:
- Dark Shop Theme → Use Dark chatbot theme
- Minimal Shop Design → Use Minimal chatbot theme
- Colorful Brand → Use Standard with brand color
- Premium Boutique → Use Glass or Clean theme
Troubleshooting Design Issues
Theme Not Applying
Solutions:
- ✅ Clear cache:
bin/console cache:clear - ✅ Rebuild storefront:
bin/build-storefront.sh - ✅ Hard refresh browser (Ctrl + F5)
- ✅ Verify theme selected in CMS element settings
Custom Color Not Working
Check:
- ✅ Standard (Anpassbar) theme selected?
- ✅ Hex color format correct? (e.g.,
#3b82f6) - ✅ Color field not empty?
- ✅ Storefront compiled after change?
Chat Window Too Small/Large
Adjust:
- Change Chat-Fenster Höhe value in CMS element
- Recommended range: 400-600px
- Test on mobile devices after changes
Next Steps
After customizing your chatbot design:
- Best Practices - Optimize for customer engagement
- Creating a Product Advisor - Deploy your designed chatbot
- Integration Guide - Strategic placement on your pages
- Troubleshooting - Solve any display issues
Your chatbot now perfectly matches your brand identity. Ready to deploy it to your store!