A página de cupons é uma alternativa para a visualização rápida dos cupons através da Tab Bar, substituindo o botão de favoritos.
Cada cupom será visualizado nessa nova página com uma imagem própria, texto, validade, código do cupom, entre outras personalizações possíveis com base no que for de seu interesse.
Obs.: É preciso conferir esses componentes que estão disponíveis na sua conta do CMS. Caso não estejam, basta solicitar a adição via ticket para o Suporte (e-mail suporte@kobe.io).
Configurando Estrutura Básica da Página
-
Realize o login no painel administrativo da Shopify e entre no espaço destinado ao CMS
Exemplo: - Selecione a opção do componente "Lista | Cupons".
- Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
- Título: Título vinculado ao modelo na Shopify , não reflete no app.
- Ativo: Define se a lista de cupons deve ou não ser exibida.
- Banner: Permite a adição de um Banner para ser exibido no início da página (configura-se como um banner comum).
- Cupons: Adição de card de cupom conforme explicaremos a seguir.
Configurando Exibição de Cupons (Geral)
- Após clicar em Cupons na criação de sua página clique em "Adicionar nova entrada" para abrir o card de cupom.

2. Ao abrir o modelo do card para edição, preencha os campos indicados conforme as instruções abaixo:
-
- Ativo: Define se o cupom deve ou não ser exibido.
- Nome: Nome vinculado ao modelo
- Imagem: Imagem para ser exibida no card do cupom.
- Tamanho: Tamanhos padrões esperados da imagem exibidas no cupom (Largura x Altura): 800x250, 800x520.
-
Tipo de Cupom: Selecione de acordo com o cupom que deseja cadastrar.
- Cupom de desconto percentual: Desconto em porcentagem no valor do produto.
- Cupom de valor fixo: Desconto fixo na compra.
- Frete grátis: Desconto relativo a frete grátis na compra.
- Cupom progressivo: Desconto progressivo, possui características específicas a serem explicadas no próximo tópico do artigo.
-
- Texto de Aviso (Opcional): Texto em destaque que é exibido logo após a imagem cadastrada para o cupom.
- Texto do Valor de Desconto (Opcional): Com excessão para cupons de frete grátis, diz o valor do desconto que será aplicado.
- Código do Cupom (Opcional): Indica o código do cupom cadastrado.
- Regras de Uso: Adiciona regras de uso extras vinculadas ao cupom.
- Instruções de Uso: Texto que preenche a modal de informações do cupom. A formatação do texto vai refletir no APP.
- Exibição programada (início e fim): Define o período de exibição do cupom.
- Redirecionar o usuário ao clicar no card de cupom (Opcional): Para a realização do redirecionamento é necessário preencher os campos de Destino do Cupom, ID ou termo de busca relativo ao destino e AppPage (em caso de destino sendo AppPage).
Configurando Exibição de Cupons Progressivos
Ao cadastrar um cupom de desconto Progressivo, temos algumas características diferentes:
- Texto do Valor de Desconto: Não é preciso cadastrar nada nesse campo.
- Tipo de Cupom: Selecionar ProgressiveCoupon.
-
Cupons progressivos: Adicionar os cupons "filhos" associados a esse cupom de desconto progressivo.
- Os cupons filhos também são um card cupom, porém não é necessário preencher todas as informações. Primeiro preencha os campos Nome, Ativo e Tipo de Cupom de acordo com o que foi explicado anteriormente.
- Para esse caso os únicos tipos de cupom aceitos são Desconto Percentual ou Desconto Fixo.
- Preencha o Texto de Valor de Desconto e Regras de Usos, esses dois dados são os informativos para o usuário.
- Publique o cupom filho e faça novamente esse processo para quantos cupons filhos achar necessário.
Configurando exibição na Navbar
-
Realize o login no painel administrativo da Shopify e entre no espaço destinado ao CMS
Exemplo: - Selecione a opção do componente "Item na barra de navegação".
-
Ao abrir o modelo para edição, preencha os campos indicados conforme as instruções abaixo:
- Título: Nome vinculado ao modelo
- Ícone: Ícone exibido na barra de navegação no lugar do ícone de favoritos.
- Destino: Selecionar a opção "cupons".
- Id ou termo de busca relativo ao tipo de destino: Pode deixar esse item sem preencher.
- Substituir: Selecionar a opção "favoritos".
- Cor: Modifica a cor do novo item na barra de navegação, deixar vazio mantém as cores default.
- Login: Selecione a opção "Falso".
Ao final, lembre-se de publicar a alteração para que ela seja aplicada no aplicativo.
Caso fique com alguma dúvida, você pode enviar um e-mail para suporte@kobe.io.