Desconto Progressivo

Sobre o aplicativo

O Desconto Progressivo é um aplicativo totalmente integrado à Nuvemshop, desenvolvido para lojistas que buscam aumentar seu faturamento incentivando o cliente a levar mais unidades do mesmo produto ou mais itens da loja em troca de descontos maiores.

Com o app, sua loja pode:

- Criar regras de descontos em escala: Quanto mais o cliente compra, maior é o desconto aplicado (ex: Leve 2 ganhe 10%, Leve 3 ganhe 15%).
- Estimular o aumento do volume do carrinho: Gatilhos visuais que mostram ao cliente o quanto ele falta comprar para atingir o próximo nível de desconto.
- Personalizar o layout das ofertas: Configuração completa de textos, botões e cores para combinar perfeitamente com a identidade visual da sua marca.
- Exibir ofertas estratégicas: Opção de destacar as tabelas de desconto direto na página do produto ou por meio de popups inteligentes.
- Aumentar o ticket médio de forma simples: Uma estratégia eficiente para girar o estoque mais rápido, sem complicar a gestão do seu dia a dia.

Primeiros Passos

Para começar a utilizar o Desconto Progressivo e impulsionar suas vendas, o processo é simples e imediato:

1. Instalação: Instale o aplicativo diretamente através da Loja de Aplicativos da Nuvemshop.
2. Validação: Informe seu número de telefone para validar o acesso da sua conta.
3. Período de Teste: O sistema libera automaticamente os seus 7 dias de período de teste grátis.

Com esses passos concluídos, todas as funcionalidades já estarão disponíveis. Você poderá criar suas primeiras regras de desconto por quantidade e personalizar o layout para que as tabelas fiquem com a cara da sua loja, explorando todo o potencial da ferramenta desde o primeiro dia!

Dashboard

Esta é a tela inicial do aplicativo Desconto Progressivo. Ela funciona como a central de controle e gerenciamento de todas as campanhas de desconto que você criar na sua loja. Atualmente, o seu painel está em um estado inicial (vazio), o que significa que nenhuma regra foi criada ainda. Abaixo está a explicação detalhada de cada elemento e para que servem:

Para iniciar a criação dos seus descontos, basta clicar no botão “Cadastrar Grupo”. Em seguida, você poderá preencher os seguintes campos:

Dados do Grupo

Chave “Ativo” (Toggle):

Localizado no canto superior direito, ele controla se essa promoção está ligada ou desligada. Se estiver azul (como no print), a regra passa a valer na loja assim que você salvar. Se você desligar, ela fica salva como rascunho.

Nome:

Campo de texto para você identificar internamente a campanha. Escolha nomes claros para se organizar bem no dashboard, como “Promoção de Inverno”, “Atacado Camisetas” ou “Desconto Progressivo Meias”.

Critério de desconto (Dropdown):

O campo Critério de desconto define o gatilho que o aplicativo usará para liberar os descontos na loja. Você pode escolher entre duas estratégias poderosas:

- Desconto por Quantidade (Foco em Volume): A promoção é calculada com base no número de peças que o cliente adicionar ao carrinho. É a clássica “escadinha” de descontos (Ex: Leve 2 itens e ganhe 5%, leve 3 e ganhe 10%). Ideal para girar o estoque mais rápido e vender produtos complementares ou combos do mesmo item.
- Desconto por Valor do Carrinho (Foco em Faturamento): A promoção é liberada com base na soma em dinheiro ($) dos produtos no carrinho. O cliente atinge os níveis de desconto ao bater metas de valor (Ex: Nas compras acima de R$ 150 ganhe 5%, acima de R$ 300 ganhe 10%). É a estratégia perfeita para aumentar diretamente o ticket médio da loja, incentivando o cliente a colocar mais qualquer produto no carrinho para alcançar a meta de valor.

Aplicar para toda a loja:

Se você marcar, todos os produtos cadastrados no seu site farão parte desta promoção automaticamente. Se deixar desmarcado, você poderá escolher manualmente depois quais categorias ou produtos específicos vão receber esse desconto.

Aplicar desconto entre os produtos do grupo:

Se estiver marcado o cliente pode “misturar” produtos diferentes que pertençam a este grupo para atingir a quantidade do desconto. Exemplo: Se ele comprar 1 Camiseta Azul e 1 Camiseta Vermelha, o sistema soma as duas e aplica o desconto de “Leve 2”. Se estiver desmarcado: O desconto só se acumula se o cliente comprar unidades do mesmo produto exato.

