The Live Shopping app allows businesses to engage with their customers in real time by live streaming on their store websites. The app is compatible with both desktop and mobile devices.

Live Shopping is a paid app with different subscription plans: Lite, Standard, and Pro. The subscription cost depends on your chosen plan, each providing a specific number of monthly live stream minutes.

For more information about the plans and pricing, refer to the Live Shopping App Store page.

1. Access the Live Shopping app page on the VTEX App Store.
2. Click the Get app button to install the app in your VTEX account.
3. Once the app is successfully installed, open your account's Store Theme app using the code editor of your preference.
4. In the manifest.json file, add the app to the theme's peer dependencies list:

5. Declare the Live Shopping app in the desired template. For example:

6. Deploy the changes made to the Store Theme app. For more information, please refer to Making your new app version publicly available.

Note: Adding a new peer dependency to the Store Theme app requires deploying a new major version of the app. To ensure a smooth deploy, please refer to the Migrating CMS settings after a theme major version update guide.

Once you have deployed your changes, check out the app behavior on VTEX Admin and set up the app by following the instructions in the Creating and managing events section.

Once you have installed the VTEX Live Shopping app, you can access various features and settings to manage your live events effectively.

Access the Admin and navigate to Apps > Live Shopping > Events. Upon reaching the Events pages, you will have access to the following sections:

• Events: This section enables you to create, manage, and access detailed event information. From here, you can set up new events, access the live-streaming studio, and view comprehensive event details. For more information, refer to the Creating and managing events section.

• Usage: This section allows you to effectively track the usage details of your plan. You can monitor the number of available live event minutes, downloaded video recordings, and events that have exceeded the maximum number of viewers.
  

The usage details depend on your chosen plan: Lite, Standard, or Pro. All payment details are provided at the moment of installation.

You can also navigate to Apps > Live Shopping > Global Page to configure a Global Page of live events. This feature provides a comprehensive view of past, present, and upcoming events associated with your account, enabling enhanced engagement and sales opportunities even after the events have concluded or before they occur.

In this section, you will learn how to create and manage live-streaming events using the Live Shopping app.

To create a new live-streaming event, follow these steps:

1. Access the Admin.
2. Navigate to Apps > Live Shopping > Events.
3. Click New to create a new live-streaming event.
4. Fill out the following fields based on the instructions below:

• Event Name - The desired name for the event being created.
• UTM Source - Tracking parameters added to your URL, which helps you track and analyze traffic from different sources.
• (Optional) Collection ID - The ID of the desired product collection to be attached to the live stream event. This feature encourages customers to add more products to the store cart.
• (Optional) Event Time - Internal information regarding the event date and time that helps identify the event easily in the Events list.
• (Optional) Event Category - The category that best fits the event for easier identification in the Events list.

5. Click Save changes to create the event.

Once you create the event, you can start preparing for an engaging and successful live-streaming session by customizing various aspects of your event. Take advantage of the customization options available to tailor the live streaming player layout, configure event promotions, manage the live chat, and customize the featured product display.

You can customize the Live Shopping video player to suit your preferences and desired features. Follow the steps below to modify the player options:

Layout type

To select the layout style for your live event transmission, follow these steps:

1. In the events list, find the desired event and click the arrow button in the Action column.
2. In the Layout Type section, choose the desired layout for your live event transmission:
   • Horizontal Transmission (16:9): Provides a landscape-oriented view optimized for desktop screens.
   • Vertical Transmission (9:16): Provides a portrait-oriented view optimized for mobile screens.

CMS configuration

To select the features available in your live event transmission, follow these steps:

1. In the events list, find the desired event and click the arrow button in the Action column.
2. In the CMS configuration section, select the desired features for your live event transmission:
   • Sidebar products: Displays a sidebar that showcases selected products alongside the video player.
   • Products carousel: Shows a carousel of featured products under the video player during the live event.
   • Chat: Enables a chat feature for users to interact and communicate during the live event.
   • Like: Allows users to interact with the content during the live event by indicating their appreciation with a like.
   • Checkout Cart: Provides an add-to-cart button that guides users to checkout in a new tab.
   • Quick View: Enables a quick view option for users to get a closer look at product details without leaving the live event page.
   • Infinite Scroll: Implement an infinite scroll functionality for the Sidebar products option that automatically scrolls every N seconds. The seconds can be defined in the You will change the speed of the product sidebar, save and check the changes (Time in seconds, 3 to 100 seconds is recommended) field.
3. Click Preview to preview the Live Shopping app based on your configuration settings.

In the CMS configuration section, you will also find the script to embed the live-streaming app in your storefront where you prefer.

In this section, you will learn how to activate or deactivate specific features for your live event.

