{"section":"tracks","requestedLocale":"en","requestedSlug":"placing-the-live-shopping-component","locale":"en","slug":"placing-the-live-shopping-component","path":"docs/en/tracks/omnichannel/vtex-live-shopping-getting-started/placing-the-live-shopping-component.md","branch":"main","content":"Once your event is [configured on Bundle](/en/docs/tracks/using-bundle-studio) 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](/en/docs/tutorials/live-shopping-configuring-a-landing-page-for-live-shopping-events). The configuration steps vary depending on your store frontend solution:\n\n* [Store Framework (VTEX IO)](#store-framework-vtex-io)\n* [Legacy CMS Portal](#legacy-cms-portal)\n* [Headless CMS](#headless-cms)\n* [FastStore](#faststore)\n\n> ⚠️ 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.\n\n## Store Framework (VTEX IO)\n\nFor stores using [Store Framework](/en/tracks/vtex-store-overview--eSDNk26pdvemF3XKM0nK9/67SCtUreXxKYWhZh8n0zvZ#store-framework), follow the steps below to place the **Live Shopping** component from [Site Editor](/en/docs/tutorials/managing-page-and-template-content): \n\n1. In the VTEX Admin, go to **Storefront > Site Editor**, or type **Site Editor** in the search bar at the top of the page.\n2. On the **Blocks** list on the right side of the page, select the **Live Shopping** block.\n3. Activate the <i class=\"fas fa-toggle-on\" aria-hidden=\"true\"></i> `Show component` option.\n4. Click the **Events (Live)** dropdown and select the desired event. The options displayed only include events with `Live` [status](/en/tracks/vtex-live-shopping-getting-started--3eCHNCIx8XhZOSmX0sQT3U/5WLXGbOSFmxN7QlzOnfGrv#event-status).\n5. Click `Save`.\n\n## Legacy CMS Portal\n\nFor stores using [Legacy CMS Portal](/en/docs/tracks/legacy-cms-portal), follow the steps below to place the **Live Shopping** component: \n\n1. In the **Event Information** page of the [created event](/en/docs/tracks/creating-event), click the arrow icon.\n2. After [turning on the event](/en/docs/tracks/turning-on-event), go to the **CMS Configuration** section.\n3. In **Script for template**, select `CMS template`.\n4. Copy the code in **Script for template**.\n\n  ![article_4_legacy_cms_portal_EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/omnichannel/vtex-live-shopping-getting-started/placing-the-live-shopping-component_1.png)\n\n5. Go to **Storefront > Layout**, or type **Layout** in the search bar at the top of the page.\n6. Click **CMS > HTML Templates**.\n7. Paste the code in the desired HTML file.\n\n## Headless CMS\n\nFor stores using [Headless CMS](/en/docs/tutorials/headless-cms-overview), follow the steps below to place the **Live Shopping** component: \n\n1. In the **Event Information** page of the [created event](/en/docs/tracks/creating-event), click the arrow icon.\n2. Go to the **CMS Configuration** section.\n3. In **Script for template**, select `External template`.\n4. Copy the code in **Script for template**.\n\n  ![article_4_headless_cms_EN](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/en/tracks/omnichannel/vtex-live-shopping-getting-started/placing-the-live-shopping-component_2.png)\n\n5. Paste the code in the desired HTML file.\n\n> ❗ After configuring the event, you can see a preview by clicking the [preview](/en/tracks/vtex-live-shopping-getting-started--3eCHNCIx8XhZOSmX0sQT3U/125yr6jAfwiiz84JP4ppfO#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.\n\n## FastStore\n\nTo place the **Live Shopping** component on your project, follow the steps below:\n\n> ℹ️ This feature is available as a native solution in the latest version of FastStore. If your storefront uses [FastStore v1 or v2](https://developers.vtex.com/docs/guides/faststore/getting-started-faststore-versions-and-support-levels), see the guide [Implementing Live Shopping for FastStore previous versions](https://developers.vtex.com/docs/guides/faststore/storefront-features-implementing-live-shopping-for-faststore-previous-versions).\n\n1. In the VTEX Admin, go to **Apps > Live Shopping > Events**, or type **Events** in the search bar at the top of the page.\n2. In the **Action** column, click the arrow button to go to the [Event page](/en/docs/tutorials/live-shopping-events).\n3. In the **Details** section, copy the `ID` value, a unique code of numbers and letters. You can use the `Copy to clipboard` button.\n4. Go to **Storefront > Headless CMS**, or type **Headless CMS** in the search bar at the top of the page.\n5. Select the page where you want to add the **Live Shopping Player**.\n6. In the `Sections` tab, add the player by clicking `+` **Add Section** on the desired place.\n7. In the **Add Section** window, click **Live Shopping Player**.\n8. In the **Live Shopping Player** field, paste the event ID you copied.\n9. Click `Save`.\n10. When you're ready to display the player on the storefront, click **Publish > Publish Now**. \n11. (Optional) If the page version has been published before and the **Overwrite Published Version **window opens, click `Overwrite`.\n\nAfter a few moments, the deploy will be completed and the status in the **Versions** section will change to `Published`."}