Ir para o conteúdo
Tutoriais

Contador regressivo no Magento 2: PromoCountdown

Redação Mage2 Redação Mage2 17 min de leitura
Contador regressivo no Magento 2: PromoCountdown
MAGE2 COMMERCEGUIA DE FUNCIONALIDADE

MAGENTO 2   /   CAMPANHAS PROMOCIONAIS

Da escolha dos produtos ao encerramento da oferta: conheça o módulo da Mage2 Commerce que organiza a exibição de contagens regressivas na loja, com prazos, públicos, mensagens e apresentação configuráveis.

Vídeo demonstrativo

Veja o PromoCountdown em funcionamento

A demonstração percorre a criação da campanha, os produtos e públicos participantes, os prazos, as posições de exibição, o design e o comportamento do contador ao terminar.

Contador verde integrado ao bloco de oferta, com dias, horas, minutos, segundos e preço de/por.
FIGURA 01 Contador regressivo na página do produto. Fonte: vídeo de demonstração · 00:00

O que é o PromoCountdown e o que o consumidor visualiza?

O PromoCountdown é uma funcionalidade de contagem regressiva promocional para Magento 2. Seu papel é transformar a data de uma ação comercial em uma informação visível durante a navegação: o tempo restante para o início ou para o término daquela campanha.

Na demonstração, o contador aparece junto à oferta na página do produto, com dias, horas, minutos e segundos. Em outro momento, surge em formato compacto sobre a imagem de um produto na vitrine. Assim, a comunicação pode acompanhar tanto a consulta detalhada quanto a descoberta de produtos.

Contagem regressiva em formato de selo no card do produto participante da campanha.
FIGURA 02 Contador compacto na vitrine de produtos. Fonte: vídeo de demonstração · 11:00

Uma aplicação prática é uma oferta com data de encerramento definida: em vez de o visitante procurar essa informação em um regulamento, a página apresenta o prazo próximo ao produto. Isso favorece a clareza da comunicação, mas não equivale a uma promessa de aumento de vendas.

Os valores, parcelamentos, Pix, cashback e cálculo de frete visíveis nas capturas pertencem à loja de demonstração. Não devem ser interpretados como recursos do PromoCountdown.

Como o módulo é ativado e administrado?

No painel mostrado no vídeo, a seção Mage2 > Contagem Regressiva Promocional, dentro de Configurações, reúne os ajustes gerais. O botão Gerenciar campanhas leva à administração dos contadores. Cada contador é tratado como uma campanha, com configuração própria.

Painel com gerenciamento de campanhas, habilitação do módulo, modo de diagnóstico e limite de campanhas.
FIGURA 03 Configurações gerais do PromoCountdown. Fonte: vídeo de demonstração · 01:40

O campo Habilitado liga ou desliga a exibição na visão de loja correspondente. Desligar a funcionalidade não elimina os cadastros: as campanhas e os ajustes continuam disponíveis no painel, conforme a explicação exibida na tela.

Também existe um limite configurável de campanhas habilitadas. O número 100 mostrado na demonstração é o valor preenchido naquele ambiente, não um limite fixo do módulo. O modo de diagnóstico, chamado debug, serve para investigar posições que não encontraram campanha e deve ser usado pela equipe técnica durante a verificação.

Cadastro: nome, código, status e prioridade

O nome identifica a campanha no administrativo e pode ser utilizado nas mensagens. O código é um identificador técnico que, segundo o formulário, não pode ser alterado após o primeiro salvamento. Por isso, vale adotar um padrão reconhecível, como oferta-ferramentas-setembro.

Informações gerais: nome, código, status e prioridade da campanha promocional.
FIGURA 04 Cadastro e prioridade da campanha. Fonte: vídeo de demonstração · 05:00

Somente campanhas com status Habilitada podem aparecer na loja, desde que as demais condições sejam atendidas. Rascunho, Desabilitada e Arquivada permanecem salvas, mas ocultas. Essa separação permite preparar uma campanha antes de colocá-la em exibição.

