Skip to content

Widget Customization

Customize the chat widget appearance on your Shopify store to match your brand.

Overview

Widget customization lets you: - Match your store's color scheme - Adjust the theme (light/dark) - Customize avatars - Control display options

Customization Methods

Customizations made in the Functional AI dashboard automatically sync to your Shopify widget.

  1. Go to Assistants in Functional AI
  2. Select your Shopify assistant
  3. Click Manage Assistant
  4. Go to the Appearance tab
  5. Make your customizations
  6. Click Save Customizations

Auto-Sync

Changes sync automatically to all connected Shopify stores using this assistant.

Method 2: From Shopify Admin

If available in your Shopify app settings:

  1. Open the Functional AI app in Shopify
  2. Navigate to appearance/customization settings
  3. Adjust colors and options
  4. Save changes

Customization Options

Colors

Primary Color

The main accent color for interactive elements.

Affected elements: - Chat bubble button - Send button - User message background - Links and highlights

Tips: - Use your brand's primary color - Ensure good contrast with white text

Secondary Color

Supporting color for secondary elements.

Affected elements: - Background accents - Hover states - Secondary buttons

Background Color

The chat window background.

Options: - White (default for light theme) - Dark gray (default for dark theme) - Custom color to match your site

Theme Mode

Theme Description Best For
Light White/light backgrounds Most stores, bright designs
Dark Dark backgrounds Dark-themed stores, evening shopping

Choose based on your store's overall design.

Avatars

Assistant Avatar

The image shown with assistant messages.

Recommendations: - Use your logo or mascot - Square image, minimum 100x100px - Simple, recognizable image - PNG or JPG format

User Avatar

The image shown with customer messages.

Options: - Default user icon - Custom image - Hide completely

Display Options

Option Description
Show assistant avatar Display avatar with each assistant message
Show user avatar Display avatar with each user message

Matching Your Store Theme

Light Store Theme

Recommended settings:
- Theme: Light
- Primary: Your brand color
- Background: White or light gray
- Avatars: Colorful, visible

Dark Store Theme

Recommended settings:
- Theme: Dark
- Primary: Bright accent color
- Background: Dark gray or black
- Avatars: Light or high-contrast

Minimal Design

Recommended settings:
- Theme: Light or Dark (match site)
- Primary: Subtle accent
- Avatars: Hide or simple icons
- Clean, uncluttered look

Preview Your Changes

Before saving:

  1. Use the live preview panel
  2. Check different message types
  3. Verify readability
  4. Test with actual content

Implementation Examples

Fashion/Lifestyle Store

Primary: Rose gold (#B76E79)
Secondary: Soft pink (#F5E6E8)
Theme: Light
Avatars: Brand mascot + default user

Tech/Electronics Store

Primary: Electric blue (#0066FF)
Secondary: Light blue (#E6F3FF)
Theme: Light
Avatars: Robot icon + default user

Luxury Brand

Primary: Gold (#D4AF37)
Secondary: Cream (#FFFDD0)
Background: Dark (#1A1A1A)
Theme: Dark
Avatars: Minimalist logo

Testing Customizations

Visual Testing

  1. Open your store in a browser
  2. Click the chat widget
  3. Send test messages
  4. Verify colors and styles
  5. Check mobile appearance

Cross-Browser Testing

Test in: - Chrome - Safari - Firefox - Mobile Safari - Mobile Chrome

Contrast Testing

Ensure: - Text is readable on all backgrounds - Buttons are clearly visible - Links stand out - Accessibility standards met

Troubleshooting

Changes not appearing

  1. Clear browser cache
  2. Hard refresh (Ctrl+Shift+R / Cmd+Shift+R)
  3. Try incognito mode
  4. Wait a few minutes for sync

Colors look different

  • Monitor color profiles vary
  • Test on multiple devices
  • Use web-safe color values
  • Check for transparency issues

Widget style conflicts

Your Shopify theme may have CSS that conflicts:

  1. Check for global CSS rules
  2. Test with default theme
  3. Contact support for assistance

Mobile appearance issues

  1. Test on actual mobile devices
  2. Check responsive behavior
  3. Verify touch targets are large enough
  4. Review text size and readability

Resetting to Defaults

To reset all customizations:

  1. Go to Appearance settings
  2. Click Reset to Defaults
  3. Confirm the reset
  4. Save changes

Best Practices

Do

  • Use consistent brand colors
  • Ensure high contrast for readability
  • Test on mobile devices
  • Preview before saving
  • Keep it simple

Don't

  • Use too many colors
  • Sacrifice readability for style
  • Ignore mobile users
  • Skip testing
  • Use low-contrast combinations

Next Steps