1. In the events list, find the desired event and click the arrow button in the Action column.
2. In the Configuration settings section, you can activate or deactivate the following options:
   • Chat
     • Email required: Require users to provide their email addresses in order to participate in the live event chat.
     • GIF in Chat: Enable users to send GIFs in the chat during the live event.
     • Enable email sending: Send an email notification to users when they register their email, informing them of any responses from the event administrator to their comments.
   • Player
     • Viewer Visibility: Display the number of users currently connected to the event.
     • Popup Transmission: Open the event in a popup window when accessing the event's website.
   • Products
     • Apply tax: Enable the application of taxes to products showcased during the live event. When this option is activated, the module Promotions > Taxes will display the product price along with the applicable tax.

To maximize engagement and boost sales for your event, the Live Shopping app allows you to create event promotions. Follow the steps below to display promotions during your event:

1. In the events list, find the desired event and click the arrow button in the Action column.
2. In the Promotions section, click Select to choose an existing promotion that you want to display during the live event.
3. Fill in the following fields according to your specific scenario:
   • Promotion: Select an existing promotion.
   • Variable: Select the metric or engagement indicator you want to track for the promotion, such as likes, comments, viewers, or orders.
   • Goal: Set the target you want to achieve for the selected variable. For example, you can specify the number of likes or orders you wish to reach.
   • Message to show: Customize the message that will be displayed to participants when they interact with the promotion.
   • Select Animation: Choose an animation style to enhance the visual impact of the promotion.
4. Click Save to save your settings and activate the promotion for the event.

To manage the live chat during your event, find the desired event in the events list and click the arrow button in the Action column. In the Live Chat section, you will be able to view and monitor real time comments, as well as track the number of viewers and likes. Here's a list of the functionalities available:

• I - Store details: Allows you to set up the administrator name for the chat. Enter the desired name in the input field and click Save to save the changes.
• II - Download: Downloads the chat conversation for future reference or analysis.
• III - Unpin message: Unpins a message that has been previously pinned to the top of the chat.
• IV - Pin message: Pins a message to the top of the chat. This ensures that the pinned message remains visible even as new messages are posted.
• V - Block user: Blocks the user who sent the corresponding message. This action prevents the user from posting further comments. Click the block user icon and then click Block to confirm.
• VI - Delete message: Deletes a message from the chat. Click the trash icon and then click Yes to confirm.
• VII - Select message: Selects a message to reply to. When you click this icon and send a new message, it will appear as a reply to the selected message.
• VIII - Send: Sends a chat message to actively engage with the viewers and participants during the event. Type your message in the input field and click the send icon.

Additionally, you can send quizzes and polls and block undesired words.

Sending quizzes and polls

The Live Shopping app offers a live chat feature that allows users to actively engage with the event and share their thoughts in real time. Learn in the following how to send polls and quizzes and engage your customers:

1. In the events list, find the desired event and click the arrow button in the Action column.

2. In the Questions section, create questions to be displayed to the audience using the New question button. You can choose between quizzes and polls, and define the time frame during which they will be displayed. The answers received will be stored in the same section.

   

3. Click Save question to save your question and make it available to the audience.

Blocking undesired words

To maintain a positive and appropriate chat environment, you can block certain words from being displayed in the real-time chat. Here's how to set up the block list:

1. In the Admin sidebar, access the Block list of words page.
2. Click New to define which words should be forbidden from being displayed in the live chat.
3. Click Save to save your changes.

This feature is useful for blocking rude, political, or unrelated comments from your live stream. Note that the added words will be applied to all events without exceptions

To access the Streaming Studio, follow these steps:

1. In the events list, find the desired event and click the arrow button in the Action column.
2. In the Streaming Studio section, select one of the following options:
   • COPY INVITATION: Click to copy the live event's link and send it to a co-host so they can join the live stream.
   • ACCESS: Click to access the live event studio as the host. When you click on ACCESS, a new window will open, redirecting you to the Streaming Studio.

3. In the Complete my profile field, enter your name and click CONTINUE. Then, you will be redirected to the live event studio.

When you create a new event, you have the option to add the ID of the product collection to be attached to the live-stream event. In the Products within collection section, you can manage which products will be displayed during the event.

To display products during the live event, follow these steps:

1. In the events list, find the desired event and click the arrow button in the Action column.
2. In the Products within collection section, choose the desired products to show during the live stream by activating the Actions toggle.

After performing all the configuration and customization of the Live Shopping app, take the following steps to live stream your event:

1. In the events list, find the desired event and click the arrow button in the Action column.

2. Copy the event's ID in the Details section.

3. Change the event status to Live by enabling the Turn on toogle.

   

   It may take approximately 3 minutes for the event to go live.

4. Go to Storefront > Site Editor.

5. Find the Live Shopping block in your storefront, according to the template you used, and select it.

6. Activate the Live Shopping player on your store by toggling the Show component button.
7. Click Events (In live) to choose the desired event.
8. Click Save to save your changes.

