Os banners são componentes de imagem exibidos na home, e possuem dois tipos de visualização: carrossel e mosaico. Os passos a seguir explicam como configurá-los dentro do Headless CMS da VTEX.
- Realize o login no painel administrativo da VTEX e entre no espaço destinado app
Exemplo: - Vá no módulo "Storefront" e clique na função "Headless CMS"
- Entre no componente "Home" e clique no conteúdo de banner que você deseja alterar (Carrossel l Banner ou Mosaico l Banner).
- Para substituir um banner já existente dentro do componente selecionado, basta acessar o card do banner que deseja alterar e clicar no ícone da lixeira para excluir o banner atual.
- Em seguida, clique em "Arraste e solte uma imagem ou clique para selecionar" e escolha a nova imagem de banner a ser carregada
- Ao finalizar a criação, lembre-se de clicar em "Salvar" e depois em "Publicar" para garantir que as alterações sejam armazenadas e o conteúdo seja disponibilizado no app
Configurando o Banner
Ao abrir um card de banner para edição, preencha os campos indicados conforme as instruções abaixo:
- Título: Nome para identificação do componente, não será exibido para os usuários.
- Subtítulo: Descrição extra para ser dada ao componente, não será exibido para os usuários.
- Ativo: Determina se o componente estará ativo ou não no app.
-
Tamanho: Define se o banner terá tamanho P, M, G ou FULL/GG. Banners M só podem ser adicionados em pares.
Tamanhos padrões esperados das imagens (Largura x Altura) - P: 360L x 53A, M: 176L x 155A, G: 360L x 155A, FULL: 360L x 587A.
Resolução padrão esperada das imagens - P: 1080x159 px, M: 528x465 px, G: 1080x465 px, FULL: 1080x1500 px. - Texto de ação: Não é necessário preencher
- Imagem: Adicionar imagem do banner de acordo com o tamanho escolhido.
- Link da imagem: Caso não adicione diretamente uma imagem, pode ser inserido o link para essa imagem (não utilizar as duas formas ao mesmo tempo, preferência pelo upload direto).
- Destino do banner: Define se o banner irá redirecionar para Categoria, Coleção, Produto, Busca, Link ou AppPage.
- Id ou termo de busca relativo ao tipo de destino: Para todos os tipos menos AppPage, adicionar o termo necessário para completar o redirecionamento.
- Deseja exibir o link em uma webView: Caso tenha escolhido o destino Link como Banner, é obrigatório selecionar essa opção.
- AppPage Destino: Caso tenha selecionado o destino como AppPage (e somente nesse caso), selecione se deseja que o redirecionamento seja feito para uma Landing Page ou para "Lojas" que é nosso componente que mostra as lojas mais próximas ao cliente naquele momento.
-
ID da página de destino (landing page):Insira o ID associado à landing page de destino. Você pode encontrá-lo acessando o componente da landing page desejada e, em seguida, a aba Settings-Landing Page.
- Ordenação: Escolhe o método de ordenação desejado para a página em caso de destinos que não sejam AppPage.
- Exibição programada (início e fim): Define o período de exibição do componente.
- Ação de pré-processamento: Não é necessário preencher
Caso fique com alguma dúvida, você pode enviar um e-mail para suporte@kobe.io.