This is an experimental feature.

If you use the latest version of FastStore, refer to the guide Implementing Live Shopping for FastStore.

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

1. Create the component
2. Connect the component to the CMS
3. Configure CMS sections

1. In your FastStore project, go to src/components/sections.
2. Create a new folder named LiveShopping.
3. Inside this folder, create the following files:

1. Locate the CMS renderer file (usually RenderCMS.tsx).
2. Import the previously created component:

3. Add it to the COMPONENTS constant, which contains an object with the components related to sections added to the CMS.

1. Go to cms/faststore/sections.json.
2. Edit the sections.json file by adding the following schema:

3. Save changes.
4. For the Live Shopping section to be available on your VTEX Admin, sync your CMS by running the command below:

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

Be aware that not all Live Shopping configurations are available for previous versions of FastStore, as explained in the section Feature restrictions.

1. In the VTEX Admin, go to Apps > Live Shopping > Events, or type Events in the search bar at the top of the page.
2. In the Action column, click the arrow button to go to the Event page.
3. In the CMS Configuration section, select the External template option in Script for template.
4. Copy the src attribute value from the <script> tag, without the quotation marks.

5. Go to Storefront > Headless CMS and add the LiveShopping section to a page.
6. On that page, paste the src value you've copied on the LiveShopping field.
7. Save changes.
8. Publish the page.

1. In the VTEX Admin, go to Storefront > Headless CMS, or type Headless CMS in the search bar at the top of the page.
2. Select the page where you've added the Live Shopping Player.
3. On the Sections tab, in the Live Shopping Player section, click More > Delete.
4. Click Save.
5. Click Publish > Publish Now.
6. (Optional) If the page version had been published before and the Overwrite Published Version window opens, click Overwrite.

Make sure to follow our recommendations on CMS and Settings configurations, as misconfiguration can compromise the transmission of the Live Shopping event.

• ❌ UTM configuration: Not supported as a native solution, so data tracking isn't available.
• ❌ Add to Cart configuration: Not supported as a native solution, but can be used while presenting a different behavior. When the customer clicks Add to Cart on the Live Shopping event, instead of adding the product to the cart, it will open the product details page (PDP) in a new tab, from where the customer can add the item to the cart.
• ❌ Quick View configuration: Not supported as a native solution and mustn't be activated on the CMS section of the events page. Otherwise the customer might have cart errors while using the Add to Cart configuration.
• ❌ Popup transmission configuration: Not supported as a native solution and mustn't be activated on the events page. Otherwise it may delete the live event itself. It can be found under the Player configuration on the Settings section.