> For the complete documentation index, see [llms.txt](https://support.quizkitapp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.quizkitapp.com/ai-shopping-assistant/setting-up-ai-assistant/customizing-and-styling.md). # Customizing and styling After you [initiate your first AI Shopping Assistant sync](/ai-shopping-assistant/setting-up-ai-assistant/syncing-and-training.md#initial-store-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](#apply-ai-shopping-assistant-to-your-theme) * [Customize the AI Shopping Assistant](#customize-the-ai-shopping-assistant) * [Add the page chat block](#add-the-page-chat-block) * [Add product page prompts](#add-product-page-prompts) * [Review or update chat styling](#review-or-update-chat-styling) *** ## 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:** 1. 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. 2. Click **Enable app embed** to launch the theme editor. 3. [Customize](#what-you-can-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](#add-product-page-prompts).
SectionWhat you can do
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:** 1. 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**. 2. Optional: Drag the section block up or down to move it to the position you want. 3. Click the page chat block on the page preview to open customization options for the section such as logo, and heading and subheading text. 4. 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:** 1. 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**. 2. Optional: Drag the section block up or down to move it to the position you want 3. 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:** 1. From the AI Shopping Assistant dashboard, under **Style conversation**, click **Customize** to open the theme editor. 2. Make any adjustments you want (or leave settings as they are). 3. Click **Save**. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://support.quizkitapp.com/ai-shopping-assistant/setting-up-ai-assistant/customizing-and-styling.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.