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.

• It is necessary to have the CLI VTEX. Go to the next documentation for install it: VTEX IO CLI

Initial Steps for VTEX IO and VTEX CMS/Headless accounts

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 (e.g., Visual Studio Code).

---

1. In the manifest.json file, add the app to the theme's peer dependencies list:

2. Include the livestreaming blick in the desired template. For example:

   
   

   _10

   "store.home": {

   _10

   "blocks": [

   _10

   "livestreaming"

   _10

   ]

   _10

   }

   
   

3. Deploy your changes to the Store Theme app by publishing a major version. For details, refer to the guide: 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. After making the changes, publish this new major version and install it in a productive workspace (not master) to ensure it works as expected before deploying it to the live environment.

4. In the productive workspace, follow the guide Migrating CMS Settings After a Major Update to update the content for the new version.

Note: Proceed with caution to avoid deleting store content..

5. Validate the workspace and confirm the configured content. Once ready, promote the workspace to master (it will be automatically deleted after promotion).

---

Once the application is installed, go to the VTEX Admin and search for the Live Shopping Events module (Apps > Live Shopping > Events).

After creating an event and accessing its details, scroll to the bottom of the event details page. You’ll find a section called Script for Template, which contains a <div> and a <script>. These must be added to the store.

For CMS/Legacy accounts, ensure that CMS Template is selected.

An error occurred while loading the image https://github.com/user-attachments/assets/28c7a584-7c9a-4a15-8d4a-f24503998b21

For Headless accounts, ensure that External Template is selected.

An error occurred while loading the image https://github.com/user-attachments/assets/2eb5bd29-c0e3-43d8-9f64-0c97d1b336ed

The id query parameter corresponds to the event ID, which can be found at the top of the event details page and changes for each event. The account query parameter represents the account name (e.g., leidygiraldo) and remains constant once set.

It is recommended to copy and paste the full <script> tag for each event.

• Add the <div> and <script> tags to render the Live Shopping app in the store (cache updates may take 5–10 minutes).

Include them anywhere in the store, such as the home, landing, category, or other pages; for example:

Home page:

An error occurred while loading the image https://github.com/user-attachments/assets/ba49c6d7-152b-445a-b746-c1c520be6d9d

Add the tags for active events and remove them once the event ends to avoid displaying the recording.

---

Once you have everything set up (whether for VTEX IO, CMS, or Headless), check out the app behavior on VTEX Admin

Learn about the Live Shopping configuration of events and configuring a landing page.

---