Una vez que tu evento esté configurado en Bundle o en un estudio externo y antes de empezar la transmisión, tienes que agregar el componente de Live Shopping en tu sitio web, ya sea en la página de inicio de la tienda o en la landing page. La configuración varía dependiendo de la solución de frontend de tu tienda:

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

Después de configurar el componente de Live Shopping, los cambios pueden tardar entre cinco y diez minutos en reflejarse en el storefront debido a la caché.

En tiendas que utilizan Store Framework, sigue estos pasos para agregar el componente de Live Shopping desde Site Editor:

1. En el Admin VTEX, accede a Storefront > Site Editor, o ingresa Site Editor en la barra de búsqueda en la parte superior de la página.
2. En la lista de Bloques en el lado derecho de la página, selecciona Live Shopping.
3. Activa la opción Mostrar componente.
4. Haz clic en el menú desplegable de Eventos (en vivo) y selecciona el evento deseado. Las opciones mostradas solo incluyen eventos con status En vivo.
5. Haz clic en Guardar.

En tiendas que utilizan CMS - Portal Legado, sigue los pasos a continuación para agregar el componente de Live Shopping:

1. En la página Información del evento del evento creado, haz clic en el ícono de flecha.
2. Después de activar el evento, accede a la sección Configuración CMS.
3. En Script para plantilla, selecciona Plantilla CMS.
4. Copia el código en Script para plantilla.

5. Accede a Storefront > Layout, o ingresa Layout en la barra de búsqueda de la parte superior de la página.
6. Haz clic en CMS > HTML Templates.
7. Pega el código en el archivo HTML deseado.

En tiendas que utilizan Headless CMS, sigue los pasos a continuación para agregar el componente de Live Shopping:

1. En la página Información del evento del evento creado, haz clic en el ícono de flecha.
2. Accede a la sección Configuración CMS.
3. En Script para plantilla, selecciona Plantilla externa.
4. Copia el código en Script para plantilla.

5. Pega el código en el archivo HTML deseado.

Después de configurar el evento, puedes acceder a una vista previa haciendo clic en el botón Vista previa. Sin embargo, como esta vista previa muestra únicamente ciertos componentes de Live Shopping, te recomendamos realizar una revisión completa de todo el sitio web para confirmar que todo funcione correctamente.

Para insertar el componente de Live Shopping en tu proyecto sigue los pasos a continuación:

Esta funcionalidad está disponible como solución nativa en la versión más reciente de FastStore. Si tu storefront utiliza FastStore v1 o v2, consulta la guía Implementing Live Shopping for FastStore previous versions.

1. En el Admin VTEX, accede a Apps > Live Shopping > Eventos, o ingresa Eventos en la barra de búsqueda en la parte superior de la página.
2. En la columna Acciones, haz clic en la flecha para ir a la página del evento.
3. En la sección Detalles, copia el valor ID, un código único compuesto por números y letras. Puedes utilizar el botón Copiar al portapapeles.
4. Accede a Storefront > Headless CMS, o ingresa Headless CMS en la barra de búsqueda en la parte superior de la página.
5. Selecciona la página en la que quieres insertar el componente Live Shopping Player.
6. En la pestaña Secciones, agrega el reproductor haciendo clic en + Agregar sección en el lugar deseado.
7. En la ventana Agregar sección, haz clic en Live Shopping Player.
8. En el campo Live Shopping Player, pega el valor ID que copiaste.
9. Haz clic en Guardar.
10. Cuando sea el momento de mostrar el reproductor en el storefront, haz clic en Publicar > Publicar ahora.
11. (Opcional) Si la versión de la página había sido publicada anteriormente y se abre la ventana Sustituir versión publicada, haz clic en Sustituir.

Después de unos momentos, el deploy finalizará y el status en la sección Versiones cambiará a Publicado.