Como criar e configurar Landing Pages
As Landing Pages (LP) no CMS VTEX oferecem flexibilidade para que os times internos personalizem a experiência do usuário de acordo com as necessidades comerciais.
1. Componentes Disponíveis
Você pode compor sua Landing Page utilizando os seguintes elementos:
Título | Landing Page
Bloco de texto Formatado | Landing Page
Botão de redirecionamento | Landing Page
Lista de Produtos
Carrossel de Produtos
Carrossel de Banners
Mosaico de Banners
Carrossel Genérico
Atenção! Ordem de exibição: Os elementos inseridos serão exibidos no aplicativo exatamente na mesma ordem em que forem posicionados dentro do CMS.
2. Criando uma Landing Page passo a passo
Realize o login no painel administrativo da VTEX e acesse o espaço do aplicativo.
Acesse o módulo Storefront > Headless CMS.
Clique em "Criar Documento" e selecione o modelo Landing Page.
Configuração Inicial (Aba Settings)
Acesse a seção "Settings - Landing Page" e preencha:
ID da Landing Page: Nome de uso interno. Este ID é fundamental para configurar o redirecionamento a partir de outros componentes (banners, cards, etc). Ele não aparece para o usuário final.
Título da Landing Page: O nome que será exibido no topo da tela dentro do aplicativo.
Adicionando Conteúdo (Aba Seções)
Acesse a aba "Seções".
Clique no ícone de "+" e insira os componentes desejados da lista mencionada no tópico 1.
Configure cada componente conforme a necessidade da campanha.
3. Como redirecionar o usuário para a Landing Page
Após criar a LP, você precisa configurar um ponto de entrada (atalho) para ela. Confira como fazer isso nos principais componentes:
Via Banner (Carrossel ou Mosaico)
No componente de Banner (na Home ou em outras telas):
No campo "Destino do Banner", selecione AppPage.
No campo "AppPage" (ou campo específico de Landing Page), insira o ID da Landing Page que você criou.
Via Card de Categoria
Na configuração de categorias:
Adicione um card de categoria.
No campo "Selecionar destino da busca", escolha a opção Landing-Page.
Insira o ID da Landing Page correspondente.
Via Card Genérico (Carrossel Genérico)
Dentro do componente de Carrossel Genérico:
No campo "Destino do Banner", selecione AppPage.
Insira o ID da Landing Page no campo indicado.
4. Salvando e Publicando
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.
Observações Técnicas
Os banners e componentes dentro de uma Landing Page seguem as mesmas especificações técnicas (tamanhos e resoluções) dos componentes utilizados na Home.
Se alguma das configurações ou componentes descritos acima não estiver visível em seu painel, entre em contato com o suporte para uma atualização gratuita do seu CMS.