O CMS (Content Management System) serve para configurar o conteúdo exibido no app — Home, banners, vitrines/prateleiras e landing pages — consumindo dados e estruturas já existentes na VTEX.
FAQ CMS — Guia do Headless CMS VTEX para App Commerce
Documentação passo a passo de como operar o CMS do App: configurar o projeto, criar a Home, página de Categorias, Landing Pages e componentes (banner, prateleira, scroll infinito, blog).
Configurações Iniciais
Os primeiros passos para habilitar e estruturar o CMS do App na sua loja VTEX — do acesso e permissões à criação das páginas obrigatórias (Home, Categorias) e Landing Pages.
O CMS fica dentro da área de administração da VTEX, em Storefront → Headless CMS.
Acesse o Admin da VTEX da loja.
No menu, localize a seção Storefront.
Clique em Headless CMS.
Menu Storefront da VTEX com a opção Headless CMS destacada
Criar um projeto exclusivo para o app e configurar as URLs técnicas que habilitam os tipos de página e os componentes.
Acesse o Admin da VTEX da loja.
Vá em Storefront → Headless.
Crie um novo projeto para o app (ex.: “app”).
Tela do Headless CMS com botão para criar um novo projeto Abra o projeto recém-criado.
Projeto aberto no Headless CMS pronto para configuração Na tela de criação do projeto, cole as duas URLs fornecidas pelo time técnico nos campos sobre Content-Types: (1) URL de Sessões/Componentes (blocos suportados); (2) URL de Tipos de Conteúdo (Home, Categorias, Landing Page).
Salve as configurações clicando no botão “Criar”. Confirme que o projeto aparece como criado e que as opções de criação de página estão disponíveis.
Configuração do projeto com URLs de Content-Types preenchidas A partir dessa configuração, o projeto deve exibir as páginas componentes que precisam/podem ser configuradas.
Crie uma página do tipo Home (apenas 1 por projeto) e adicione os componentes iniciais, como Banners.
No projeto do app, clique em Criar documento/página.
Selecione o tipo Home.
Lista de tipos de página disponíveis, com Home em destaque Nomeie a página como “Home” — essa é uma orientação obrigatória para configuração do app.
Campo de nome da página preenchido como Home Clique no botão “+” para adicionar componentes.
Botão de adicionar componente na página Home do CMS Adicione o componente “Banners” (ou outros permitidos no seu template).
Componente Banners sendo selecionado para a Home Clique em Salvar (rascunho) e depois em Publicar (geralmente publicar agora — mas existe a opção de agendar a publicação para outro momento).
Botão Publicar exibido ao salvar a Home A estrutura do app começa a ser construída, com a criação da hierarquia de páginas, começando pela Home.
Hierarquia de páginas do app com a Home já publicada
Crie a página do tipo Categorias (apenas 1 por projeto) e configure a lista de categorias/subcategorias, com ícones e ações quando necessário.
Clique em Criar documento/página.
Selecione o tipo Categorias.
Seleção do tipo Categorias ao criar uma nova página Clique no “+” e adicione o componente de lista de categorias.
Adição do componente lista de categorias Preencha as informações do componente escolhido, clique em Salvar e depois em Publicar. A página precisa ser nomeada como “Categorias”.
Formulário do componente de categorias com botões Salvar e Publicar Cadastre as categorias (título) e, se necessário, subcategorias.
Cadastro de categorias e subcategorias Adicione subcategorias vinculadas à categoria pai.
Subcategorias aninhadas no CMS Opcional: adicione ícone para cada categoria/subcategoria.
Opcional: defina a ação (ex.: abrir vitrine, abrir link, campanha Black Friday etc.).
Configuração de ações (abrir vitrine, abrir link) em uma categoria Salvar e Publicar.
Landing Pages podem ser criadas em quantidade ilimitada e servem para campanhas (ex.: Sale, promoções, datas especiais, coleções/lançamentos) e páginas institucionais (política de troca, quem somos, regulamentos).
Clique em Criar documento/página.
Selecione o tipo Landing Page.
Seleção do tipo Landing Page ao criar uma nova página Defina um nome identificável (ex.: “Sale”, “politica-troca”, “quem-somos”).
Campo de nome da Landing Page preenchido Adicione componentes no topo conforme objetivo (ex.: Banner promocional).
Componente de topo sendo adicionado à Landing Page Configure o banner promocional principal da campanha.
Banner principal da Landing Page configurado Adicione prateleira de produtos e/ou scroll infinito quando a página exigir vitrine.
Para páginas institucionais, use componente de texto livre/HTML quando disponível.
Componente de texto livre em Landing Page institucional Use o componente HTML para inserir conteúdo customizado.
Componente HTML em Landing Page Salvar e Publicar.
Landing Page finalizada com botões Salvar e Publicar
Configurações Avançadas
Como configurar em detalhes cada componente disponível no CMS (Banner, Prateleira, Scroll Infinito e Blog) e como resolver problemas comuns durante a operação.
O banner permite subir imagens e, opcionalmente, definir uma ação ao clicar — abrir categoria, busca, produto, coleção, entre outras.
Abra o documento (Home ou Landing Page) onde deseja inserir o banner.
Documento aberto no CMS pronto para receber um banner Clique no botão “+” (adicionar componente).
Botão de adicionar componente no documento Selecione o componente “Banner”.
Seleção do componente Banner na lista Dentro do componente, clique em “Nova mídia” (ou equivalente) para adicionar imagens.
Opção Nova mídia para adicionar imagens ao banner Escolha a imagem do banner.
Seletor de imagem do banner Defina a ação do banner (opcional): abrir categoria, abrir tela de busca (com palavra de busca), abrir coleção, abrir produto (preencher identificadores necessários) ou sem ação (banner apenas informativo).
Escolha o estilo de exibição do banner (ex.: “Slide Hero” / carrossel, ou formato em grade/lista horizontal).
Salve as alterações.
Clique em “Publicar” para aplicar no app.
Publicação do banner aplicada no app
A prateleira exibe produtos com base em uma coleção/categoria existente na VTEX. É necessário informar o ID correto ou o caminho da URL onde existe a lista de produtos (ex.: “/novidades/masculino”).
Abra o documento (Home ou Landing Page) onde deseja inserir a prateleira.
Clique no botão “+” e selecione “Prateleira de produto”.
Adição do componente Prateleira de produto Defina o nome/título que aparecerá no app.
Informe a origem dos produtos — se pertencem a uma categoria ou coleção.
Preencha o ID (coleção/categoria) correspondente. A consulta por essa informação pode ser realizada no menu de Catálogo dentro do CMS.
Configuração de ID de coleção/categoria na prateleira Salve.
Clique em “Publicar”.
É um componente que exibe produtos continuamente conforme o usuário rola a tela. Recomendado como último componente da Home ou Landing Page.
Abra o documento onde deseja inserir o componente.
Clique em “+” e selecione “Scroll infinito de produtos” (nome conforme exibido).
Adição do componente Scroll infinito de produtos Configure a origem (pode ser coleção/categoria/busca, conforme opções do componente).
Salve e clique em “Publicar”.
Publicação do componente Scroll infinito
Não. O componente consome um blog já existente no WordPress; basta informar a URL.
Adicione o componente de Blog (WordPress) no documento.
Adição do componente Blog (WordPress) Informe a URL do blog WordPress (é necessário que o blog tenha sido criado no WordPress).
Defina um título (texto exibido no app).
Configure limite de posts (quando disponível).
Configuração de URL, título e limite de posts do Blog Salve e publique.
Três cenários cobrem a maior parte dos casos: CMS não aparece no menu, alteração não refletiu no app e prateleira vazia/sem produtos.