VTEX Developer Portal

The Live Shopping app allows businesses to broadcast live on the store website, increasing selling rates, enhancing user experience, and boosting customer interaction simultaneously and in real-time.

The app works on both devices, desktop, and mobile.

live-streaming-weblive-streaming-web

mobile-livestreamingmobile-livestreaming

Installation

  1. Access the Live Shopping app page on the VTEX App Store.
  2. Click on the Get app button to install the app in your VTEX account.

️ Warning

Notice that this is a paid app whose subscription costs will depend on the plan that you have chosen: Lite, Standard, or Pro. All payment details are provided at the moment of installation.

  1. Once the app is successfully installed, open your account's Store Theme app using the code editor of your preference.
  2. In the manifest.json file, add the app to the theme's peer dependencies list:
"peerDependencies": {
    "vtexventures.livestreaming": "0.x"
  }
  1. Declare the Live Shopping app in the desired template. For example:
"store.home": {
    "blocks": [
      "livestreaming",
      "rich-text#shelf-title",
      "flex-layout.row#shelf",
      "rich-text#question",
      "rich-text#link",
      "newsletter"
    ]
  },
  1. Deploy your changes.

Once you have deployed your changes, check out the app's overview on VTEX Admin and set up the app on your store's by following the instructions on the Configuration section below.

App's overview on VTEX Admin

Once you have installed the VTEX Live Shopping app, access your store's Admin > Store Setup > Live Shopping > Events and you will see an interface as the following:

app-overviewapp-overview

  • Events: section responsible for creating new events, managing them, and tracking events' data. Check out the Configuration section below. set up the app on your store's.

  • Usage: helps you track how many Live events minutes are available and were used by your account.

️ Warning

The total amount of minutes available will depend on your chosen plan: Lite, Standard, or Pro. All payment details are provided at the moment of installation.

Configuration

Creating new events

  1. Open your account Admin using your browser.
  2. In the Store Setup section, access **Live Shopping**.
  3. Click on Events.
  4. Click on the New button to schedule a new live shopping on your website.

creating-eventscreating-events

  1. Fill out the fields according to the instructions below:
  • Event Name - The desired name for the event being created.
  • UTM Source - The urchin tracking parameters, i.e., identification data for your URL. It enables you to track accesses and check where different traffic comes from.
  • Collection ID - Optional field. 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.
  1. Save your changes.

Live Shopping events

admin-eventsadmin-events

  1. In the events list, click on the desired event's arrow button (in the Action column).
  2. Copy the event's ID in the Details section.
  3. Change its status to Live by toggling the Status button.

detailsdetails

️ Warning

The event will take approximately 3 minutes to turn on, i.e., be live.

  1. Using the admin sidebar, access CMS and then **Site Editor**.
  2. Locate the Live Shopping block in your store, according to the template you have declared it, and click on it.

site-editor-configssite-editor-configs

  1. Toggle the Show component button to display the Live Shopping component on your store.
  2. Click in Item and in Events (In live) choose the desired event. Then click on APPLY.
  3. If desired, set a start and end date for the component display.

️ Info

Use the Site Editor module to configure not only the live event but also texts, images, and banners to be displayed alongside it.

  1. Save your changes.

Choosing the transmission’s Layout type

  1. In the events list, click on the desired live event's arrow button (in the Action column).
  2. In the section, Layout Type, choose the type of layout do you want for the Live event:
  • Horizontal transmission: Recommended for desktop resolutions.
  • Vertical transmission: Recommended for mobile resolutions.

Accessing the studio to be on the live stream

  1. In the events list, click on the desired live event's arrow button (in the Action column).
  2. In the section, Streaming Studio, you have two buttons:
  • COPY INVITATION: click on it and send the live event’s link to a co-host, for example, and they can enter live with you.
  • ACCESS: Access the live event studio as the host of it.

When you click on ACCESS, a new window will appear redirecting you to the live studio.

accessaccess

In the Complete my profile field, type your name and click on CONTINUE.
Then, the page will redirect you to the live event studios.

Managing events' live chat

The Live Shopping app counts with a live chat, enabling your users to engage with the event and share their questions in real-time.

  1. In the events list, click on the desired live event's arrow button (in the Action column).
  2. In the Live Chat section, keep up with real-time comments, as well as the number of viewers and likes.

live-chatlive-chat

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

new-questionnew-question

  1. In the admin sidebar, access the Block list of words section.
  2. Click on the New button to define which words will be forbidden to be displayed on the real-time chat.

block-wordsblock-words

️ Info

This feature is helpful to block rude, politician, or non-related comments from your live stream. Notice that the added words will be applied to all events, with no exceptions.

  1. Do not forget to save all of your changes during the steps.

Showing products during the Live event

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

  1. In the events list, click on the desired live event's arrow button (in the Action column).
  2. In the Products within collection section, choose the desired products to show during the Live stream and toggle the Actions button.

live-shopping-productslive-shopping-products

Finalising live-streamed events

  1. In the events list, click on the desired live event's arrow button (in the Action column).
  2. Change its status to Finalized by toggling the Status button.

️ Warning

The live shopping completion process may take a while. Do not close the page until the Finalized status is green, as shown in the image below.

finalized-statusfinalized-status

Once finished, you can request the recording of your event in Recording the event section and click on the button REQUEST VIDEO.

Tracking events' data

  1. In the events list, click on the desired event's graphic button in the Action column.
  2. Check out the events' analytics data, as shown below:

analytics-eventanalytics-event

Customization

To apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
analiticsBlocksContainer
answerContent
answerText
answerVotes
backgroundBlue
buttonContenModal
chackIconCorner
chatArea
chatBubble
chatMessage
chatText
chatTextContainer
chatTime
chatUser
container
graphicContainer
graphicsArea
iconCorner
infoTimeLineContainer
inputChat
itemWords
lifeChatContainer
lifeChatText
likeIcon
likeIconContainer
likesCounterContainer
likesNumber
liveInfoContainer
liveInfoEventName
livestreamingIndicator
loadingAnimationOne
loadingAnimationThree
loadingAnimationTwo
loadingContainer
loadingContent
loadingItem
myWishListProducts
myWishListProductsContainer
noVideoContainer
noVideoText
productsDrawer
profileIcon
shippingTermsSocialNetworks
stepper
stepperContainer
stepperDescription
stepperIcon
stepperStep
subContainer
timeContent
timeLineIndicatorIconCircle
timeLineIndicatorIconContainer
timeLineIndicatorIconLine
timeLineIndicatorIconsContainer
videoPlayerContainer
viewers
viewersContainer
wordsContent

Contributors ✨

This project follows the all-contributors specification. Contributions of any kind are welcome!

Updated 2 days ago


Live Shopping


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.