{"section":"tracks","requestedLocale":"es","requestedSlug":"insertar-componente-de-live-shopping","locale":"es","slug":"insertar-componente-de-live-shopping","path":"docs/es/tracks/omnichannel/vtex-live-shopping-primeros-pasos/insertar-componente-de-live-shopping.md","branch":"main","content":"Una vez que tu evento esté [configurado en Bundle](/es/docs/tracks/usar-studio-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](/es/docs/tutorials/live-shopping-configurar-landing-page-para-transmisiones-en-vivo). La configuración varía dependiendo de la solución de frontend de tu tienda:\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> ⚠️ 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é.\n\n## Store Framework (VTEX IO)\n\nEn tiendas que utilizan [Store Framework](/es/tracks/serie-de-la-tienda-vtex--eSDNk26pdvemF3XKM0nK9/67SCtUreXxKYWhZh8n0zvZ#store-framework), sigue estos pasos para agregar el componente de **Live Shopping** desde [Site Editor](/es/docs/tutorials/gestionar-contenido-de-paginas-y-templates): \n\n1. 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.\n2. En la **lista de Bloques** en el lado derecho de la página, selecciona **Live Shopping**.\n3. Activa la <i class=\"fas fa-toggle-on\" aria-hidden=\"true\"></i> opción `Mostrar componente`.\n4. Haz clic en el menú desplegable de **Eventos (en vivo)** y selecciona el evento deseado. Las opciones mostradas solo incluyen eventos con [status](/es/tracks/vtex-live-shopping-primeros-pasos--3eCHNCIx8XhZOSmX0sQT3U/5WLXGbOSFmxN7QlzOnfGrv#status-del-evento) `En vivo`.\n5. Haz clic en `Guardar`.\n\n## CMS - Portal Legado\n\nEn tiendas que utilizan [CMS - Portal Legado](/es/docs/tracks/cms-portal-legado), sigue los pasos a continuación para agregar el componente de **Live Shopping**: \n\n1. En la página **Información del evento** del [evento creado](/es/docs/tracks/crear-evento), haz clic en el ícono de flecha.\n2. Después de [activar el evento](/es/docs/tracks/iniciar-evento), accede a la sección **Configuración CMS**.\n3. En **Script para plantilla**, selecciona `Plantilla CMS`.\n4. Copia el código en **Script para plantilla**.\n\n  ![article_4_legacy_cms_portal_ES](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tracks/omnichannel/vtex-live-shopping-primeros-pasos/insertar-componente-de-live-shopping_1.png)\n\n5. Accede a **Storefront > Layout**, o ingresa **Layout** en la barra de búsqueda de la parte superior de la página.\n6. Haz clic en **CMS > HTML Templates**.\n7. Pega el código en el archivo HTML deseado.\n\n## Headless CMS\n\nEn tiendas que utilizan [Headless CMS](/es/docs/tutorials/headless-cms-vision-general), sigue los pasos a continuación para agregar el componente de **Live Shopping**: \n\n1. En la página **Información del evento** del [evento creado](/es/docs/tracks/crear-evento), haz clic en el ícono de flecha.\n2. Accede a la sección **Configuración CMS**.\n3. En **Script para plantilla**, selecciona `Plantilla externa`.\n4. Copia el código en **Script para plantilla**.\n\n  ![article_4_headless_cms_ES](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/es/tracks/omnichannel/vtex-live-shopping-primeros-pasos/insertar-componente-de-live-shopping_2.png)\n\n5. Pega el código en el archivo HTML deseado.\n\n> ❗ Después de configurar el evento, puedes acceder a una vista previa haciendo clic en el botón [Vista previa](/es/tracks/vtex-live-shopping-primeros-pasos--3eCHNCIx8XhZOSmX0sQT3U/125yr6jAfwiiz84JP4ppfO#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.\n\n## FastStore\n\nPara insertar el componente de **Live Shopping** en tu proyecto sigue los pasos a continuación:\n\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](https://developers.vtex.com/docs/guides/faststore/getting-started-faststore-versions-and-support-levels), consulta la guía [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. 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.\n2. En la columna **Acciones**, haz clic en la flecha para ir a la [página del evento](/es/docs/tutorials/live-shopping-eventos).\n3. 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`.\n4. Accede a **Storefront > Headless CMS**, o ingresa **Headless CMS** en la barra de búsqueda en la parte superior de la página.\n5. Selecciona la página en la que quieres insertar el componente **Live Shopping Player**.\n6. En la pestaña `Secciones`, agrega el reproductor haciendo clic en `+` **Agregar sección** en el lugar deseado.\n7. En la ventana **Agregar sección**, haz clic en **Live Shopping Player**.\n8. En el campo **Live Shopping Player**, pega el valor ID que copiaste. \n9. Haz clic en `Guardar`.\n10. Cuando sea el momento de mostrar el reproductor en el storefront, haz clic en **Publicar > Publicar ahora**.\n11. (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**.\n\nDespués de unos momentos, el deploy finalizará y el status en la sección **Versiones** cambiará a `Publicado`."}