A prioridade resolve a disputa quando mais de uma campanha se aplica ao mesmo produto e à mesma posição. Na regra descrita pelo PromoCountdown, vence o maior número. Em caso de empate, prevalece a campanha da visão de loja específica e, depois, a mais antiga. Essa é a prioridade de exibição do contador, não a configuração da regra de desconto.

Como definir quando a contagem começa e termina?

A área de agendamento apresenta o tipo Única (entre a data de início e a de término), o fuso horário e os campos de início e fim. O fuso informa como as datas digitadas devem ser interpretadas. Na demonstração, está selecionado America/Sao_Paulo.

Campos de tipo de agendamento, fuso horário, data de início e data de término.
FIGURA 05 Agendamento e fuso horário. Fonte: vídeo de demonstração · 05:20

Ao usar Datas da campanha, a data de término é obrigatória. O campo de início vazio indica início imediato, conforme a orientação do painel. Quando o prazo vem do produto, como no preço especial ou na regra de catálogo, os campos manuais de início e fim não são a referência principal dessa contagem.

De onde o contador pode buscar o prazo?

O campo Fonte do período é central para o funcionamento. Ele determina de onde o módulo obtém as datas, independentemente da seleção dos produtos. O formulário apresenta seis estratégias:

Menu Fonte do período com datas da campanha, preço especial, regra de catálogo e estratégias combinadas.
FIGURA 06 Opções de origem do prazo. Fonte: vídeo de demonstração · 07:40
Fontes de período disponíveis na versão demonstrada
FonteComo funcionaExemplo de uso
Datas da campanhaUsa o início e o fim definidos na própria campanha.Ação com um prazo comum, como uma semana de ofertas.
Datas do preço especialUsa o período do preço especial de cada produto.Produtos com promoções que terminam em datas diferentes.
Datas da regra de preço de catálogoUsa as datas da regra de catálogo aplicada ao produto.Campanha baseada em uma regra promocional do catálogo.
Desconto que termina primeiroConsidera o término mais próximo entre preço especial e regra de catálogo. Sem essas fontes, usa as datas da campanha.Comunicar o primeiro encerramento entre condições existentes.
Desconto que termina por últimoConsidera o término mais distante entre as duas fontes. Sem elas, usa as datas da campanha.Ação cujo prazo divulgado acompanha a última condição a terminar.
HíbridoProcura o período do preço especial; depois, o da regra de catálogo; por fim, as datas da campanha.Catálogo com diferentes formas de configurar promoções.

Escolher o prazo mais longo não prorroga um desconto. Essas opções definem a referência temporal do contador. Antes da publicação, confira se a mensagem e o preço que o consumidor encontra representam a mesma condição comercial, inclusive no momento do encerramento.

Quais produtos recebem o contador?

O campo Modo de aplicação responde a uma pergunta diferente da origem do prazo: quais produtos fazem parte da campanha? A seleção pode ser manual ou baseada em critérios do catálogo.

Menu de seleção de produtos por lista manual, condições, preço especial, regra de catálogo, todos os produtos ou widget.
FIGURA 07 Modos de aplicação aos produtos. Fonte: vídeo de demonstração · 08:00

Em Produtos escolhidos manualmente, o lojista monta uma lista específica. Em Condições de produto, utiliza o construtor de regras exibido no formulário. Também há modos para todos os produtos com preço especial, produtos com regra de preço de catálogo e todos os produtos. O modo Somente widget limita a exibição à posição Widget CMS.

Como funciona a seleção manual?

O botão Selecionar produtos abre uma janela com busca por ID, SKU ou nome. A lista apresenta os itens e o comando Adicionar. Depois de escolher os participantes, o lojista conclui a seleção e salva a campanha. A lista manual só é utilizada quando o modo correspondente está selecionado.

Janela de busca e inclusão de produtos na campanha, com identificação por ID, SKU e nome.
FIGURA 08 Seleção manual dos produtos. Fonte: vídeo de demonstração · 07:00

