{"section":"tutorials","requestedLocale":"pt","requestedSlug":"como-configurar-um-banner-em-sua-loja-cms-portal-legado","locale":"pt","slug":"como-configurar-um-banner-em-sua-loja-cms-portal-legado","path":"docs/pt/tutorials/storefront/cms-portal-legado/layout/como-configurar-um-banner-em-sua-loja-cms-portal-legado.md","branch":"main","content":">⚠️ Tutorial válido apenas para lojas CMS Portal (Legado).\n\nNeste artigo, você aprenderá a criar, editar e agendar banners no CMS Portal (Legado). Ao longo do passo a passo, você verá como acessar o layout da página, preencher os campos do banner e definir as condições de exibição.\n\nO artigo apresenta a configuração de um banner na homepage, mas o mesmo fluxo pode ser aplicado a qualquer página da loja.\n\n## Instruções\n\nPara criar ou alterar um banner na homepage de sua loja, siga os passos abaixo:\n\n1. No Admin VTEX, acesse **Storefront > Layout**.\n2. Clique na pasta **CMS > Sites and Channels**.\n3. Clique no nome do site desejado.\n4. Clique na pasta **/**.\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. Clique em **Home > Settings**, em seguida, clique no ícone de lápis para editar.\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. Na janela que será aberta, clique no ícone de lápis 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. No formulário que será aberto, preencha os campos com as configurações do banner. Saiba mais sobre cada campo na seção [Campos do formulário de banner](#campos-do-formulario-de-banner).\n8. Clique em `Update Content List` para atualizar o conteúdo do banner. O formulário será fechado e a janela aberta no passo 6 aparecerá.\n9. Clique em `Save Content` para salvar as informações. Você verá um pop-up com a mensagem `Settings saved successfully`.\n10. Clique em `OK` para fechar o pop-up.\n11. Clique em `Save Settings`\n\n    >⚠️ Se você sair da página sem clicar no botão `Save Settings`, conforme indicado no último passo, perderá todas as configurações feitas no cadastro do banner.\n\n## Campos do formulário de banner\n\nO formulário de banner é dividido em duas seções:\n- [**Campos de conteúdo**](#campos-de-conteudo-content)\n- [**Condições de exibição**](#condicoes-de-exibicao-display-condition).\n\n### Campos de conteúdo (Content)\n\n| Campo | Descrição |\n| --- | --- |\n| **Content Name** | Nome interno que identifica o banner no CMS. |\n| **Width** | Largura da imagem em pixels (exemplo: `1170px`). |\n| **Height** | Altura da imagem em pixels (exemplo: `500px`). |\n| **File Type** | Tipo de arquivo. Para banners, selecione `image`. |\n| **URL** | Link de destino ao clicar no banner. |\n| **Banner / Preview** | Campo para adicionar a imagem do banner. Veja mais detalhes na seção [Alterar ou cadastrar a imagem do banner](#alterar-ou-cadastrar-a-imagem-do-banner) |\n\n### Condições de exibição (Display Condition)\n\nAs condições de exibição permitem segmentar quando e onde o banner será exibido, conforme apresentado na tabela a seguir:\n\n| Campo | Descrição |\n| --- | --- |\n| **Partner / Campaign / Source** | Exibe o banner quando a URL de origem do visitante contém UTMs correspondentes (por exemplo, `utm_source=google&utm_medium=cpc`). |\n| **Keywords** | Vincula a exibição do banner a buscas por termo(s) específico(s) no site. |\n| **Category / Brand** | Vincula a exibição do banner às páginas específicas de categoria e/ou de marca. |\n| **Active Content** | Ativa a exibição do banner na loja. |\n| **From / To** | Define o período em que o banner ficará ativo. Veja mais detalhes na seção [Agendar um banner](#agendar-um-banner). |\n\n## Alterar ou cadastrar a imagem do banner\n\nPara fazer uma alteração ou cadastro de uma nova imagem, siga os passos abaixo:\n\n1. Na seção **Content** do formulário de banner, clique em `add file`. A janela **Insert File** será aberta, com opções para localizar um arquivo existente ou enviar um novo.\n\n    ![inserir-image-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. Escolha uma das opções a seguir para definir a imagem que será usada no banner:\n\n    **Usar um arquivo existente**\n\n    a. Em **Find by name**, digite o nome do arquivo para encontrá-lo.\n    \n    b. Se souber o identificador do arquivo, você pode preencher o campo `File Id` para encontrá-lo.\n    \n    c. Clique em `Find` para executar a busca.\n\n    **Enviar uma nova imagem**\n\n    a. Em **Insert a new file**, clique em `Browse for file`.\n    \n    b. Selecione a imagem do seu computador.\n\n3. Após localizar ou selecionar o arquivo, clique em `Adicionar` para vinculá-lo ao banner.\n4. Clique em `Update Content List` para atualizar o conteúdo do banner.\n5. Clique em `Save Content` para salvar as informações. Você verá um pop-up com a mensagem `Settings saved successfully`.\n6. Clique em `OK` para fechar o pop-up.\n7. Clique em `Save Settings`\n\n    >⚠️ Se você sair da página sem clicar no botão `Save Settings`, conforme indicado no último passo, perderá todas as configurações feitas no cadastro do banner.\n\n## Agendar um banner\n\nPara agendar um banner, você precisa configurar os campos **From** e **To** com as datas de início e término de exibição e, obrigatoriamente, marcar a opção `Active Content`. Caso a opção `Active Content` não esteja marcada, o banner não será exibido, mesmo que as datas estejam configuradas.\n\n>⚠️ O CMS Portal (Legado) utiliza **UTC-0 (GMT)** nos campos **From** e **To**. Por exemplo, se você deseja que o banner seja exibido a partir das 10h no horário de Brasília (UTC-3), configure o campo **From** para as 13h (10h + 3h = 13h, em UTC-0)."}