Implementing Shopping Assistant in FastStore

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

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

This brings a more guided buying journey for buyers: they can get answers in context while browsing, experience less 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 buying 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 experience.

Before you begin

Shopping Assistant is available for FastStore projects running v3.98.0 or higher. 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

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

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 - Follow the Shopping Assistant setup flow in VTEX CX Platform

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

Open the VTEX Admin and go to Storefront > Agentic CX > Dashboard.
On the Dashboard page, click the Scale Support and Efficiency card.
Choose a store URL to connect the store data.
Click Confirm to begin 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. It should be added to the Global Sections Content Type.