Apps

Apps

1. Visão geral do CMS

Pergunta: Para que serve o CMS do App?

Resposta: 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.

O que o CMS controla:

  • Conteúdo da Home do app

  • Landing pages/campanhas (ex.: Páscoa, Sale, Natal, etc)

  • Banners (com ou sem ação)

  • Prateleiras de produtos (coleções/categorias)

  • Scroll infinito de produtos

  • Integração de blog via URL (WordPress)

O que o CMS NÃO controla:

  • Funcionalidades do app (busca, PDP, carrinho/checkout) - já implementadas no app

  • Mudanças estruturais/visuais que exigem código (ex.: header/logo)


2. Acesso e pré-requisitos (permissões)

Pergunta: Como acessar o CMS do App?

Resposta: O CMS fica dentro da área de administração da VTEX.
Acesse: Storefront → Headless CMS.

Passo a passo:

1. Acesse o Admin da VTEX da loja

2. No menu, localize a seção Storefront.

3. Clique em Headless CMS:

Pré-requisitos e permissões (crítico):

  • O acesso à conta VTEX é do cliente; a equipe de implantação não tem acesso automático.
    O cliente precisa conceder permissão de usuário para o e-mail implantacao@calindra.com.br para que a equipe consiga visualizar recursos do Storefront e habilitar o CMS.


3. Projeto do App: criar e configurar (URLs)

Pergunta: Qual é o primeiro passo para começar a operar o CMS do App?

Resposta: Criar um projeto exclusivo para o app e configurar as URLs técnicas que habilitam os tipos de página e os componentes.

Passo a passo:

1. Acesse o Admin da VTEX da loja.

2. Vá em Storefront → Headless.

3. Crie um novo projeto para o app (ex.: “app”).

Pré-requisitos e permissões (crítico):

  • O acesso à conta VTEX é do cliente; a equipe de implantação não tem acesso automático.
    O cliente precisa conceder permissão de usuário para o e-mail implantacao@calindra.com.br para que a equipe consiga visualizar recursos do Storefront e habilitar o CMS.


3. Projeto do App: criar e configurar (URLs)

Pergunta: Qual é o primeiro passo para começar a operar o CMS do App?

Resposta: Criar um projeto exclusivo para o app e configurar as URLs técnicas que habilitam os tipos de página e os componentes.

Passo a passo:

1. Acesse o Admin da VTEX da loja.

2. Vá em Storefront → Headless.

3. Crie um novo projeto para o app (ex.: “app”).

5. 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).

6. 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.


7. A partir dessa configuração, o projeto deve exibir as páginas componentes que precisam/podem ser configuradas.

Regras / Observações / Exceções:

  • Essas URLs são técnicas e, em geral, o time de implantação configura para a loja (o cliente pode solicitar essas URLs para preenchimento).

  • Sem configurar as URLs, o projeto fica “vazio” e você não verá corretamente os tipos de página/componentes.


4. Página Home - criação (obrigatória)

Pergunta: Como criar a Home do app no CMS?

Resposta: Crie uma página do tipo Home (apenas 1 por projeto) e adicione os componentes iniciais (ex.: Banners).

Passo a passo

1. No projeto do app, clique em Criar documento/página.

2. Selecione o tipo Home.

Regras / Observações / Exceções:

  • Essas URLs são técnicas e, em geral, o time de implantação configura para a loja (o cliente pode solicitar essas URLs para preenchimento).

  • Sem configurar as URLs, o projeto fica “vazio” e você não verá corretamente os tipos de página/componentes.


4. Página Home - criação (obrigatória)

Pergunta: Como criar a Home do app no CMS?

Resposta: Crie uma página do tipo Home (apenas 1 por projeto) e adicione os componentes iniciais (ex.: Banners).

Passo a passo

1. No projeto do app, clique em Criar documento/página.

2. Selecione o tipo Home.

3. Nomeie a página como “Home” - essa é uma orientação obrigatória para configuração do app.

4. Clique no botão “+” para adicionar componentes.

5. Adicione o componente “Banners” (ou outros permitidos no seu template).

6. Clique em Salvar (rascunho) e depois em Publicar (geralmente publicar agora - mas existe a opção de agendar a publicação para outro momento).

7. A estrutura do app começa a ser construída, com a criação da hierarquia de páginas, começando pela Home.

Regras / Observações / Exceções:

  • Só é permitido ter 1 Home por projeto. Depois de criada, o tipo Home deixa de aparecer na lista de criação.

  • A página começa vazia: você decide quais componentes entram e em que ordem.

  • Obrigatoriamente o nome da página deve ser “Home” e é necessário que ela tenha ao menos um componente associado - sem isso, a estrutura não funcionará.


5. Página de Categorias - criação (obrigatória)

Pergunta: Como criar a página de Categorias do app?

Resposta: 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.

Passo a passo

1. Clique em Criar documento/página.

2. Selecione o tipo Categorias.

3. Clique no “+” e adicione o componente de lista de categorias.

4. Preencha as informações do componente escolhido, clique em Salvar e depois em Publicar. Importante: essa página precisa ser nomeada como “Categorias”.

4. Cadastre as categorias (título) e, se necessário, subcategorias.

5. Opcional: adicione ícone para cada categoria/subcategoria.

6. Opcional: defina a ação (ex.: abrir vitrine, abrir link, campanha Black Friday etc.).

7. Salvar e Publicar.

Regras / Observações / Exceções:

  • Só é permitido ter 1 página de Categorias por projeto.

  • Campos de categoria e subcategoria podem ser diferentes (ex.: ícone e ação aparecem em ambos).

  • Mesmo sendo um menu de categorias, você pode usar “ação” para direcionar para campanhas/links/vitrines específicas (com cuidado).

  • Obrigatoriamente o nome da página deve ser “Categorias”.


6. Landing Pages - criação (livre)

Pergunta: Como criar Landing Pages e quando usar?

Resposta: 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).

Passo a passo

1. Clique em Criar documento/página.

2. Selecione o tipo Landing Page.

3. Defina um nome identificável (ex.: “Sale”, “politica-troca”, “quem-somos”).

4. Adicione componentes no topo conforme objetivo (ex.: Banner promocional).

5. Adicione prateleira de produtos e/ou scroll infinito quando a página exigir vitrine.

6. Para páginas institucionais, use componente de texto livre/HTML quando disponível.

7. Salvar e Publicar.

Sumário - Configurações Avançadas

  1. Componentes: Banner

  2. Componentes: Prateleira de produtos

  3. Componentes: Scroll infinito de produtos

  4. Componentes: Blog (WordPress)

  5. Problemas comuns e troubleshooting


1. Componente: Banner

Pergunta: Como cadastrar e configurar um Banner?

Resposta: O banner permite subir imagens e (opcionalmente) definir uma ação ao clicar (abrir categoria, busca, produto etc.).

Passo a passo (adicionar componente Banner):

1. Abra o documento (Home ou Landing Page) onde deseja inserir o banner.

2. Clique no botão “+” (adicionar componente).

3. Selecione o componente “Banner”.

4. Dentro do componente, clique em “Nova mídia” (ou equivalente) para adicionar imagens.

5. Escolha a imagem do banner.

6. Defina a ação do banner (opcional). Algumas ações possíveis são:

  • Abrir categoria

  • Abrir tela de busca (informar palavra de busca)

  • Abrir coleção

  • Abrir produto (preencher valores/identificadores necessários)

  • Sem ação (banner apenas informativo)

7. Escolha o estilo de exibição do banner (ex.: “Slide Hero” / carrossel, ou formato em grade/lista horizontal).

8. Salve as alterações.

9. Clique em “Publicar” para aplicar no app.

2. Componente: Prateleira de produtos

Pergunta: Como configurar uma prateleira de produtos?

Resposta: 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 no site, no formato "/novidades/masculino", por exemplo.

Passo a passo (adicionar prateleira):

1. Abra o documento (Home ou Landing Page) onde deseja inserir a prateleira.

2. Clique no botão “+” e selecione “Prateleira de produto”.

3. Defina o nome/título que aparecerá no app.

4. Informe a origem dos produtos - informe se pertencem a uma categoria ou coleção.

5. Preencha o ID (coleção/categoria) correspondente. A consulta por essa informação pode ser realizada no menu de Catálogo dentro do CMS.

6. Salve.

7. Clique em “Publicar”.

Regras / Observações / Exceções:

  • O botão “Ver mais” é automático no app: leva para a lista completa de produtos daquela coleção.

  • O conteúdo do app não precisa ser igual ao do site, mas listas de produtos refletem a mesma base de produtos.

  • É possível criar coleções específicas para o app e usar o ID correspondente.

  • Erros comuns e como resolver:

  • Prateleira vazia: o ID informado está incorreto ou é inexistente. Confirme o ID no Catálogo.

  • Alteração não refletiu: publique e feche/abra o app para limpar cache.


3. Componente: Scroll infinito de produtos

Pergunta: O que é e quando usar o scroll infinito?

Resposta: É um componente que exibe produtos continuamente conforme o usuário rola a tela; recomendado como último componente da Home ou Landing Page.

Passo a passo:

1. Abra o documento onde deseja inserir o componente.

2. Clique em “+” e selecione “Scroll infinito de produtos” (nome conforme exibido).

3. Configure a origem (pode ser coleção/categoria/busca, conforme opções do componente).

4. Salve e clique em “Publicar”.

Boas práticas:

  • Use como último componente da página (Home/Landing).

  • Melhora a navegação e permite ver muitos produtos sem sair da tela.


4. Componente: Blog (WordPress)

Pergunta: O CMS cria um blog dentro do app?

Resposta: Não. O componente consome um blog já existente no WordPress; basta informar a URL.

Passo a passo:

1. Adicione o componente de Blog (WordPress) no documento.

2. Informe a URL do blog WordPress (é necessário que o blog tenha sido criado no WordPress)

3. Defina um título (texto exibido no app).

4. Configure limite de posts (quando disponível).

5. Salve e publique.


5. Problemas comuns e troubleshooting

CMS não aparece no menu

Como resolver:

  • Confirmar que a loja habilitou as opções no console VTEX.

  • Confirmar permissões do usuário/e-mail para acessar Storefront e Headless CMS.

Alteração não refletiu no app

Como resolver:

  • Confirmar que clicou em “Publicar”.

  • Fechar e abrir o app para limpar cache.

  • Aguardar alguns minutos e testar novamente.

Prateleira vazia / sem produtos

Como resolver:

  • Verificar se o ID de coleção/categoria existe na VTEX.

  • Publicar novamente após corrigir o ID.