How to Customize the Appifire Chat Widget

You will customize how the Appifire AI Chat widget looks and behaves on your Shopify storefront. You will set the chatbot name, welcome message, avatar, theme color, launcher style, bubble position, message delay, and whether the widget is shown.

When you finish, the chat bubble should match your brand basics and appear where you expect on the live theme.

Direct answer

All look-and-feel controls live in the Appifire admin Appearance page (/app/appearance). The Shopify Theme Editor only enables the App embed. It does not edit colors, position, or welcome text.

Prerequisites

• Appifire AI Chat installed (Getting Started with Appifire AI Chat)
• Permission to open the Appifire admin and your live theme (or a theme preview)
• Optional: a square logo or avatar image (JPEG, PNG, WebP, or GIF, max 2 MB) if you want a custom avatar

If the bubble never appears, finish embed setup first (Installation & Setup Checklist) or use the Technical Troubleshooting Playbook.

Steps

1) Enable the App embed (once)

1. In Appifire, open Appearance.
2. Use Open Theme Editor (App embeds) (or open Theme Editor → App embeds yourself).
3. Enable AppiFire Chat (Appifire AI Chat embed).
4. Click Save in the Theme Editor.

You only need this so the widget can load. Appearance settings still come from the Appifire admin.

2) Open Appearance and set identity copy

In Appifire admin → Appearance:

1. Set Chatbot name (default: Chat with us). This is the header title next to the avatar.
2. Set Welcome message (default: Hi! How can I help you today?).
3. Click Save when the save bar appears.

3) Choose avatar

Under Chatbot avatar:

• Pick None, or one of the preset avatars 1-5, or
• Upload a custom image (JPEG/PNG/WebP/GIF, max 2 MB; stored as a 512×512 WebP), or
• Remove custom image if you need to clear an upload

Custom avatar upload saves on its own action. Still click Save for other Appearance fields you changed.

4) Set color, launcher, and position

1. Theme color: pick a color or enter a hex (default #7d87ff). This drives the title bar, shopper bubbles, send button, and the text-style launcher background.
2. Chat launcher style: choose Text (shows a pill labeled Chat with us) or one of image presets 1-15.
3. Chat bubble position: Bottom right or Bottom left.
4. Distance from bottom and side (px): number, minimum 8, default 50.
5. Launcher animation: Static, Breathing light, Zoom, or Flash.
6. Click Save.

Note: The text launcher label is currently fixed as Chat with us. It does not use your Chatbot name. The chatbot name appears in the open chat header.

5) Set message delivery behavior

1. Open Message delivery behavior.
2. Choose:
   • No Delay (default): reply shows when ready
   • Slow Typing like AI: typing-style presentation
   • Delay Message: shows Typing..., then the full reply after a wait
3. If you chose Delay Message, set Delay seconds from 1 to 30 (default 2).
4. Click Save.

6) Control storefront visibility

1. Find Enable chat widget on storefront.
2. Check it to show the bubble. Uncheck it to hide the bubble without removing the theme embed.
3. Click Save.
4. Open your storefront (or preview). Confirm the launcher position, color, and welcome message.

7) Optional: pre-chat identity (Settings)

Identity capture is not on Appearance. If you need it:

1. Open Appifire Settings.
2. Review pre-chat options such as showing a form to unidentified visitors and allowing Guest skip.
3. Save, then retest the storefront open flow.

What success looks like

• Theme App embed is enabled and the theme is saved
• Appearance changes show on a hard refresh of the storefront
• Chatbot name and welcome message match what you saved
• Bubble sits on the chosen corner with your inset distance
• Hiding the widget with Enable chat widget on storefront removes the bubble without uninstalling the app

Limits and non-goals

Appifire Appearance does not currently offer:

• Custom CSS, custom fonts, or chat window size controls in admin
• Editing the text-launcher label away from Chat with us
• Uploading a custom launcher image (presets 1-15 only; custom upload is for the avatar)
• Per-page visibility rules (show only on some templates)
• Theme Editor fields for color/position (embed is activation only)
• A merchant toggle documented here for removing product branding lines inside the widget

Answer quality still depends on catalog and knowledge setup, not Appearance. See How to Improve Product and Order Answers in Appifire AI Chat.

Why this matters (short)

Shoppers ignore a bubble they cannot find or do not trust. Clear name, welcome text, and brand color reduce that friction. Appearance does not replace good product data.

Related Appifire Guides

• Getting Started with Appifire AI Chat
• Appifire Installation & Setup Checklist
• Appifire Technical Troubleshooting Playbook
• Appifire Billing and Credits Explained
• Category context: What Is an AI Shopping Assistant?

Last verified

2026-07-22 against Appifire Appearance UI labels and product docs for Appearance / custom avatar / App embed activation. Re-check the live Appearance screen after app updates; labels can move slightly.