Combinar Descontos

Esta seção define as opções de configuração para cumulação do Desconto Progressivo com outras ofertas e promoções ativas na loja. A ativação de cada opção permite que o benefício seja somado ao Desconto Progressivo no carrinho do cliente.

Descontos por quantidade (NxM e progressivos):

Permite aplicar a promoção atual em conjunto com outras regras de desconto baseadas no volume de itens (ex: “Leve 3 Pague 2” ou outros níveis de desconto progressivo ativos simultaneamente).

Frete grátis:

Habilita a aplicação do Desconto Progressivo mesmo que o pedido ou item elegível receba benefício de isenção no valor do frete.

Cupons e descontos por valor do carrinho:

Permite o acúmulo entre o Desconto Progressivo dos itens e descontos aplicados ao total da compra (seja por inserção de cupom promocional ou descontos automáticos atingidos por valor mínimo de carrinho).

Descontos de outros apps:

Garante a interoperabilidade com ofertas concedidas por aplicativos e integrações de terceiros conectados à plataforma.

Preço promocional e descontos de preço:

Aplica a porcentagem ou valor do Desconto Progressivo sobre itens que já estejam com preço de oferta (preço “de/por”) ou com desconto pontual cadastrado.

Desconsiderar produtos com desconto em kits do Compre Junto Pro Huapps:

Quando ativada, produtos que já possuem desconto pelo Compre Junto não participarão de descontos progressivos, evitando que um mesmo produto receba dois descontos ao mesmo tempo.

Usar o título da faixa como texto da flag:

Se estiver marcado o aplicativo vai usar o texto que você configurou para a faixa de desconto (ex: “10% OFF”) como aquela etiquetinha (flag) visual que fica colada em cima da foto do produto na vitrine da loja. O texto complementar abaixo avisa que, se ativado, ele puxará o título padrão ou a primeira faixa configurada.

Faixas de Desconto

Tela Inicial: Faixas de Desconto (Sem regras)

Esta é a visão padrão quando o grupo de produtos ainda não possui nenhuma regra configurada.

Faixas de Desconto:

Título da seção onde são gerenciadas as regras de preço por volume.

Botão “Nova faixa” (no topo e no centro):

Atalho para abrir o formulário de criação de uma nova regra de desconto.

Mensagem central (“Nenhum desconto vinculado ao grupo”):

Alerta informativo indicando que o lojista precisa criar pelo menos uma faixa para que o desconto comece a valer para os produtos selecionados.

Formulário: Editar faixa de desconto

Esta tela contém as configurações específicas de como o desconto será calculado e exibido na loja.

Título:

O nome interno ou identificador da faixa de desconto (Ex: 5% de Desconto). Útil para organização do lojista.

Quantidade mínima:

O número mínimo de unidades do produto que o cliente deve adicionar ao carrinho para ativar este desconto (Ex: 10 Un).

Desconto aplicado:

A porcentagem real de desconto que será subtraída do valor do produto (Ex: 5 equivale a 5%).

Texto principal:

O texto curto de destaque que aparecerá na página do produto (Ex: desconto 5%).

Texto auxiliar:

Uma frase mais explicativa para o consumidor entender a regra de forma clara (Ex: Ganhe 5% de desconto a partir de 10 unidades).

Etiquetas de destaque:

Abas (Etiqueta 1, 2 e 3): Permite configurar até 3 etiquetas personalizadas por faixa.

- Texto: O conteúdo escrito que aparecerá dentro da etiqueta.
- Cor de fundo: Seletor de cor para o preenchimento da etiqueta.
- Cor do texto: Seletor de cor para a letra da etiqueta (garantindo contraste)

Botão “Salvar”:

Grava as alterações feitas na faixa de desconto.

Tela de Listagem: Faixa de Desconto Ativa

Após salvar, a regra aparece listada em formato de card com o resumo das informações e botões de ação.

Setas (Para cima / Para baixo):

Permitem reordenar a prioridade das faixas (importante se houver múltiplos descontos progressivos, ex: 10 un = 5%, 20 un = 10%).

Resumo do Desconto:

Mostra o título e uma mensagem automática do sistema (Ex: Desconto de 5.000% para compras a partir de 10 unidades), além de espelhar o Texto principal e o Texto auxiliar cadastrados.