Essa distinção evita um erro comum de configuração: preencher uma lista manual e esperar que ela limite uma campanha configurada para todos os produtos com preço especial. O modo escolhido é que define qual critério será aplicado.

É possível separar campanhas por loja e grupo de clientes?

Sim. Em Escopo e posições, a campanha permite selecionar visões de loja e grupos de clientes. A opção All Store Views representa todas as visões e, conforme o painel, não deve ser combinada com visões específicas.

Configuração dos públicos e das visões de loja que poderão visualizar a campanha.
FIGURA 09 Visões de loja e grupos de clientes. Fonte: vídeo de demonstração · 08:40

Nos grupos de clientes, NOT LOGGED IN identifica visitantes que ainda não fizeram login. Para que esse público veja a campanha, ele precisa estar incluído. A seleção também permite organizar comunicações para grupos usados em operações de varejo ou atacado.

Segmentar a exibição não cria uma tabela de preços. Em uma campanha B2B, o grupo que vê o contador deve ser compatível com o público que efetivamente tem acesso à condição comercial.

Onde o contador pode aparecer na loja?

O módulo apresenta posições na página do produto, nos cards das listagens e em áreas gerais da loja. A escolha deve considerar o objetivo da campanha e o espaço disponível, sem disputar atenção com informações importantes para a compra.

Lista de posições para página de produto, cards, categoria, busca, widget, topo e rodapé.
FIGURA 10 Posições de exibição. Fonte: vídeo de demonstração · 09:00

Na página do produto, as opções incluem antes ou depois do preço, antes ou depois do botão de compra e abaixo das imagens. Nos cards, há selo sobre a foto, exibição depois do preço ou antes dos botões.

Em categoria e busca, o painel oferece posições acima ou abaixo da barra de ordenação e acima da grade de produtos. Também existem Widget CMS, topo da página e rodapé da página.

O vídeo mostra o resultado na página de produto e na vitrine; as demais posições são apresentadas como opções no administrativo. A implementação em cada tema e layout deve ser conferida na loja antes da publicação.

Como personalizar o visual da contagem regressiva?

Em Conteúdo e design, a campanha apresenta uma galeria com dez modelos visuais. O lojista pode escolher uma apresentação discreta para uma listagem ou um bloco mais destacado para uma página de produto.

Galeria com os dez modelos de design e o campo de esquema de cores da campanha.
FIGURA 11 Dez modelos visuais do contador. Fonte: vídeo de demonstração · 12:00

Os modelos exibidos são Compacto, Painel, Minimalista, Banner, Segmentos, Relâmpago (PDP), Escassez (PDP), Destaque (Hero), Card de produto e Oferta com preço De/Por (PDP). Na interface, PDP se refere à página de detalhe do produto; PLP, à listagem de produtos.

Compacto, Minimalista e Card de produto são apresentados como alternativas para espaços menores. Painel, Banner e Segmentos acomodam outras composições. Os modelos identificados como PDP priorizam o destaque na página do produto. Destaque (Hero) é indicado no painel para áreas amplas, como home, CMS e widget.

O esquema de cores permite escolher entre Marca, Promoção, Aviso, Crítico e Neutro. Na configuração global, também é possível definir um design e um esquema padrão para novas campanhas, ocultar unidades zeradas e usar formato compacto nas listagens.

O nome visual Escassez não deve ser confundido com controle de estoque. O vídeo não demonstra reserva de unidades nem uma regra automática que comprove baixa quantidade disponível. A mensagem comercial deve refletir uma condição real.

O que aparece antes, durante e depois da promoção?

A campanha possui três campos de mensagem, um para cada etapa. Os textos ajudam o visitante a distinguir a expectativa pelo início, o período de validade e o encerramento.

Campos de mensagem antes do início, durante a campanha e após o término, com variáveis de personalização.
FIGURA 12 Mensagens para cada etapa da campanha. Fonte: vídeo de demonstração · 12:40
ANTES

