Depois que seu evento estiver configurado no 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. As etapas de configuração variam de acordo com a solução de frontend da sua loja:

• Store Framework (VTEX IO)
• CMS - Portal Legado
• Headless CMS
• FastStore

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.

Para lojas que usam Store Framework, siga as etapas abaixo para adicionar o componente Live Shopping através do Site Editor:

1. No Admin VTEX, acesse Storefront > Site Editor, ou digite Site Editor na barra de busca no topo da página.
2. Na lista Blocos, no lado direito da página, selecione o bloco Live Shopping .
3. Ative a opção Mostrar componente.
4. Clique no menu suspenso Eventos (ao vivo) e selecione o evento desejado. As opções exibidas incluem apenas eventos com o status Ao vivo.
5. Clique em Salvar.

Para lojas que usam CMS - Portal Legado, siga as etapas abaixo para adicionar o componente Live Shopping:

1. Na página Informações do evento do evento criado, clique no ícone de seta.
2. Após ativar o evento, acesse a seção Configuração do CMS.
3. Em Script para o template, selecione Template CMS.
4. Copie o código em Script para o template.

5. Acesse Storefront > Layout, ou digite Layout na barra de busca no topo da página.
6. Clique em CMS > Templates HTML.
7. Cole o código no arquivo HTML desejado.

Para lojas que usam Headless CMS, siga as etapas abaixo para adicionar o componente Live Shopping:

1. Na página Informações do evento do evento criado, clique no ícone de seta.
2. Acesse a sessão de Configuração do CMS.
3. Em Script para o template, selecione Template externo.
4. Copie o código em Script para o template.

5. Cole o código no arquivo HTML desejado.

Após configurar o evento, é possível visualizá-lo clicando no botão Pré-visualização. 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.

Para adicionar o componente Live Shopping ao seu projeto, siga os passos abaixo:

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, acesse o guia Implementing Live Shopping for FastStore previous versions.

1. No Admin VTEX, acesse Apps > Live Shopping > Eventos, ou digite Eventos na barra de busca no topo da página.
2. Na coluna Ação, clique na seta para acessar a página do evento.
3. 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.
4. Acesse Storefront > Headless CMS, ou digite Headless CMS na barra de busca no topo da página.
5. Selecione a página em que deseja adicionar o Live Shopping Player.
6. Na aba Seções, adicione o reprodutor de mídia clicando em + Adicionar seção no local desejado.
7. Na janela Adicionar seção, clique em Live Shopping Player.
8. No campo Live Shopping Player, cole o ID do evento que você copiou.
9. Clique em Salvar.
10. Quando estiver pronto para exibir o reprodutor de mídia no storefront, clique em Publicar > Publicar agora.
11. (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.

Após alguns instantes, o deploy será concluído e o status na seção Versões mudará para Publicado.