Want your Shelly AI Chatbot to look like it belongs on your Shopify store? Customizing its appearance is easy and lets you match your brand perfectly. This guide walks you through customizing the AI style, colors, chatbox display, and advanced CSS, with real-time previews to nail the look.

Getting Started with Appearance

To start designing, head to the 'Chatbox' tab in the Shelly AI dashboard’s left menu, then click 'Appearance'. This section is where you’ll make your chatbot shine with brand-aligned visuals.

AI Style: Avatars and Names

Give your chatbot some personality!

• Steps:
  

1. In the 'Appearance' section, find 'AI Style'.

2. Choose an Avatar: Upload your own photo or select previously uploaded photos (e.g., a friendly face or brand logo).

3. Set a Name: Name your chatbot to match your brand, such as ‘Janestore Chatbot’

   

4. Save and check the real-time preview.

• Tip: Keep the name short and memorable for customers.

Brand Color Options

Make your chatbox pop with colors that scream your brand.

• Steps:

1. In 'Appearance', go to 'Brand Colors'.

2. Presets: Choose from pre-made color schemes (e.g., 'Beige', 'Citrus Peel').

3. Custom Colors for blocks, fonts, buttons, and more to match your brand guidelines.

• Example: Set buttons to your brand’s '#FF5733' orange.

4. Save and watch the real-time preview update.

• Tip: Stick to 2–3 colors for a clean look, ensuring text stays high contrast with background.

Customizing Chatbox Display

Control how the chatbox looks on your storefront.

• Steps:

1. In 'Appearance', find 'Chatbox Display'.

2. Button Design:

• Launcher: Pick a style and icon 

With Chatbot Launcher, you can choose among 3 options: Launcher (only button will show up), Label only, and Icon & Label

For ‘Button Icon’, you can choose among 3 existing options or upload your own icon. Besides, choose the button size to fit your store design. 

• Alignment: Choose 'Bottom Right', 'Bottom Left'.

3. Chatbox Style:

• Select 'No Navigation' for a simple pop-up or 'Show Navigation' for category tabs.

4. Mobile Ratio: Set to 'Fullscreen', '90%', or '70%' for mobile screens.

5. Save and check the real-time preview on desktop and mobile views.
   

• Example: A tech store might use a sleek 'Square Launcher' in 'Bottom Right' with '70% Mobile Ratio' for a compact mobile view.

• Tip: Test mobile ratios to ensure the chatbox doesn’t block key store elements.

Advanced CSS Customization

For total control, add custom CSS.

• Steps:

• In 'Appearance', find 'Custom CSS'.

• Enter your CSS code to tweak styles (e.g., button hover effects, font sizes).

• Example: .chat-button { border-radius: 10px; } for rounded buttons. 

• Save and see changes in the real-time preview.

• Warnings:

• CSS overrides can break default styles, so test thoroughly.

• Ensure compatibility with Shopify themes to avoid display issues.

• Back up default settings before experimenting.

• Tip: Use simple CSS edits unless you’re a coding pro, and always check the preview.

Real-Time Preview Power

Every change you make—avatars, colors, display, or CSS—shows up instantly in the 'Preview Pane'.

• Toggle between desktop and mobile views to ensure it looks great everywhere.

• Test interactions (e.g., click the launcher, open FAQs) to confirm functionality.

• Tip: Make small edits, save, and refresh the preview to avoid surprises.

Quick Tips

• Keep avatars and names brand-consistent for trust.

• Use high-contrast colors for readability.

• Pick a chatbox style that fits your store’s layout.

• Test CSS changes carefully to avoid glitches.

With these customization, your Shelly AI Chatbot will look right at home in your store, wowing customers with a slick, branded vibe!