{"section":"tracks","requestedLocale":"pt","requestedSlug":"adicionar-componente-do-live-shopping","locale":"pt","slug":"adicionar-componente-do-live-shopping","path":"docs/pt/tracks/omnichannel/vtex-live-shopping-primeiros-passos/adicionar-componente-do-live-shopping.md","branch":"main","content":"Depois que seu evento estiver [configurado no Bundle](/pt/docs/tracks/usar-studio-bundle) ou em um estúdio externo e antes de transmiti-lo, adicione o componente **Live Shopping** ao seu site, seja na página inicial da loja ou em uma [landing page](/pt/docs/tutorials/live-shopping-configurar-landing-page-para-transmissoes-ao-vivo). As etapas de configuração variam de acordo com a solução de frontend da sua loja:\n\n* [Store Framework (VTEX IO)](#store-framework-vtex-io)\n* [CMS - Portal Legado](#cms-portal-legado)\n* [Headless CMS](#headless-cms)\n* [FastStore](#faststore)\n\n> ⚠️ Após configurar o componente **Live Shopping**, as alterações podem levar de cinco a dez minutos para serem refletidas no storefront devido ao cache.\n\n## Store Framework (VTEX IO)\n\nPara lojas que usam [Store Framework](/pt/tracks/trilha-da-loja-vtex--eSDNk26pdvemF3XKM0nK9/67SCtUreXxKYWhZh8n0zvZ#store-framework), siga as etapas abaixo para adicionar o componente **Live Shopping** através do [Site Editor](/pt/docs/tutorials/gerenciando-conteudo-de-pagina-e-template):\n\n1. No Admin VTEX, acesse **Storefront > Site Editor**, ou digite **Site Editor** na barra de busca no topo da página.\n2. Na lista **Blocos**, no lado direito da página, selecione o bloco **Live Shopping** .\n3. Ative a opção <i class=\"fas fa-toggle-on\" aria-hidden=\"true\"></i> `Mostrar componente`.\n4. Clique no menu suspenso **Eventos (ao vivo)** e selecione o evento desejado. As opções exibidas incluem apenas eventos com o [status](/pt/tracks/vtex-live-shopping-primeiros-passos--3eCHNCIx8XhZOSmX0sQT3U/5WLXGbOSFmxN7QlzOnfGrv#status-do-evento) `Ao vivo`.\n5. Clique em `Salvar`.\n\n## CMS - Portal Legado\n\nPara lojas que usam [CMS - Portal Legado](/pt/docs/tracks/cms-portal-legado), siga as etapas abaixo para adicionar o componente **Live Shopping**:\n\n1. Na página **Informações do evento** do [evento criado](/pt/docs/tracks/criar-evento), clique no ícone de seta.\n2. Após [ativar o evento](/pt/docs/tracks/iniciar-evento), acesse a seção **Configuração do CMS**.\n3. Em **Script para o template**, selecione `Template CMS`.\n4. Copie o código em **Script para o template**.\n\n  ![article_4_legacy_cms_portal_PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tracks/omnichannel/vtex-live-shopping-primeiros-passos/adicionar-componente-do-live-shopping_1.png)\n\n5. Acesse **Storefront > Layout**, ou digite **Layout** na barra de busca no topo da página.\n6. Clique em **CMS > Templates HTML**.\n7. Cole o código no arquivo HTML desejado.\n\n## Headless CMS\n\nPara lojas que usam [Headless CMS](/pt/docs/tutorials/headless-cms-visao-geral), siga as etapas abaixo para adicionar o componente **Live Shopping**: \n\n1. Na página **Informações do evento** do [evento criado](/pt/docs/tracks/criar-evento), clique no ícone de seta.\n2. Acesse a sessão de **Configuração do CMS**.\n3. Em **Script para o template**, selecione `Template externo`.\n4. Copie o código em **Script para o template**.\n\n  ![article_4_headless_cms_PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tracks/omnichannel/vtex-live-shopping-primeiros-passos/adicionar-componente-do-live-shopping_2.png)\n\n5. Cole o código no arquivo HTML desejado.\n\n> ❗ Após configurar o evento, é possível visualizá-lo clicando no botão [Pré-visualização](/pt/tracks/vtex-live-shopping-primeiros-passos--3eCHNCIx8XhZOSmX0sQT3U/125yr6jAfwiiz84JP4ppfO#pre-visualizacao). No entanto, como essa visualização exibe somente determinados componentes do **Live Shopping**, recomendamos fazer verificações adicionais em todo o site para garantir que tudo esteja funcionando corretamente.\n\n## FastStore\n\nPara adicionar o componente **Live Shopping** ao seu projeto, siga os passos abaixo:\n\n> ℹ️ Essa funcionalidade está disponível como uma solução nativa para a última versão da FastStore. Se a sua loja usa [FastStore v1 ou v2](https://developers.vtex.com/docs/guides/faststore/getting-started-faststore-versions-and-support-levels), acesse o guia [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. No Admin VTEX, acesse **Apps > Live Shopping > Eventos**, ou digite **Eventos** na barra de busca no topo da página.\n2. Na coluna **Ação**, clique na seta para acessar a [página do evento](/pt/docs/tutorials/live-shopping-eventos). \n3. Na seção **Detalhes**, copie o `ID`, um código único composto por letras e números. Você pode usar o botão `Copiar para área de transferência`. \n4. Acesse **Storefront > Headless CMS**, ou digite **Headless CMS** na barra de busca no topo da página.\n5. Selecione a página em que deseja adicionar o **Live Shopping Player**.\n6. Na aba `Seções`, adicione o reprodutor de mídia clicando em `+` **Adicionar seção** no local desejado. \n7. Na janela **Adicionar seção**, clique em **Live Shopping Player**.\n8. No campo **Live Shopping Player**, cole o ID do evento que você copiou.\n9. Clique em `Salvar`.\n10. Quando estiver pronto para exibir o reprodutor de mídia no storefront, clique em **Publicar > Publicar agora**. \n11. (Opcional) Se a versão da página já tiver sido publicada anteriormente e a janela **Substituir versão publicada** for exibida, clique em `Substituir`.\n\nApós alguns instantes, o deploy será concluído e o status na seção **Versões** mudará para `Publicado`."}