Ícone de Lápis (Editar):

Abre novamente o formulário de edição daquela faixa.

Ícone de Estrela (Destacar/Favoritar):

Define aquela faixa como principal ou de maior destaque visual na loja (comum para estratégias de marketing).

Ícone de Lixeira (Excluir):

Remove permanentemente aquela faixa de desconto do grupo.

Exibir flag na vitrine para este grupo

Esta seção gerencia a exibição de um selo visual (ou flag) diretamente na listagem de produtos (vitrine) da loja virtual, servindo para destacar os produtos que pertencem a este grupo de desconto progressivo antes mesmo do cliente clicar neles.

Chave seletora (Toggle) desativada (Cinza):

Quando desabilitada, nenhuma tag ou aviso visual referente a este grupo de descontos será exibido nos cards dos produtos na vitrine da loja. O formulário de personalização fica oculto.

Estado Ativo e Campos de Configuração
- Quando a chave seletora é ativada (Azul), o painel se expande mostrando os seguintes campos para estilização e posicionamento:
  - Bloco: Texto e Cores
  - Texto da Flag: O conteúdo de texto que será escrito dentro do selo na vitrine.
  - 💡 Dica de Documentação: O valor padrão +Qtd+desc costuma ser uma variável ou um padrão do app para preencher dinamicamente a flag (por exemplo, exibindo algo como “+10 un com desconto” ou o formato de texto curto que o lojista definir).
  - Cor do Texto: Seletor para definir a cor da fonte utilizada dentro da flag.
  - Cor de Fundo: Seletor para definir a cor de preenchimento do fundo da flag (essencial para garantir contraste com o layout da vitrine).
- Bloco: Regras de exibição
  - Posicionar a flag (Menu suspenso / Dropdown): Define o alinhamento visual de onde o selo será renderizado por cima da imagem do produto na vitrine (Ex: Topo direito, Topo esquerdo, Rodapé direito, etc.).

Produtos Vinculados

Esta seção exibe e gerencia quais itens da loja virtual estão atualmente sob a regra do grupo de desconto progressivo configurado.

Produtos Vinculados:

Título do bloco que indica a listagem dos produtos associados a este grupo de desconto.

Botão “Vincular produtos” (Link no topo direito):

Abre a modal ou página de busca/seleção do catálogo da Nuvemshop, permitindo ao lojista adicionar novos itens a este grupo.

Listagem de Itens (Cards de Produto):

Exibe as informações básicas de cada produto que já está sofrendo a ação do desconto. Cada linha é composta por:

- Miniatura da imagem: Ícone ou foto do produto (Ex: Jaqueta de Couro, Óculos de Sol, Casaco).
- Nome do produto: Título oficial do item cadastrado na loja.

Ícone de Lixeira (Desvincular/Remover):

Botão de ação individual que remove o produto específico deste grupo de desconto progressivo (o produto deixa de participar da promoção, mas permanece ativo no catálogo geral da loja).

Grupo de Desconto criado

Após as configurações do Grupo de Desconto, você pode estar salvando clicando no botão “Salvar”, logo após você será direcionado novamente para o Dashboard do app. Irá exibir a listagem das campanhas de desconto ativas ou configuradas. Cada card de grupo apresenta as seguintes informações e ações:

Nome do Grupo (Ex: Desconto teste):

O título identificador que o lojista definiu para aquela campanha ou conjunto de produtos.

Tag de Status (Ativo / Verde):

Um indicador visual que confirma que a regra de desconto está publicada e operando normalmente na loja virtual.

Badges de Resumo (Tags ovais informativas):

- 3 produtos vinculados: Mostra rapidamente a quantidade de itens do catálogo que estão participando deste grupo.
- 3 faixas de desconto: Mostra o número de níveis/regras de volume configurados para este grupo (Ex: 5 unidades = X%, 10 unidades = Y%, etc.).

Ícone de Lápis (Editar):

Botão de ação para abrir a tela de edição do grupo, permitindo alterar as faixas, os textos, as flags ou gerenciar os produtos vinculados.

Ícone de Lixeira (Excluir):

Remove permanentemente o grupo de desconto. Ao excluir, todos os produtos vinculados a ele voltam a ter seus preços originais sem desconto progressivo.

Configurações

Esta tela controla o comportamento global do aplicativo na loja, definindo regras matemáticas de cálculo e preferências de exibição de valores numéricos.

Opções de Exibição

