Assistant design configuration
The Chat design tab allows you to fully customize the visual appearance of the chat widget to ensure it seamlessly integrates with your store’s branding.
Basic Identity and Positioning
Identity: You can define the “Assistant name” (e.g., “AI Assistant”) which appears in the header, and optionally provide an “Assistant avatar URL” to display a custom logo or image next to the name.
Positioning: Use the “Position on screen” dropdown to choose where the widget docks on your storefront (typically Bottom right).
Layout and Dimensions
You have precise control over the physical size and shape of the chat interface using pixel (px), viewport height (vh), or rem units:
Adjust the overall “Chat width” (e.g., 400px) and “Chat max height” (e.g., 50vh).
Fine-tune spacing with “Messages padding” and adjust the curvature of the interface using radius controls like “Messages container radius” (18px) and “Chat window radius” (12px).
Control typography sizing with settings for “Chat font size,” “Chat header text size,” and “Chat header icon size”.
Color Theming
The interface provides extensive hex code pickers to modify every single element of the chat window.
Backgrounds: Customize the primary “Chat background” (#FFFFFF), the “Customer message background,” and the “Assistant message background” (#000000). You can also tint specific sections like the “Welcome textarea background” or “FAQ background color” (#F9FAFB).
Borders: Define the subtle outlines for the message field, FAQ boxes, and links to create a cohesive look.
Frequently asked questions
The FAQ tab allows you to create pre-written questions that appear before the user even types their first message. This helps resolve common inquiries instantly without requiring AI generation.
Click “+ Add FAQ” to create a new entry.
For each entry, input the common “Question” (e.g., “Can you ship the product to the US?”) and format the static “Answer” using the rich text editor (bold, italics, underline, strikethrough).
You can drag and drop to reorder the questions or use the pencil and trash icons to edit or delete them.
Quick links
The Links tab lets you add direct navigation buttons to the bottom of the chat welcome screen. This is ideal for routing users to alternative support channels or important store pages.
Grid Layout: First, define how the links are displayed by selecting the number of “Grid columns” (e.g., setting it to 3 will display them in a horizontal row).
Adding Links: Click “+ Add link” to create a new button. Provide a “Link Title” (like “WhatsApp” or “Mail”) and input the exact “Link URL” (using standard formats like mailto: for emails or direct phone numbers).
Icons: You can select from a built-in library of vector icons (like an envelope, phone, globe, or calendar) to represent the link visually. Alternatively, you can use the “Choose File” button under “Custom image” to upload your own icon.
Ready to sell more on Shopify?
Install Liliwi on your Shopify store and get free setup from our team.
Use the full service for as low as $1.