Customizing and styling
Learn how to customize AI Shopping Assistant’s chat button, page sections, and product banners to match your store’s design.
After you initiate your first AI Shopping Assistant sync, you can customize its appearance and placement to fit your theme. You can apply it to a theme, adjust the floating chat button, add chat sections to pages, include suggested questions on product pages, and style the chat window.
These settings help ensure the AI experience feels integrated with your storefront and matches your brand’s look and feel.
In this section
Apply AI Shopping Assistant to your theme
AI Shopping Assistant functions as an app in your theme, so you need to choose a theme to add it to before you can start customizing and styling its appearance.
Steps:
From the AI Shopping Assistant dashboard, under the Select Theme drop-down menu, choose one of your existing store themes to apply AI Shopping Assistant to.
Click Enable app embed to launch the theme editor.
Customize the AI Shopping Assistant, then click Save.
What you can customize:
You can customize the following:
Chat bubble: The floating button that appears on every page (when enabled). Customers click it to open the AI Shopping Assistant chat window.
Chat window: The interface where customers interact with the AI Shopping Assistant and receive personalized product recommendations.
Conversation: The back-and-forth exchange between the AI Assistant and the customer within the chat window.
AI-suggested questions and product prompts: The automatically generated prompts and product suggestions shown in the chat window—and, if added, on the product page via the embedded theme block.
Chat bubble
Turn on/off
Change position (left/right, vertical)
Set hover text and color
Adjust icon, background, and border colors
Choose corner style (square, rounded, pill)
Chat window and conversation
Customize background and header colors
Upload header icon
Set welcome heading and intro text
Style conversation bubbles (customer & AI colors, corners)
Upload AI avatar
AI suggested questions & product prompts
Enable product page marquee
Customize icon, text, and container colors
Adjust question container corners
Advanced customization
Add custom CSS for advanced styling
Add the page chat block
You can add a full-width chat section, ideal for collection or landing pages.
Steps:
From the AI Shopping Assistant dashboard, under Page chat, click Edit placement. Your theme editor is launched and the Page chat is added. Click Got it.
Optional: Drag the section block up or down to move it to the position you want.
Click the page chat block on the page preview to open customization options for the section such as logo, and heading and subheading text.
Click Save.
Add product page prompts
Next, you can add the question prompts to your product pages. This can be static question prompts or a banner that scrolls on the product page.
Steps:
From the AI Shopping Assistant dashboard, under Product page prompts, click Edit placement. Your theme editor is launched and the Product page prompts block is added. Click Close.
Optional: Drag the section block up or down to move it to the position you want
Click Save.
Review or update chat styling
You can return to the theme editor at any time to review or adjust your AI Shopping Assistant’s appearance. This includes colors, fonts, chat bubble shape, and header logo.
Steps:
From the AI Shopping Assistant dashboard, under Style conversation, click Customize to open the theme editor.
Make any adjustments you want (or leave settings as they are).
Click Save.
Last updated
Was this helpful?