Esta tela controla o comportamento global do aplicativo na loja, definindo regras matemáticas de cálculo e preferências de exibição de valores numéricos.

Chave seletora “Ativar na loja” (Toggle):

Habilita ou desabilita globalmente a exibição visual dos componentes do aplicativo no tema da loja virtual, sem apagar os dados configurados.

Regras de Cálculo e Desconto

Aplicar desconto considerando o preço original? (Checkbox):

Quando desativado, o sistema calcula se o produto já possui um desconto nativo do tipo “DE/POR”. Se o desconto nativo for maior ou igual ao do app, a regra de quantidade não se acumula. Se for menor, o app aplica apenas a diferença para atingir a porcentagem da promoção. Quando ativado, ele força o cálculo matemático bruto em cima do preço original do produto.

Exibir casas decimais quando o valor terminar em ,00? (Checkbox):

Define se os preços cheios devem mostrar os centavos zerados (Ex: R$90,00) ou ocultá-los (Ex: R$90).

Remover casas decimais do desconto em %? (Checkbox):

Arredonda a exibição da porcentagem promocional para evitar números quebrados na interface (Ex: transforma 50,045% em 50%).

Como arredondar o valor com desconto? (Menu Suspenso / Dropdown):

Define o comportamento matemático para o fechamento dos centavos dos produtos. Possui três opções:

- Normal (com centavos): Mantém o valor exato calculado pela porcentagem.
- Arredondar para cima: Eleva o valor para a próxima unidade inteira ou decimal superior.
- Arredondar para baixo: Troca ou diminui o valor para a unidade inferior.

Modo de Exibição (Estilos de Widget)

Define o componente visual (Layout/Widget) que será renderizado na página do produto para instigar o cliente a comprar em maior quantidade. O lojista pode escolher entre dois formatos:

BARRA DE PROGRESSO:

Exibe uma barra horizontal dinâmica e interativa (estilo gamificação). À medida que o cliente altera a quantidade no seletor, a barra se preenche visualmente, mostrando o desconto atual e o quão perto ele está do próximo nível de desconto (Ex: Você já ganhou 🔥 5% de desconto).

SELEÇÃO RÁPIDA:

SELEÇÃO RÁPIDA:
Transforma as faixas de desconto em cards ou “botões de rádio” empilhados
(estilo tabela de ofertas). O cliente pode clicar diretamente no card
da quantidade desejada para adicioná-la em lote ao carrinho.

Configurações para Seleção Rápida

Desabilitar seleção automática de desconto? (Checkbox):

Se marcado, impede que o app selecione previamente uma opção para o cliente quando a página carregar.

Destacar a opção padrão? (Checkbox):

Adiciona uma estilização visual extra na opção mais vantajosa ou recomendada.

Exibir o preço total para cada opção? (Checkbox):

Mostra o valor final multiplicado pela quantidade de itens daquele card (Ex: R$202,00 em vez de mostrar apenas o valor unitário).

Exibir tags (Dropdown):

Define a posição das pequenas etiquetas promocionais dentro do card (Ex: Abaixo do desconto).

Tamanho das tags (Dropdown):

Ajusta a escala visual das etiquetas (Ex: Compacto).

Título do Bloco:

O texto de cabeçalho que chama o cliente para a ação acima dos cards (Ex: Compre Agora!).

Número máximo de opções a exibir:

Limita a quantidade de cards visíveis na página do produto (deixar vazio faz com que todas as faixas cadastradas apareçam).

Texto para o destaque:

O termo que será exibido no balão de maior conversão (Ex: Mais comprado!).

Posição do destaque (Dropdown):

Alinhamento do balão de destaque (Ex: Centralizado).

Texto do desconto e da quantidade

Texto do desconto:

Estrutura a frase da porcentagem. Usa {%} para a porcentagem ou {$} para o valor bruto economizado (Ex: Ganhe {%}).

Texto da quantidade (Singular):

Como o sistema deve exibir o texto quando a regra for de apenas 1 item. Aceita cálculos matemáticos na variável (Ex: {qty} unidade).

Texto da quantidade (Plural):

Como o sistema deve exibir o texto para volumes maiores (Ex: {qty} unidades).

Configurações de Cores

