{"section":"tutorials","requestedLocale":"es","requestedSlug":"como-configurar-un-banner-en-tu-tienda-cms-portal-legado","locale":"es","slug":"como-configurar-un-banner-en-tu-tienda-cms-portal-legado","path":"docs/es/tutorials/storefront/cms-portal-legado/layout/como-configurar-un-banner-en-tu-tienda-cms-portal-legado.md","branch":"main","content":">⚠️ Este tutorial solo es válido para tiendas CMS Portal (Legado).\n\nEn este artículo aprenderás a crear, editar y programar banners en el CMS Portal (Legado). A lo largo de las instrucciones se explica cómo acceder al layout de la página, completar los campos del banner y definir las condiciones de visualización.\n\nEl artículo muestra cómo configurar un banner en la página de inicio, pero el mismo procedimiento puede aplicarse a cualquier página de la tienda.\n\n## Instrucciones\n\nPara crear o modificar un banner en la página de inicio de tu tienda sigue los pasos a continuación:\n\n1. En el Admin VTEX, accede a **Storefront > Layout**.\n2. Haz clic en la carpeta **CMS > Sites and channels**.\n3. Haz clic en el nombre del sitio web deseado.\n4. Haz clic en la carpeta **/**.\n\n    ![instrução CMS -pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/cms-portal-legado/layout/como-alterar-banner_1.png)\n\n5. Haz clic en **Home > Settings**.\n\n    ![cms-home-settings PT](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/cms-portal-legado/layout/como-alterar-banner_2.png)\n\n6. En la ventana que se abre, haz clic en el ícono de lápiz para editar.\n\n    ![cms_home_settings_lapis pt](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/cms-portal-legado/layout/como-alterar-banner_3.png)\n\n7. Llena en el formulario los campos con las configuraciones del banner. Aprende más sobre cada campo en la sección [Campos del formulario de banner](#campos-del-formulario-de-banner).\n8. Haz clic en `Update Content List` para actualizar el contenido del banner. El formulario se cerrará y se mostrará la ventana abierta en el paso 6.\n9. Haz clic en `Save Content` para guardar la información. Verás una ventana emergente con el mensaje `Settings saved successfully`.\n10. Haz clic en `OK` para cerrar la ventana emergente.\n11. Haz clic en `Save Settings`\n\n    >⚠️ Si sales de la página sin hacer clic en el botón `Save Settings`, como se indica en el último paso, perderás toda la configuración realizada en el registro del banner.\n\n## Campos del formulario de banner\n\nEl formulario de banner se divide en dos secciones:\n\n- [**Content (contenido)**](#content)\n- [**Condiciones de exhibición**](#display-condition-condiciones-de-exhibicion).\n\n### Content\n\n| Campo | Descripción |\n| --- | --- |\n| **Content Name** | Nombre interno que identifica el banner en el CMS. |\n| **Width** | Anchura de la imagen en píxeles (ejemplo: `1170px`). |\n| **Height** | Altura de la imagen en píxeles (ejemplo: `500px`). |\n| **File Type** | Tipo de archivo. Para banners, selecciona `image`. |\n| **URL** | Link de destino al hacer clic en el banner. |\n| **Banner \\ | Preview** | Campo para agregar la imagen del banner. Consulta más detalles en la sección [Cambiar o agregar la imagen del banner](#modificar-o-cargar-imagen-del-banner) |\n\n### Display Condition (condiciones de exhibición)\n\nLas condiciones de exhibición permiten segmentar cuándo y dónde se mostrará el banner, como se muestra en la siguiente tabla:\n\n| Campo | Descripción |\n| --- | --- |\n| **Partner/Campaign/Source** | Muestra el banner cuando la URL de origen del visitante contiene parámetros UTM coincidentes (ejemplo: `utm_source=google&utm_medium=cpc`). |\n| **Keywords** | Vincula la visualización del banner a búsquedas por términos específicos en el sitio web. |\n| **Category/Brand** | Vincula la exhibición del banner a páginas específicas de categoría y/o marca. |\n| **Active Content** | Activa la exhibición del banner en la tienda. |\n| **From/To** | Define el periodo en el que el banner estará activo. Consulta más detalles en la sección [Programar un banner](#programar-un-banner). |\n\n## Modificar o cargar imagen del banner\n\nPara hacer cambios o cargar una nueva imagen sigue estos pasos:\n\n1. En la sección **Content** del formulario de banner, haz clic en `add file`. Se abrirá la ventana **Insert File**, con opciones para buscar un archivo existente o cargar uno nuevo.\n\n    ![insertar-imagen-banner](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/storefront/cms-portal-legado/layout/inserir-imagem-banner.png)\n\n2. Elige una de las siguientes opciones para definir la imagen del banner:\n\n   **Utilizar un archivo existente**\n\n   a. En **Find by name**, ingresa el nombre del archivo para encontrarlo.\n\n   b. Si conoces el identificador del archivo, puedes llenar el campo `File Id` para encontrarlo.\n\n   c. Haz clic en `Find` para ejecutar la búsqueda.\n\n   **Cargar una nueva imagen**\n\n   a. En **Insert a new file**, haz clic en `Browse for file`.\n\n   b. Selecciona la imagen de tu computadora.\n\n3. Después de encontrar o seleccionar el archivo, haz clic en `Abrir` para vincularlo al banner.\n4. Haz clic en `Save file` para actualizar el contenido del banner.\n5. Haz clic en `Save Content` para guardar la información. Verás una ventana emergente con el mensaje `Settings saved successfully`.\n6. Haz clic en `OK` para cerrar la ventana emergente.\n7. Haz clic en `Save Settings`\n\n    >⚠️ Si sales de la página sin hacer clic en el botón `Save Settings`, como se indica en el último paso, perderás toda la configuración realizada en el registro del banner.\n\n## Programar un banner\n\nPara programar un banner, debes configurar los campos **From** y **To** con las fechas de inicio y de fin de exhibición y, obligatoriamente, marcar la opción `Active Content`. Si la opción `Active Content` no está marcada el banner no se mostrará, aunque las fechas estén configuradas.\n\n>⚠️ El CMS Portal (Legado) utiliza **UTC-0 (GMT)** en los campos **From** y **To**. Por ejemplo, si quieres que el banner se muestre a partir de las 10 a. m., hora de Brasilia (UTC-3), configura el campo **From** a la 1 p. m. (10 a. m. + 3 h = 1 p. m., en UTC-0)."}