Como alterar Banners
Abaixo está o passo a passo para você atualizar os banners da home do seu aplicativo de forma autônoma, sem precisar abrir chamado para a equipe Kobe. Basta acessar o Headless CMS da VTEX e seguir os passos abaixo.
1. Acessando os Banners
Realize o login no painel administrativo da VTEX e acesse a área do app
No menu lateral, acesse Storefront > Headless CMS.
Selecione o componente "Home".
Clique no conteúdo de banner que deseja gerenciar: Carrossel | Banner ou Mosaico | Banner.
2. Substituindo uma imagem
Para trocar um banner existente:
Acesse o card do banner específico.
Clique no ícone da lixeira para excluir a imagem atual.
Clique em "Arraste e solte uma imagem ou clique para selecionar" e faça o upload do novo arquivo.
3. Guia de Configuração dos Campos
Ao editar um banner, preencha as informações conforme os critérios abaixo:
Identificação e Status
Título e Subtítulo: Nomes para identificação interna no CMS (não aparecem para o usuário).
Ativo: Chave que determina se o banner ficará visível ou oculto no aplicativo.
Dimensões e Resoluções
É fundamental respeitar os tamanhos abaixo para garantir a qualidade visual:
Tamanho
|
Dimensões (Largura x Altura)
|
Resolução Esperada (px)
|
Observação
|
P
|
360L x 53A
|
1080 x 159
| |
M
|
176L x 155A
|
528 x 465
|
Devem ser adicionados sempre em pares.
|
G
|
360L x 155A
|
1080 x 465
| |
FULL (GG)
|
360L x 587A
|
1080 x 1500
|
Link da imagem: Use apenas se não fizer o upload direto (recomenda-se priorizar o upload).
Texto de ação / Pré-processamento: Não é necessário preencher.
Destino e Redirecionamento
Define para onde o usuário será levado ao clicar no banner:
Destino do banner: Escolha entre Categoria, Coleção, Produto, Busca, Link ou AppPage.
ID ou termo de busca: Insira o identificador correspondente ao destino selecionado.
Exibir link em uma webView: Se o destino for Link, esta opção é obrigatória.
AppPage Destino: Utilize apenas se o destino for AppPage. Escolha entre uma Landing Page específica ou a seção Lojas.
ID da página de destino: Caso escolha Landing Page, o ID deve ser copiado da aba Settings da página desejada.
*
4. Programação e Publicação
Ordenação: Define o método de exibição para destinos que não sejam AppPage.
Exibição programada: Determine a data e hora exatas de início e fim para a veiculação do banner.
Após realizar as alterações, clique em Salvar e, em seguida, em Publicar. O conteúdo só será atualizado no aplicativo após a publicação.