Implementing Shopping Assistant in FastStore

In this guide, you will learn how to implement the Shopping Assistant in a FastStore project.

Shopping Assistant is a conversational assistant embedded in the storefront that helps shoppers with product- and post-purchase-related questions without leaving the store experience.

For shoppers, this brings a more guided buying journey: they can get answers in context while browsing, reduce friction during product discovery, and receive support in the same interface where they are making purchase decisions. For merchants, this creates an opportunity to offer a more assistive and responsive storefront experience that can improve self-service during the shopping journey.

FastStore already includes support for the Shopping Assistant integration through a dedicated ShoppingAssistant section in the CMS and a third-party script that loads the VTEX CX Platform's experience.

Before you begin

The Shopping Assistant is available for FastStore projects running v3.98.0 or later. If your project is not up to date, follow the instructions in Updating the '@faststore/cli' package version.

Instructions

Step 1 - Sync the `ShoppingAssistant` section with CMS

For stores using CMS

Open your FastStore project in a code editor.
Open a terminal and log in to your VTEX account by running vtex login {accountName}.

Change {accountName} to your store account, for example, vtex login mystore.
Generate and upload the CMS schema by running the following commands:

If needed, install the VTEX Content plugin by running vtex plugins install @vtex/cli-plugin-content.


_10
_10vtex content generate-schema cms/faststore/components cms/faststore/pages -o cms/faststore/schema.json && vtex content upload-schema cms/faststore/schema.json

For stores using Headless CMS (legacy)

Open your FastStore project in a code editor.
Open a terminal and log in to your VTEX account by running vtex login {accountName}.

Change {accountName} to your store account, for example, vtex login mystore.
Run the following command to add and sync the ShoppingAssistant section to your project.

_10yarn cms-sync

Step 2 - Shopping Assistant setup flow in VTEX CX Platform

To set up the Shopping Assistant flow, you must onboard your account in the VTEX CX Platform. To onboard, follow these instructions:

Open the Admin, go to Storefront > Agentic CX > Dashboard.
In the Dashboard page, click the Scale Support and Efficiency card.
Choose a store URL to connect the store data.
Click Confirm to begin the onboarding.

${"base64":" ","img":{"width":1576,"height":923,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":690383,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/1-shopping-assistant-onboarding___206165d6874fdd97ee7f8fcfbcafb939.gif"}}$
Once the AI team is ready, click Activate in Store to complete the onboarding process.

${"base64":" ","img":{"width":1619,"height":832,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":74952,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/2-shopping-assistant-onboarding___e9ac90652a41f5581d0c4151f0d4a92a.png"}}$

Step 3 - Enable the section in the CMS interface

The Shopping Assistant section is available on all store pages, so it should be added to the Global Sections Content Type.