shopify/settings/Styling Settings

Styling Settings

Fully customize the visual appearance of your chat widget to match your brand.

Accessing Styling Settings

Navigate to Settings → Styling in the Intufind app.

Styling Settings Screenshot: shopify-settings-styling.png

AI Color Generator

Let AI create a complete, accessible color scheme based on your brand colors.

AI Color Generator Screenshot: shopify-color-generator.png

  1. Enter your Primary Color (required)
  2. Optionally enable and enter a Secondary Color
  3. Click Generate Colors
  4. Review the AI-generated palette
  5. Save to apply

The AI considers WCAG 2.1 AA compliance and design harmony.

Color Scheme

  • Options: Auto (Follow System Preference), Light Mode (Always), Dark Mode (Always)
  • Default: Auto

When set to Auto, the widget respects the user's system dark/light mode preference.

Chat Colors

Configure colors for both light and dark modes.

Primary Color

Main accent color for buttons, links, and highlights.

Assistant Bubble Background

Background color for AI response messages.

Accent Color

Secondary accent for borders and separators.

Send Button Color

Color of the message send button.

Link Color

Color of hyperlinks in messages.

Trigger Button

Customize the floating chat trigger button.

Trigger Button Settings Screenshot: shopify-trigger-button.png

Custom Icon

Upload a custom image (40x40px recommended) for the trigger button.

Background Colors

Set background color for light and dark modes.

Hover Colors

Set hover state colors.

Border Colors

Set border colors.

Header

Customize the chat widget header appearance.

Header Avatar

Upload a custom avatar image (40x40px recommended) for the AI assistant.

Background Colors

Header background for light and dark modes.

Title/Subtitle Colors

Text colors for header content.

Icon Colors

Color for header icons (close button, etc.).

Cards & Content

Style product and content cards.

Card Background

Background color for cards.

Card Border

Border color for cards.

Hover Background

Background color when hovering over cards.

Title/Meta/Description Colors

Text colors for card content.

Prompts & Suggestions

Customize suggested prompt chips.

Chip Background

Background color for prompt chips.

Text Color

Text color for prompt labels.

Border Color

Border color for chips.

Hover Background

Background when hovering over chips.

Advanced Styling

Typography

OptionDescription
System DefaultUses device system font (recommended)
InterGoogle Font
RobotoGoogle Font
Open SansGoogle Font
LatoGoogle Font
CustomSpecify your own font family

Widget Shadow

  • Options: None, Light, Medium, Heavy
  • Default: Medium

Widget Dimensions

  • Max Width: 300-1400px (default: 800px)
  • Max Height: 400-1000px (default: 900px)
  • Border Radius: 0-50px (default: 16px)

Widget Background

  • Auto: Uses theme default
  • Custom: Specify custom background colors

Input Field

Customize the message input area:

  • Input background color
  • Input border color

Custom CSS

For advanced users, add custom CSS rules:

/* Example: Increase header padding */
[data-itf-part="header"] {
  padding: 20px;
}

/* Example: Custom font size */
[data-itf-part="message"] {
  font-size: 15px;
}

Target elements using [data-itf-part="..."] attributes or CSS variables (--itf-*).

Saving Changes

Click Save Styling Settings after making any changes.

Use Reset Styling Settings to revert all styling options to defaults.

Testing Your Styles

After saving, visit your storefront to test:

  1. Check both light and dark modes
  2. Verify colors are accessible (good contrast)
  3. Test on mobile devices

Next Steps