Tip: use the Site Editor module to configure texts, images, and banners to be displayed alongside the Live Shopping player.

To create a personalized and visually appealing live event experience, you can customize the look and feel of the Live Shopping app. Follow the steps below to configure the appearance of both mobile and desktop views:

1. Access the Admin and navigate to Apps > Live Shopping > Events.

2. In the events list, find the desired event and click the arrow button in the Action column.

3. Once the event is live, go to the Layout Type section and click the Customize look and feel button to enter the customization module.

4. On the Look and Feel page, you will find two options: mobile and desktop. By selecting each option, you can configure and customize the components specific to those views, customizing both the products and chat sections of the Live Shopping player.

   

   Note that when you enter the customization module and start customizing a component, the specific component you are working on will be identified and highlighted in blue color.

5. Select the mobile mode by clicking the mobile icon to customize the following options:

   • Products
     • Products on mobile: Customize the background color of each product card and the color of each product price.
     • Add to cart button: Customize the content, text color, and background color of the add-to-cart button.
     • Product highlight: Customize the text and background colors of the highlighted product card.
   • Chat
     • Admin message: Customize the background and text colors of messages sent by the event administrator.
     • Comment box: Customize the text content presented in the chat input field.

6. Select the desktop mode by clicking the desktop icon to customize the following options:

   • Products
     • Products on desktop: Customize the color of each product name.
     • Add to cart button: Customize the content, text color, and background color of the add-to-cart button.
     • Product highlight: Customize the background color of the highlighted product card and the text color of the highlighted product price. Additionally, you can determine whether you want to show the price or the add-to-cart button under the highlighted product.
     • Selection of product variations: Specify the preferred display style for product variations, whether in circular or square shape.
     • Products section title: Customize the title text of the products section presented next to the live streaming player.
   • Chat
     • Admin message: Customize the background and text colors of messages sent by the event administrator.
     • Chat section title: Customize the title text of the chat section presented next to the live streaming player.
     • Comment box: Customize the text content presented in the chat input field.
     • Send message button: Customize the background color, icon, and icon color of the send-message button.

Once you finish the customization, refresh the store website to view the applied changes. Note that these customization settings will be automatically saved and retained for all your next live events.

If you wish to revert to the default settings, click the Default Version button to undo your modifications and restore the original configuration.

Once your live-streaming event is complete, you need to finalize it to wrap up the process. Follow these steps to finalize your event:

1. In the events list, find the desired event and click the arrow button in the Action column.
2. Change the status of the event to Finalized by toggling the Status button.

The process of finalizing the live shopping event may take a while. Do not close the page until the process is complete, when the Finalized status turns green.

After the live event is concluded, go to the Recording of the event section to receive the event recording via email or download it directly from the browser, if desired. The download process typically takes around 60 minutes, and you will be provided with the progress percentage of the download.

To gain valuable insights into the performance of your live-streaming event, you can track its data using the Live Shopping app. By analyzing engagement and sales key performance indicators (KPIs), you can assess the effectiveness of your event and make informed decisions for future improvements. Follow the steps below to access and review the event's data:

1. In the events list, locate the desired event and click the graphics button in the Action column.
2. Check out the engagement and sales KPIs related to the event as in the following:

The Global Page feature provides a comprehensive view of past, present, and upcoming events associated with your account, enabling enhanced engagement and sales opportunities even after the events have concluded or before they occur. See the following example of a Global Page:

The Global Page incorporates the following key features:

• Live player: Dedicated player for streaming the selected live shopping event, including the list of featured products and chat.
• Category filtering: Filters that allow visitors to efficiently browse and explore events based on their specific interests.
• Current live events carousel: Carousel that showcases the live shopping events currently taking place.
• Past events carousel: Carousel that displays previously held live shopping events, providing an opportunity for continued engagement and sales even after the events have ended.
• Future events carousel: Carousel that highlights upcoming live shopping events, allowing users to generate anticipation and plan accordingly.
• Event sharing: Sharing options for each event to promote and invite participants.

Follow the steps below to configure the landing page for live shopping events:

1. Access the Admin.
2. Navigate to Apps > Live Shopping > Global page.
3. In the Settings section, enable the checkboxes corresponding to the type of events (Live Events, Past Events, Future Events) you want to display on your events landing page.

   You will also find the landing page code in the Settings section. This code can be embedded in your storefront wherever you prefer.

4. In the Lives section, use filters to refine the event selection based on category or status (Active and Inactive). This will help you locate the specific events you wish to showcase on your landing page.
5. For each tab (Past, Lives, Future), enable the checkboxes for the events you want to display in the Past Events, Current Live Event, and Future Events carousels on the landing page, respectively.
6. Once you have selected the events, click Edit for each selected event. This will allow you to define the desired start and end points of the recording or update its category.