Começa em

Usado quando a opção de mostrar a contagem antes do início está ativada. A contagem aponta para o começo da campanha.

DURANTE

Termina em

É a mensagem padrão durante a campanha. O contador comunica o tempo restante até o prazo final.

DEPOIS

Promoção encerrada

Pode substituir os números ao final, desde que o comportamento escolhido seja exibir a mensagem de encerramento.

Os textos são simples, sem HTML. O painel informa variáveis como {{days}}, {{hours}}, {{minutes}}, {{seconds}}, {{campaign_name}}, {{start_date}} e {{end_date}}. Também são listadas variáveis de desconto e preços: {{discount_percent}}, {{discount_amount}}, {{regular_price}} e {{final_price}}.

Um exemplo de texto é {{campaign_name}} termina em {{days}} dias. A redação deve ser revisada para não ficar inadequada quando restar menos de um dia. As variáveis de preço e desconto precisam ser testadas no contexto do produto; sua presença no formulário não significa que existam valores de produto em uma faixa geral da loja.

O que acontece quando o contador chega a zero?

Na área Botão de ação e término, o lojista escolhe entre ocultar o contador ou exibir uma mensagem após o término. No segundo caso, também configura por quantos segundos a mensagem permanecerá visível. O painel informa que um valor vazio ou zero representa duração indeterminada.

Configurações de pré-contagem, comportamento após o prazo, duração da mensagem e destino do botão.
FIGURA 13 Encerramento e botão de ação. Fonte: vídeo de demonstração · 14:00

Existe ainda a opção Exibir contagem antes do início. Ligada, ela mostra o tempo até a campanha começar. Desligada, o contador não é mostrado durante essa etapa de espera.

Botão para direcionar o visitante

O botão de ação permite acrescentar um comando como Ver ofertas. A configuração inclui texto, tipo de destino e destino. A ajuda do formulário apresenta caminhos internos, identificação de categoria ou produto, página CMS e URL externa como formas de direcionamento.

Segundo o painel, o botão deixa de aparecer depois do término e não é exibido na posição Card de produto: selo sobre a foto, em que a própria imagem já leva ao produto. Dentro dos cards, a ação pode ser apresentada como um link de texto.

Ocultar a contagem ao final é apenas o comportamento visual. Confira separadamente se o preço especial ou a regra comercial também terminam no momento anunciado.

Sincronização de horário e acessibilidade

Qual relógio a contagem utiliza?

As configurações gerais oferecem três modos de sincronização. Desabilitada utiliza o relógio do dispositivo do visitante. Automática consulta o servidor depois do carregamento e corrige a referência quando a diferença ultrapassa a tolerância definida. Sempre adota a hora do servidor e faz uma nova consulta quando o cliente volta para a aba.

Ajustes de sincronização do relógio, tempo de espera e tolerância para diferenças de horário.
FIGURA 14 Sincronização com o servidor. Fonte: vídeo de demonstração · 02:20

O painel permite ajustar o tempo máximo de espera pela resposta do servidor e a tolerância, em milissegundos. Os valores 1200 e 5000 da tela correspondem a 1,2 segundo e 5 segundos, respectivamente. São exemplos da demonstração, não uma recomendação universal para todas as lojas.

Como o módulo trata leitores de tela e movimento reduzido?

A opção ARIA live para mudança de fase controla o anúncio da passagem entre as etapas. No modo educado, a mudança é anunciada sem interromper. A ajuda da interface esclarece que os segundos não são anunciados individualmente.

Controles de anúncio da mudança de fase para leitores de tela e respeito à preferência por movimento reduzido.
FIGURA 15 Opções de acessibilidade. Fonte: vídeo de demonstração · 03:40

O ajuste Respeitar movimento reduzido evita a animação do botão ao passar o ponteiro quando o visitante ativou essa preferência no sistema operacional. Esses controles fazem parte do cuidado com a interface; não substituem a avaliação de acessibilidade do conjunto da loja.

