Implementing Live Shopping for FastStore

This is an experimental feature.

Live Shopping for FastStore is a solution to add a customizable player to your storefront to transmit Live Shopping events. Once you've implemented the feature, you will be able to configure and manage the event transmission via VTEX Admin.

This guide explains how to integrate Live Shopping into a project using FastStore.

This feature is available as a native solution for the latest version of FastStore. If your storefront technology is FastStore v1 or v2, refer to the guide Implementing Live Shopping for FastStore previous versions.

Before you begin

Before implementing Live Shopping for FastStore, make sure you have onboarded your FastStore project through WebOps.

Live Shopping app

The first step is to get the Live Shopping app by following the steps below:

Access VTEX Live Shopping on VTEX App Store. You can also access it via the VTEX Admin through Apps > App Store > VTEX Live Shopping.
Click Get app to install the app. Log in to your VTEX account if necessary.
Click Place order.
Click Go to install page.
Click Install.
Agree to the Terms of Service by clicking Install.

Installation

Once you have the app on your store project, install the Live Shopping plugin package and its dependencies by running the following command:


_10yarn add @vtex/faststore-plugin-live-shopping object-hash@3.0.0 p-queue@8.1.0

Configuration

Next, add the plugin reference below to your discovery.config.js file:


_10 plugins: ["@vtex/faststore-plugin-live-shopping"]

CMS sections sync

Once you've added the plugin, synchronize your CMS sections with the following command:


_10yarn faststore cms-sync

You will be able to add the Live Shopping section to the store's CMS:

{"base64":" ","img":{"width":760,"height":573,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":40781,"url":"https://raw.githubusercontent.com/vtexdocs/dev-portal-content/refs/heads/main/images/live-shopping-faststore-adding-cms-section-v3.png"}}

For information about customizing the Live Shopping player, refer to Live Shopping: Events.

First Live Shopping event

The first step is creating an event on VTEX Admin. After that, you will need to place the component to start the event and delete the component to end the event. Learn more:

Start the event: Place the component to show the player on the storefront.
End the event: Delete the component to remove the player.

For information about transmitting a Live Shopping event, check VTEX Live Shopping - Getting started.