Customizing and styling

Learn how to customize AI Agent’s chat button, page sections, and product banners to match your store’s design.

Once AI Agent is synced to your store, 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.

---

Apply AI Agent to your theme

AI Agent 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:

1. From the AI Agent dashboard, under Style customization,

2. In the Select Theme step, from the drop-down menu, choose one of your existing store themes to apply AI Agent to.

---

Customize the floating chat button

Next, you can customize the appearance of the floating chat button, the button that customers click to open the AI Agent chat window.

Steps:

1. From the AI Agent dashboard under Floating Chat Button, click Open in theme editor. Your theme editor is launched.

2. From your theme editor, under Floating button, you can do the following:

   1. Toggle the AI Agent or the floating button on or off while you edit.

   2. Change the position of the floating chat button on your page.

   3. Set hover text for the text that displays when the floating button is clicked.

   4. Change the icon color.

3. Click Save.

---

Add the page chat section

You can add the AI Agent chat as an embedded section on a product page so it's easier for your customers to ask product questions as they shop.

Steps:

1. From the AI Agent dashboard under Page Chat Section, click Add in theme editor. Your theme editor is launched and the Page chat section is added.

2. Optional: Drag the section block up or down to move it to the position you want.

3. Click Save.

---

Add the product page block

You can add the question marquee banner to your product pages. This banner scrolls on the product page and acts as suggested questions customers might ask.

Steps:

1. From the AI Agent dashboard under Product Page Block, click Add in theme editor. Your theme editor is launched and the Page chat section is added.

2. Optional: Drag the section block up or down to move it to the position you want.

3. Click Save.

---

Styling the chatbot

You can further customize the appearance of the chat drawer that slides out on your storefront.

Under Style customization, click Style to launch your theme editor.

The following is a list of the sections and their customization options:

Section	Options
Chatbot styles	Adjust chat text & background colors Choose rounded, square, or pill style
Chatbot header	Upload a header logo; change header color
Welcome message	Update heading and welcome text sent by AI Agent
AI Agent styles	Change AI Agent chat avatar Change background color
Questions	Toggle product page marquee on or off Show/hide questions icon Change text, background, and icon colors
Advanced	Enter custom CSS

When you're done making changes, click Save.