Exemplos de campanhas com o PromoCountdown

Os cenários abaixo são sugestões de configuração a partir dos recursos demonstrados. Não representam campanhas já publicadas nem substituem a validação das condições comerciais.

Black Friday com encerramento comum

Uma loja pretende comunicar a mesma data final em uma faixa geral e em produtos participantes. Pode usar Datas da campanha, definir início, fim e fuso, escolher os produtos e configurar as posições. A equipe revisa as regras de desconto para que não exista divergência entre o prazo anunciado e os preços.

Vitrine com ofertas de durações diferentes

Quando cada item possui um período de preço especial, a combinação Datas do preço especial com Todos os produtos com preço especial permite orientar a campanha a esse conjunto. O selo no card e o contador na página do produto comunicam o prazo de cada oferta, sujeito às datas cadastradas.

Ação para um grupo de clientes

Em uma operação B2B, a campanha pode ser direcionada à visão de loja e ao grupo de clientes pretendidos. A mensagem deve descrever a condição realmente disponível para esse público. Segmentar o contador, por si só, não cria desconto exclusivo nem bloqueia o acesso a produtos.

Perguntas frequentes sobre contador regressivo no Magento 2

O PromoCountdown cria desconto automaticamente?

A demonstração mostra a configuração da comunicação e do prazo, não a criação automática de descontos. O preço especial ou a regra comercial devem ser configurados e validados separadamente.

Posso mostrar o contador apenas em produtos selecionados?

Sim. O modo de seleção manual permite montar a lista usando ID, SKU ou nome. Também existe aplicação por condições de produto.

O contador pode aparecer antes de a promoção começar?

Sim. A opção de pré-contagem mostra quanto falta para o início, desde que a data futura e a fonte do período estejam configuradas de forma coerente.

Por que o contador não aparece para visitantes sem login?

Confira o grupo NOT LOGGED IN, a habilitação global, o status, as datas, a visão de loja, os produtos, a posição e a prioridade. Listas automáticas também dependem dos índices indicados no painel.

Posso usar o prazo do preço especial em uma faixa no topo?

Na versão demonstrada, as posições gerais, como topo, rodapé, categoria, busca e Widget CMS, exigem as datas da campanha. Prazos associados a produtos são usados em posições com contexto de produto.

O encerramento do contador remove o preço promocional?

O comportamento documentado é ocultar a contagem ou substituí-la por uma mensagem. O fim da condição de preço precisa ser configurado e verificado na origem da promoção.

Funciona em qualquer tema ou versão do Magento?

O guia documenta a versão demonstrada, não uma matriz universal de compatibilidade. Versão do Magento, tema, layouts e integrações devem ser avaliados antes da disponibilização.

Campanhas bem apresentadas fazem parte de uma loja bem construída

Lojistas que assinam e mantêm suas lojas com a Mage2 Commerce contam com funcionalidades como o PromoCountdown para evoluir a experiência de compra, conforme o escopo e a configuração do projeto.

Somos especializados em desenvolvimento e evolução de lojas Magento 2 e Hyvä Theme. Conectamos a implementação técnica à operação comercial: produtos, regras, integrações e comunicação precisam funcionar em conjunto.

Conheça as soluções da Mage2 Commerce Veja outras demonstrações no nosso canal

Sobre este guia e as imagens

Fonte principal: vídeo PromoCountdown - Mage2, fornecido pela Mage2 Commerce. As quinze capturas são quadros reais do vídeo, recortados para destacar a interface e convertidos para WebP. Cada legenda identifica o instante da gravação. As orientações descrevem a versão demonstrada e não constituem garantia de compatibilidade com todos os ambientes.

As referências da Adobe, vinculadas na seção inicial, contextualizam os recursos nativos de preço especial e regras de catálogo; não são documentação do módulo Mage2. Informações institucionais: quem é a Mage2 Commerce.