Once your event is configured on Bundle or an external studio and before transmitting it, place the Live Shopping component on your site, whether on the store homepage or a landing page. The configuration steps vary depending on your store frontend solution:

• Store Framework (VTEX IO)
• Legacy CMS Portal
• Headless CMS
• FastStore

After configuring the Live Shopping component, it may take five to ten minutes for the changes to be reflected on the storefront due to caching.

For stores using Store Framework, follow the steps below to place the Live Shopping component from Site Editor:

1. In the VTEX Admin, go to Storefront > Site Editor, or type Site Editor in the search bar at the top of the page.
2. On the Blocks list on the right side of the page, select the Live Shopping block.
3. Activate the Show component option.
4. Click the Events (Live) dropdown and select the desired event. The options displayed only include events with Live status.
5. Click Save.

For stores using Legacy CMS Portal, follow the steps below to place the Live Shopping component:

1. In the Event Information page of the created event, click the arrow icon.
2. After turning on the event, go to the CMS Configuration section.
3. In Script for template, select CMS template.
4. Copy the code in Script for template.

5. Go to Storefront > Layout, or type Layout in the search bar at the top of the page.
6. Click CMS > HTML Templates.
7. Paste the code in the desired HTML file.

For stores using Headless CMS, follow the steps below to place the Live Shopping component:

1. In the Event Information page of the created event, click the arrow icon.
2. Go to the CMS Configuration section.
3. In Script for template, select External template.
4. Copy the code in Script for template.

5. Paste the code in the desired HTML file.

After configuring the event, you can see a preview by clicking the preview button. However, since this preview only displays certain Live Shopping components, we highly recommend doing additional checks on the entire website to ensure everything is working properly.

To place the Live Shopping component on your project, follow the steps below:

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

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 Details section, copy the ID value, a unique code of numbers and letters. You can use the Copy to clipboard button.
4. Go to Storefront > Headless CMS, or type Headless CMS in the search bar at the top of the page.
5. Select the page where you want to add the Live Shopping Player.
6. In the Sections tab, add the player by clicking + Add Section on the desired place.
7. In the Add Section window, click Live Shopping Player.
8. In the Live Shopping Player field, paste the event ID you copied.
9. Click Save.
10. When you're ready to display the player on the storefront, click Publish > Publish Now.
11. (Optional) If the page version has been published before and the **Overwrite Published Version **window opens, click Overwrite.

After a few moments, the deploy will be completed and the status in the Versions section will change to Published.