Interface de personalização de paleta de cores via códigos hexadecimais (#HEX) para adaptar o aplicativo à identidade visual da marca do lojista.

Cor do texto:

Define a cor da fonte padrão das informações.

Cor da borda:

A cor do contorno dos cards da Seleção Rápida quando não estão selecionados.

Cor da borda ativa:

A cor de destaque que o card ganha quando o cliente clica nele.

Cor de fundo da tag:

O preenchimento dos pequenos balões de oferta (Ex: as tags Atacado, Super lote).

Cor do texto da tag:

A cor da fonte escrita por dentro dos balões de oferta.

Pontos de Ancoragem

Público-alvo da Documentação: Desenvolvedores, Suporte Técnico Avançado ou Lojistas experientes. Esta seção serve para mapear o HTML/CSS do tema da Nuvemshop e injetar o aplicativo no lugar correto da página de forma precisa.

Onde o conteúdo será inserido? (Posicionamento e Seletor):

O dropdown (Ex: No início / No fim) define a prioridade de injeção.

O campo de texto recebe a classe ou ID do elemento HTML pai onde o widget deve ser renderizado (Ex: [data-store*=”product-form-“]).

Seletor do campo de quantidade:

Indica ao script do aplicativo qual é a classe CSS exata do input numérico de quantidade do tema (Ex: .js-quantity-input), permitindo ao app ler e alterar esse número de forma síncrona.

Seletor dos botões de quantidade (+ e -):

Mapeia as classes CSS dos botões de aumentar ou diminuir unidades nativos do tema, garantindo que o clique neles atualize instantaneamente a barra de progresso ou a seleção rápida do app.

Exemplos Reais

Aqui estão alguns exemplos de lojas que utilizam o app que podem ser inspirações:

Desconto Progressivo

Sobre o aplicativo

Primeiros Passos

Dashboard

Dados do Grupo

Chave “Ativo” (Toggle):

Nome:

Critério de desconto (Dropdown):

Aplicar para toda a loja:

Aplicar desconto entre os produtos do grupo:

Combinar Descontos

Descontos por quantidade (NxM e progressivos):

Frete grátis:

Cupons e descontos por valor do carrinho:

Descontos de outros apps:

Preço promocional e descontos de preço:

Desconsiderar produtos com desconto em kits do Compre Junto Pro Huapps:

Usar o título da faixa como texto da flag:

Faixas de Desconto

Faixas de Desconto:

Botão “Nova faixa” (no topo e no centro):

Mensagem central (“Nenhum desconto vinculado ao grupo”):

Título:

Quantidade mínima:

Desconto aplicado:

Texto principal:

Texto auxiliar:

Etiquetas de destaque:

Botão “Salvar”:

Resumo do Desconto:

Ícone de Estrela (Destacar/Favoritar):

Ícone de Lixeira (Excluir):

Exibir flag na vitrine para este grupo

Chave seletora (Toggle) desativada (Cinza):

Produtos Vinculados

Produtos Vinculados:

Botão “Vincular produtos” (Link no topo direito):

Listagem de Itens (Cards de Produto):

Ícone de Lixeira (Desvincular/Remover):

Grupo de Desconto criado

Nome do Grupo (Ex: Desconto teste):

Tag de Status (Ativo / Verde):

Badges de Resumo (Tags ovais informativas):

Ícone de Lápis (Editar):

Ícone de Lixeira (Excluir):

Configurações

Opções de Exibição

Chave seletora “Ativar na loja” (Toggle):

Exibir casas decimais quando o valor terminar em ,00? (Checkbox):

Remover casas decimais do desconto em %? (Checkbox):

BARRA DE PROGRESSO:

SELEÇÃO RÁPIDA:

Desabilitar seleção automática de desconto? (Checkbox):

Destacar a opção padrão? (Checkbox):

Exibir o preço total para cada opção? (Checkbox):

Exibir tags (Dropdown):

Tamanho das tags (Dropdown):

Título do Bloco:

Número máximo de opções a exibir:

Texto para o destaque:

Posição do destaque (Dropdown):

Texto da quantidade (Singular):

Texto da quantidade (Plural):

Configurações de Cores

Cor do texto:

Cor da borda:

Cor da borda ativa:

Cor de fundo da tag:

Cor do texto da tag:

Pontos de Ancoragem

Onde o conteúdo será inserido? (Posicionamento e Seletor):

Seletor do campo de quantidade:

Seletor dos botões de quantidade (+ e -):

Exemplos Reais

CompraNorte:

Clover | Tecno & Gifts:

TyT – DECO Y MAS:

Julieta Mayorista: