A Página de Cupons é uma área dedicada dentro do seu aplicativo projetada para centralizar todas as promoções ativas. Essa funcionalidade permite substituir o botão de "Favoritos" na barra de navegação inferior (NavBar) ou ser acessada por meio de redirecionamentos internos. Com isso, é possível cadastrar e gerenciar os diferentes cupons oferecidos no aplicativo diretamente pelo CMS VTEX. Cada cupom é visualizado nessa nova página de forma personalizada. Você pode incluir uma imagem própria, textos informativos, regras de uso, data de validade e o código do cupom, garantindo que os clientes tenham todas as informações necessárias para aproveitar os descontos.
Importante: Antes de iniciar a configuração, é necessário verificar se o componente "Lista | Cupons" está disponível no seu ambiente do CMS VTEX. Caso não encontre essa opção, solicite a ativação da funcionalidade abrindo um chamado no Portal de Suporte Kobe.
Criando a Estrutura da Página
Para iniciar a criação da página, acesse o painel administrativo da VTEX e navegue até a seção Storefront, selecionando em seguida Headless CMS.
No menu Projeto, certifique-se de estar gerenciando o projeto correto, que geralmente é identificado como faststore. Em seguida, clique no botão Criar documento e selecione a opção Lista | Cupons.
Ao abrir o modelo de edição para a seção de cupons, você encontrará as configurações gerais da página e a área para adicionar os cards de cada oferta. As configurações gerais incluem o título do documento (usado apenas para identificação interna), a opção para ativar ou desativar a exibição da lista no aplicativo e a possibilidade de adicionar um banner de destaque para o topo da página.
Adicionando e Editando um Cupom
Na aba de "Seções", clique no botão de adição (+) e selecione a opção "Cupom" para criar um novo card de desconto. O preenchimento adequado de cada campo é essencial para a exibição correta no aplicativo. A tabela abaixo detalha os principais campos de configuração do card de cupom:
Cupons Progressivos (Ofertas em Escada)
Ao selecionar o tipo ProgressiveCoupon, a configuração exige um tratamento diferenciado para acomodar os múltiplos níveis de desconto.
Nesse cenário, o campo Texto do Valor do Desconto do cupom principal deve permanecer vazio.
Na seção de cupons progressivos dentro do card principal, você deve adicionar os "cupons filhos", que representam os diferentes níveis da oferta, como 10% OFF na primeira faixa e 15% OFF na segunda. Para esses cupons dependentes, os únicos tipos aceitos são o desconto percentual ou o desconto de valor fixo.
O preenchimento deve se limitar ao nome, status de ativação, tipo e aos textos informativos de valor e regras de uso para cada nível.
Exibindo a Página no Menu Inferior (Navbar)
Para que os clientes consigam acessar a página de cupons facilmente, é recomendado configurar um atalho na barra de navegação inferior do aplicativo.
No ambiente do Headless CMS, crie um novo documento selecionando o componente Item na Barra de Navegação.
Acesse o componente criado e, na aba "Settings", defina um título interno e faça o upload do ícone que representará a área de cupons.
No campo de destino, selecione a opção coupons e deixe o ID de destino em branco.
Para que o novo ícone ocupe o espaço correto, selecione a opção Favoritos no campo de substituição.
Certifique-se de manter a opção de exigir login desmarcada, permitindo que todos os usuários visualizem as ofertas disponíveis.
Carrossel de Cupons na Home
Além da página dedicada, as ofertas podem ser destacadas diretamente na página inicial do aplicativo por meio de um carrossel interativo.
Na Home no Headless CMS, adicione uma nova seção do tipo Carrossel Genérico.
Nas configurações deste carrossel, defina o título como "Cupons" e escolha se ele deve ser exibido visualmente no aplicativo.
É fundamental selecionar a opção coupons no campo de tipo do carrossel.
Finalização
Após concluir o preenchimento de todas as informações necessárias na Página de Cupons, no Item da Barra de Navegação ou na Home, o último passo é salvar as alterações.
Verifique se o status do documento consta como Publicado no CMS VTEX. Dessa forma, todas as configurações serão aplicadas e as promoções ficarão imediatamente visíveis para os usuários no aplicativo.