Design Customization
This page explains how to customize the appearance of your FelAIProductAdvisor to match your store's design and branding.
Basic Customization Options
The FelAIProductAdvisor CMS element provides several built-in options for customizing the appearance of the chatbot.
Available Settings in the CMS Element
| Setting | Description |
|---|---|
| Theme Color | The primary color used for the chat header, buttons, and accents |
| Button Position | Where the chat button appears (bottom-right, bottom-left, etc.) |
| Icon | The icon displayed on the chat button |
| Size and Spacing | Adjust the size and spacing of the chat window |
Advanced CSS Customization
For more extensive customization, you can add custom CSS rules to your theme to override the default styles of the product advisor.
CSS Variables
The FelAIProductAdvisor uses CSS variables that you can override to customize its appearance:
:root {
/* Primary colors */
--fel-chatbot-primary-color: #3f51b5;
--fel-chatbot-text-color: #333333;
--fel-chatbot-background-color: #ffffff;
/* Chat window */
--fel-chatbot-border-radius: 8px;
--fel-chatbot-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
--fel-chatbot-width: 350px;
--fel-chatbot-height: 500px;
/* Header */
--fel-chatbot-header-height: 50px;
--fel-chatbot-header-background: var(--fel-chatbot-primary-color);
--fel-chatbot-header-text-color: #ffffff;
/* Messages */
--fel-chatbot-user-message-background: #e6f2ff;
--fel-chatbot-user-message-color: #333333;
--fel-chatbot-bot-message-background: #f5f5f5;
--fel-chatbot-bot-message-color: #333333;
--fel-chatbot-message-border-radius: 18px;
/* Product cards */
--fel-chatbot-product-card-background: #ffffff;
--fel-chatbot-product-card-border: 1px solid #e0e0e0;
--fel-chatbot-product-card-border-radius: 8px;
/* Input area */
--fel-chatbot-input-background: #ffffff;
--fel-chatbot-input-border: 1px solid #e0e0e0;
--fel-chatbot-input-border-radius: 20px;
/* Button */
--fel-chatbot-button-size: 60px;
--fel-chatbot-button-border-radius: 50%;
--fel-chatbot-button-background: var(--fel-chatbot-primary-color);
--fel-chatbot-button-color: #ffffff;
}
Adding Custom CSS
To add custom CSS for your product advisor:
- Create a new CSS file in your theme directory
- Add your custom styles using the variables above
- Include the CSS file in your theme's main stylesheet
Example location for your custom CSS:
custom/plugins/YourTheme/src/Resources/app/storefront/src/scss/overrides/fel-product-advisor.scss
Example Customizations
Modern Dark Theme
:root {
/* Dark theme colors */
--fel-chatbot-primary-color: #6200ea;
--fel-chatbot-text-color: #e0e0e0;
--fel-chatbot-background-color: #121212;
/* Chat window */
--fel-chatbot-border-radius: 12px;
--fel-chatbot-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
/* Header */
--fel-chatbot-header-background: #1e1e1e;
--fel-chatbot-header-text-color: #ffffff;
/* Messages */
--fel-chatbot-user-message-background: #6200ea;
--fel-chatbot-user-message-color: #ffffff;
--fel-chatbot-bot-message-background: #2d2d2d;
--fel-chatbot-bot-message-color: #e0e0e0;
/* Product cards */
--fel-chatbot-product-card-background: #1e1e1e;
--fel-chatbot-product-card-border: 1px solid #333333;
/* Input area */
--fel-chatbot-input-background: #2d2d2d;
--fel-chatbot-input-border: 1px solid #333333;
/* Button */
--fel-chatbot-button-background: #6200ea;
}
Minimalist Light Theme
:root {
/* Light minimalist colors */
--fel-chatbot-primary-color: #000000;
--fel-chatbot-text-color: #333333;
--fel-chatbot-background-color: #ffffff;
/* Chat window */
--fel-chatbot-border-radius: 0;
--fel-chatbot-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
/* Header */
--fel-chatbot-header-background: #ffffff;
--fel-chatbot-header-text-color: #000000;
/* Messages */
--fel-chatbot-user-message-background: #f0f0f0;
--fel-chatbot-user-message-color: #000000;
--fel-chatbot-bot-message-background: #ffffff;
--fel-chatbot-bot-message-color: #000000;
--fel-chatbot-message-border-radius: 0;
/* Product cards */
--fel-chatbot-product-card-background: #ffffff;
--fel-chatbot-product-card-border: 1px solid #e0e0e0;
--fel-chatbot-product-card-border-radius: 0;
/* Input area */
--fel-chatbot-input-background: #ffffff;
--fel-chatbot-input-border: 1px solid #000000;
--fel-chatbot-input-border-radius: 0;
/* Button */
--fel-chatbot-button-size: 50px;
--fel-chatbot-button-border-radius: 0;
--fel-chatbot-button-background: #000000;
}
Customizing Product Cards
The product cards displayed in the chat can also be customized to match your store's design.
Product Card Elements
Each product card in the chat contains:
- Product image
- Product name
- Price
- Short description (optional)
- "View Product" button
Customizing Product Cards with CSS
/* Product card container */
.fel-chatbot-product-card {
padding: 12px;
margin-bottom: 10px;
}
/* Product image */
.fel-chatbot-product-image {
width: 100%;
height: auto;
object-fit: cover;
border-radius: 4px;
}
/* Product name */
.fel-chatbot-product-name {
font-weight: 600;
font-size: 14px;
margin: 8px 0 4px;
}
/* Product price */
.fel-chatbot-product-price {
font-weight: 500;
font-size: 14px;
color: #e63946; /* Highlight price in red */
}
/* Product description */
.fel-chatbot-product-description {
font-size: 12px;
color: #666;
margin: 4px 0;
}
/* View product button */
.fel-chatbot-product-button {
background-color: var(--fel-chatbot-primary-color);
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
transition: background-color 0.2s;
}
.fel-chatbot-product-button:hover {
background-color: darken(var(--fel-chatbot-primary-color), 10%);
}
Responsive Design
The FelAIProductAdvisor is designed to be responsive by default, but you can further customize its behavior on different screen sizes.
Mobile-Specific Customizations
/* Mobile adjustments */
@media (max-width: 767px) {
:root {
/* Make chat window full width on mobile */
--fel-chatbot-width: 100%;
--fel-chatbot-height: 100%;
--fel-chatbot-border-radius: 0;
}
/* Adjust button size for mobile */
.fel-chatbot-button {
--fel-chatbot-button-size: 50px;
}
/* Adjust product cards for mobile */
.fel-chatbot-product-card {
padding: 8px;
}
.fel-chatbot-product-name {
font-size: 13px;
}
}
Icon Customization
You can replace the default chat icon with a custom icon:
- Create an SVG icon that matches your brand
- Add it to your theme's assets directory
- Reference it in your CSS:
.fel-chatbot-button-icon {
background-image: url('../assets/icons/your-custom-icon.svg');
background-size: 60%;
background-position: center;
background-repeat: no-repeat;
}
Animation and Transitions
Add subtle animations to enhance the user experience:
/* Smooth transition for chat window */
.fel-chatbot-window {
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Message animation */
.fel-chatbot-message {
animation: message-fade-in 0.3s ease;
}
@keyframes message-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Button hover effect */
.fel-chatbot-button:hover {
transform: scale(1.05);
transition: transform 0.2s ease;
}
Best Practices for Design Customization
- Maintain brand consistency: Use colors and styles that match your store's branding
- Keep it simple: Avoid overly complex designs that might distract from the conversation
- Ensure readability: Maintain good contrast between text and background colors
- Test on all devices: Verify that your customizations work well on desktop, tablet, and mobile
- Consider accessibility: Ensure that your design is accessible to all users, including those with disabilities
Next Steps
After customizing the design of your product advisor, you can: