> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pcnaid.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Set up the storefront chat widget

> Add the Storefront Agent Chat app block to your theme and configure the chat endpoint.

# Set up the storefront chat widget

## What does this do for me?

The Storefront Agent Chat widget adds a floating chat launcher to your storefront so shoppers can ask questions and get help from the AI assistant.

## Step 1 — Open Theme Editor

Go to your Shopify admin and open the **Theme Editor** for your active theme. Select **Theme settings** then **App embeds**.

## Step 2 — Activate the app block

Find the **Storefront Agent Chat** app block and activate it. The block targets the closing `</body>` tag and works with both Online Store 2.0 themes (Dawn, JSON templates) and vintage themes (Debut, Liquid templates).

## Step 3 — Configure the block

Set the block options:

* **Enable chat** — confirm this is selected
* **Chat service URL** — enter the deployed chat service URL ending in `/chat`
* **Widget title** — optionally change the title (default: "Ask our AI shopping assistant")
* **Position** — choose **right** or **left** for the widget position on the page

## Step 4 — Test the widget

Visit your storefront and ask a question to confirm the assistant is live. The assistant identifies AI-generated answers and tells shoppers to verify important store details. Shoppers can rate an answer or contact the store using your configured Shopify email address.

## How shoppers see it

The storefront chat panel:

* Identifies AI-generated answers
* Prompts shoppers to verify important store details
* Lets shoppers rate an answer
* Offers a **Listen** control for voice playback of answers (when an ElevenLabs account is connected)
* Routes shoppers to your configured Shopify email when the assistant cannot complete a request

If AI planning fails, the answer directs the shopper to contact the store. A handoff ticket indicates a request for human help but does not guarantee delivery to a monitored recipient.

## Related guides

* [Configure settings](https://docs.pcnaid.com/nodes/shopify/growthagent/merchant/guides/configure-settings.md) — set up handoff destinations
* [Manage store knowledge](https://docs.pcnaid.com/nodes/shopify/growthagent/merchant/guides/manage-store-knowledge.md) — sync product and policy content


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.